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.
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
insrc/html
foo/main.js
insrc/js
style-foo.scss
and its related Sass file structure insrc/sass
test.js
insrc/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 totrue
.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 togulpfile.js
.
Legs is released under MIT License.