lukeaskew / gulp-static-asset-workflow

A Gulp.js workflow for JavaScript, Sass, and image optimization.

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

• Node.js

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