boilerplate-gulp

Browser Application Builder

All the things you would want in a build system for building browser application in one package.

(Building angular modules? Then you'll find this more useful: boilerplate-gulp-angular)

Tasks

# Lints, compiles, prefixes, test, and minifies JS and LESS files 
# and puts the artifacts in the ./build directory 
gulp bpcss:build
 
# Watches source files and rebuilds when they are modified and starts a server 
# on port 8080 which serves ./build and ./example directories 
gulp bpcss:dev
 

Use

Execute npm install --save-dev gulp boilerplate-gulp, then modify your Gulpfile.js like so (or create one):

var path = require('path');
var gulp = require('gulp');
var boilerplate = require('boilerplate-gulp');
 
boilerplate(gulp, {
  name: 'example',
 
  connect: {
    // The root directories to serve using the development server
    root: ['./example', './build']
  }
 
  js: {
    // The entry point of the CommonJS module
    entry: path.join(__dirname, 'src/main.js'),
 
    // All JS files to be linted and included in coverage tests
    sources: path.join(__dirname, 'src/**/*.js'),
 
    // The Jasmine unit tests
    tests: path.join(__dirname, 'src/**/*Spec.js'),
 
    // The destination to put the built file
    dest: path.join(__dirname, 'build', 'js')
  },
 
  css: {
    // The entry point of the LESS module
    entry: path.join(__dirname, 'src/main.less'),
 
    // The LESS files sources to lint
    sources: path.join(__dirname, 'src/**/*.less'),
 
    // The destination to put the built file
    dest: path.join(__dirname, 'build', 'css')
  }
});
 
// Rest of your gulp file, potentially overwriting the boilerplate-gulp tasks...

Capabilities

• Compiles JavaScript CommonJS modules into a single file (browserify) which can be loaded directly in a browser, via CommonJS loader, or a AMD loader. Produces both an unminified version and a minified version with source maps.
• Compiles LESS files into a single CSS file. Produces both an unminified version and a minified version with a source maps.
• Run cross-browser unit tests (jasmine & karma) using Chrome, Firefox, and Safari.
• Generates coverage reports (istanbul) for unit tests.
• Lints CSS (recess) and JS (jshint)
• Launch a development server (connect) which automatically reloads browsers (livereload) as files get rebuild incrementally (gulp)