Boilerplate gulp tasks for client side packages
(Building angular modules? Then you'll find this more useful: boilerplate-gulp-angular)
- 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)
- Generate complexity/maintainability reports (plato)
- Launch a development server (connect) which automatically reloads browsers (livereload) as files get rebuild incrementally (gulp)
- gulp - Build engine
- browserify - Bundles CommonJS modules for use in browsers
- less - CSS preprocessor
- csso - CSS minifier
- recess - CSS linter
- karma - Cross-browser unit test runner
- connect - HTTP server for development use
- livereload - Automatic reloading of browsers which are connected to the development server
To see it in action see client-side-seed.
If you don't have a
package.json file at the root of your code repository, execute
npm init to generate one. Modify the "main" key in package.json to point to your root CommonJS module, whatever is assigned to
exports in this module will be "exported" to the
window.<package.name> variable on browsers.
npm install --save-dev gulp boilerplate-gulp. Then modify
gulpfile.js (or create one):
var gulp = require'gulp'boilerplate = require'boilerplate-gulp';boilerplategulpjsMain: 'path/to/js/main.js'cssMain: 'path/to/css/main.less';// Rest of your gulp file, potentially overwriting the boilerplate-gulp tasks...
- dist/ - The distributable files for this package, updated when
- build/ - The build directory used by gulp during builds.
- example/ - The root directory served during
- src/ - Source code and accompanying unit tests
- test/ - End-to-end tests
- reports/ - Generated reports (testing, coverage, complexity)