Gulp Static Asset Workflow
A Gulp.js workflow for JavaScript, Sass, and image optimization.
Quick Start
Download, include in your project, and run:
$ npm start
Features
- Sass compilation, vendor prefixing, and minification
- JavaScript module bundling and optimization
- Image optimization
- Local development environment with real-time compiliation
- File size reporting
- Code formatting rules (EditorConfig and JS Beautifier)
Usage
Requirements
Local Development
Start a local development environment that compiles assets, watches for changes, then recompiles as needed:
$ npm start
Build
Optimized build:
$ npm run build
Configuration
Several configurable paths and options are stored in the gulpfile's config object.
config.browsers
Type: Array
Supported browsers for your project; used for CSS vendor prefixes. See Autoprefixer for possible values.
config.dest
Type: String
Folder where assets are to be saved.
config.dev
Type: Boolean
Flag for whether or not script should be running as a development environment (watching, recompiling). This value is passed in as a command line flag. (e.g. $ gulp --dev)
config.dest
Type: Object
Where to output assets.
config.dest.images
Type: String or Array
config.dest.scripts
Type: String or Array
config.dest.styles
Type: String or Array
config.src
Type: Object
Pointer to source files.
config.src.images
Type: String or Array
config.src.scripts
Type: String or Array
config.src.styles
Type: String or Array