nuǝW pǝuoᴉʇᴉsoԀ ʎlǝʌᴉʇɐƃǝN
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    legspublic

    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.

    install

    npm i legs

    Downloadsweekly downloads

    3

    version

    1.0.1

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar