g-generator
This is a page generator to be faster!
Github: https://github.com/t1gu1/g-generator
If you want to support this development
Technologies generated
- scss
- typescript
- pug
- html
- nodeJs Route (with express)
- nodeJs Controller (with express)
Technologies used
Task runner
- Sass http://sass-lang.com/
- Typescript https://www.typescriptlang.org/
- Gulp http://gulpjs.com/
Gulp tools
- browserify
- browser-sync (Live reload)
- watch
- minify
- sass
- Typescript
- sourcemap
- autoprefixer
- imagemin
- Error notifier
- g-generator https://www.npmjs.com/package/g-generator (Usefull to learn for the project)
- babelify (babel)
- And others less important. You can check all packages in ./themes/intact/assets/package.json
Framework
- Foundation 6 http://foundation.zurb.com/sites.html
Library
- JQuery 3.2.1 https://jquery.com/
- Modernizr https://modernizr.com/
General information
- You should use gulp init to generate backend or/and frontend. It will change your gulpfile and your package.json file. Don't worry. The generator will npm install new package. ;)
- A folder for each page will be created with its proper .ts, .scss & (.pug or .html)
- main.scss will add reference automatically
- main.ts will add reference automatically
- Files are generated from the template folder in the root of this npm package in the folder
/templates
- You can merge/write all generated command in one command line OR delete everything you want in one command line
The workflow / the approach
- The compiled files will be transferred at the root of ./dist folder.
- All sass is compiled in a main.css & all .js in a main.js.
- With this approach, you can create a folder with e.g. :
./home/(home.scss, home.pug, home.ts)
./page2/(page2.scss, page2.pug, example.ts)
It's much easier to find each files.
To do
install require npm
npm install gulp-cli -g
npm install nodemon -g
npm install
You'll need to add g-generator to your gulp in order to access the commands
const generator = require('g-generator');
generator();
After the new gulp file is generated, you'll certenly have to modify the lines 54/55 AND lines 69/70 to configure the livereload with nodeJs or your apache server.
Gulpfile.js configuration
- Maybe you'll need to change the line 55 in the gulpfile to use the livereload
- Line 55: proxy: DomainNameToChangeForTheGoodUrl
gulp command
Init
To generate front-end & back-end at the same time
gulp init
To generate front-end only
gulp init --frontend
To generate back-end only
gulp init --backend
Gulp bases
For the first time you'll need to use the gulp
command.
gulp
To watch changes in files. It contains a livereload.
gulp watch
NodeJs Base
nodemon server.js
Generate
Front-end
Page
To generate a new page with .pug, .ts & .scss
gulp generate --name myPageName --pug --scss --ts
To generate a new page with html
gulp generate --name myPageName --html
blocks
To generate a new block (Like generate a page with a --block
)
gulp generate --name myPageName --block --pug --scss --ts
Route
To generate a route
gulp generate --name myPageName --route
To generate a route & a page
gulp generate --name myPageName --route --html
To generate a route & a page with pug, .ts & .scss
gulp generate --name myPageName --route --html --pug --ts -scss
Back-end
Controller
To generate a Controller
gulp generate --ctrl myControllerName
To generate a Controller and add its reference in a route
gulp generate --name myControllerName --addRefTo RouteToAddRef
You can merge ctrl creation & add a ref to a route
gulp generate --name myControllerName --ctrl --addRefTo RouteToAddRef
Remove
To remove a page
gulp remove --name myPageName --page
To remove a route
gulp remove --name myPageName --route
Shortcuts
The first letter is for the g of g-generator.
The second letter is for the action you want to do.
The parameters after will have shortcut soon.
Generate
gulp gg
Remove
gulp gr
Init
gulp gi
Comming soon
- Add template for php pages & blocks
- Display a random message on file change & file creation (First it will be few static message)
- Add Drupal 7 templates
- Add Drupal 8 templates
- Shortcut will be add to parameters soon
If you have some idea you can mention it in
the github issue https://github.com/t1gu1/g-generator/issues/new
with the label: enhancement.
Report bugs too! I'll try my best to fix them.
patch note
5/25/2017
- Change var route name in nodejs route "loginRoute" to "routeUrl".
- Ionic 3 already have a generator so i'll don't create one (this is why i remove it from readme).
- I'll not add linQ because lodash has better performance. You can already use lodash. (Check main.ts)
- Modify generator function addRefTo. Now you can use it when ctrl is already created if you want.
- Add shortcut to gulp actions. e.g.:
gulp gg
to do likegulp generate
5/16/2017
- Fix nodeJs route when generated
- Ajust templates for nodejs routes
5/10/2017
- Make some change in the templates
- Add some documentation in the readme
- Fix front-end templates
5/9/2017
- Fix general g-generator (generate files by templates)
5/8/2017
- Add Modernizr
- Now gulp watch detect new files automatically (no need to rewrite the command in the command line) :D
- Fix remove command line & reference remove
- Add remove blocks
- Write some infos about livereload in the readme
5/7/2017
- Fix generate scss (add *_*Before.scss)
- General others fix
- Change the default browserSync to './dist/'
- Fix some formulations in readme.md
5/5/2017
- Add Incoming ideas
- Bug fix: replace "-" by "_" for typescript class & file name but not for scss class in files
- Fix the import (from) in the typescript file
5/4/2017
- Fix readme to explain how to use/include g-generator. (wrong exlications)
5/3/2017
- Reorganise code to be more efficient & more flexible for the next updates (again)
- The second npm install is starting automatically
- A lot of bug fix
- When you add Route. The reference is now added in the main routes.ts!!
5/2/2017
- Reorganise code to be more efficient & more flexible for the next updates
- The second npm install will start automatically
5/1/2017
- Create routes.ts file in the core when you gulp init
- Create server.ts when you gulp init
- I decide to add patch notes for each update
4/30/2017
- You can now generate blocks
- When you init, the blocks folder is created
Earlier
- The project creation & a lot of things that i don't remember