light easy gulp scaffold

gulp, scaffold, sass
npm install legs@1.0.1



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


  • 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.



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


Custom gulp tasks are listed as below:


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


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


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


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


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.


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.


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.


Legs is released under MIT License.