legs

Light Easy Gulp Scaffold, automating build tasks tuned for lightweight front end development without AMD.

Features

• Sass build automation.
• Configurable JS/CSS minify automation.
• Pure HTML template support.
• Trigger build task on file change with local web server.
• Configurable destination path and html extension, e.g.,.jsp or .php.
• Generator for new page, including html / stylesheet / script / test.

Usage

Install

Firstly install gulp as global dependency, notice that npm can be replaced by cnpm for mainland China developers:

[sudo] npm install --global gulp 

Then clone legs:

git clone https://github.com/doodlewind/legs.git

Install dependencies:

cd legs && npm install

Installation done, start server and visit localhost:8000 to test it out:

gulp server

Now gulp watchs file changes in src and automatically builds the project. Mocha test cases for index is generated at /src/test/index/test.html and it's available to be executed in browser.

File structure

Legs uses following file structure given index.html is generated by default:

├── gulpfile.js
├── package.json
├── node_modules //js libs for browser and gulp
└── src
    ├── html
    │   ├── index.html
    │   └── partials //common HTML template
    ├── js
    ├── sass
    │   ├── base
    │   ├── components
    │   ├── helpers
    │   ├── layout //page styles
    │   │   └── index
    │   │       └── _main.scss
    │   └── style-index.scss
    ├── scaffold
    └── test
        └── index //test cases
            ├── test.html
            └── test.js

Commands

Custom gulp tasks are listed as below:

default

gulp or gulp default rebuilds all static resources in source path to their corresponding destination path, including scripts / stylesheets / images.

new

gulp new -n foo generates following files:

• foo.html in src/html
• foo/main.js in src/js
• style-foo.scss and its related Sass file structure in src/sass
• test.js in src/test/foo as mocha test case

watch

gulp watch watches file changes in src and triggers gulp default. This task does not start gulp-webserver.

server

gulp server runs gulp watch and starts gulp-webserver, also responds to file changes.

clean

gulp clean removes all files in resource and cache path. This task is executed before default and watch, so don't put source file directly in destination path or it'll be cleaned. Put your source file in corresponding src path and let gulp generate it to destination path.

clean-cache

gulp clean-cache removes:

• Sass cache.
• HTML generated in project root folder (generated for local web server).

Files generated in destination path won't be effected.

Config

Options available in gulpfile.js are listed as below:

• PRODUCTION: boolean, enables JS / CSS minify when set to true.
• HTML_EXT_NAME: string, determines output html file suffix.
• PORT: number, the port number for local gulp-webserver.
• PATH: json, determines source and destination file path, relative to gulpfile.js.

License

Legs is released under MIT License.