https://github.com/doodlewind/legs
Light Easy Gulp Scaffold
https://github.com/doodlewind/legs
Last synced: about 1 year ago
JSON representation
Light Easy Gulp Scaffold
- Host: GitHub
- URL: https://github.com/doodlewind/legs
- Owner: doodlewind
- Created: 2016-09-03T12:46:47.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-01-22T20:48:02.000Z (over 8 years ago)
- Last Synced: 2025-01-26T09:48:29.922Z (over 1 year ago)
- Language: JavaScript
- Size: 11.7 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](http://gulpjs.com/) as global dependency, notice that `npm` can be replaced by [cnpm](https://npm.taobao.org/) for mainland China developers:
```
[sudo] npm install --global gulp
```
Then clone legs:
``` bash
git clone https://github.com/doodlewind/legs.git
```
Install dependencies:
``` bash
cd legs && npm install
```
Installation done, start server and visit `localhost:8000` to test it out:
``` bash
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:
``` text
├── 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.