g-generator

This is a page generator to be faster!
Github: https://github.com/t1gu1/g-generator

If you want to support this development

https://paypal.me/t1gu1

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 like gulp 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