Gulp-wizard NPM

Gulp Wizard

Gulp wizard is a general automated build tool for building client side javascript applications with NodeJS and Bower. With this you don't have to write the same build file over and over again, just configure some options and start the build. Now it specialized only for Angularjs applications.

Features

Aggregate and compress vendor javascript and css files with Bower. Just create a bower.json and add some dependencies. It uses the following plugins:
main-bower-files module, for gathering the main files.
Generate application stylesheets from less and sass. It uses the following plugins:
gulp-less for compiling less.
gulp-sass for compiling sass.
gulp-autoprefixer for autoprefixing the vendor specific css rules.
gulp-clean-css for compressing the output.
Generating application javascript. It uses the following plugins:
gulp-eslint for the good code quality.
gulp-ng-annotate for easy angular dependency injection.
gulp-babel for ES6 compatibility.
gulp-uglify for compressing the output.
Generate angularjs template cache. It uses the following plugins:
gulp-htmlmin for compressing the templates
gulp-angular-templatecache for the generation itself.

Install

npm install --save-dev gulp-wizard

Usage

Create a very simple gulpfile:
```
require('gulp-wizard')();
```
Put some less, javascript and html files into the src folder (check out the example)
Run the gulp build, some examples:

gulp
gulp --develop
gulp --debug
gulp watch
gulp javascript less bower-css bower-js templatecache

It will generate the output files into the destination directory, which is public by default.

Configuration

You can pass configuration to the wizard:

require('gulp-wizard')({
   foo: 'bar' // configuration options
   pluginid: {
   	pluginOption: ... // module options
   }
});

Basic configurations
baseSourceDir: all sources located here, default: src
vendorBaseSourceDir: bower directory, default: bower_components,
destDir: all output goes there, default public
develop: are we in the develop mode?, default false. Use the command line parameter to activate.
debug: debug the build process, default false. It shows what files are processing. Use the command line parameter to activate.
sourceMaps: generation source maps (it's on in case develop mode), default: false
notifyError: alert the user of any failure, default: true
notifySuccess: notify the user in case the build was success, default: false
silent: do not make noise in case error, default: false
Basic module options
src: Source files inside the base source directory
dest: Destination folder inside the destDir
out: Output file name
You can set options for every plugin listed above in the feature section. Setting the module plugins to false means turning them off.
bower-css: bower, cleancss
bower-js: bower, uglify
less: less, autoprefixer, cleancss
javascript: eslint, eslintDev (this will merge to the eslint in case develop mode), babel, ngAnnotate, uglify
templatecache: htmlmin, templateCache

Non null default values for the module plugin options:

autoprefixer:
browsers: ['last 2 versions']
remove: true
eslint:
parser: 'babel-eslint'
parserOptions: { ecmaVersion: 7, sourceType: 'script' }
rules: { strict: 0, quotes: 0, yoda: 0 }
globals: { '_': true, '$': true, angular: true, angularI18n: true, grecaptcha: true, jQuery: true, moment: true, 'moment-range': true, s: true }
envs: [ 'browser' ]
eslintDev:
rules: { 'no-unused-vars': 1, 'no-console': 1, 'no-alert': 1 }
ngAnnotate: {}
babel { compact: false, presets: ['es2015'], plugins: ['babel-plugin-transform-decorators-legacy'] }
htmlmin:
collapseWhitespace: true
removeComments: true
templateCache:
standalone: true

Complex example for:

make the build silent
change the application stylesheet filename
setup autoprefixer browser versions
turn off the javascript compression
manually turn of the bower-css module

require('gulp-wizard')({
  silent: true
  less: {
    out: 'another.css'
    autoprefixer: {
      browsers: ['> 1%']
    }
  },
  javascript: {
    uglify: false
  },
  'bower-css': false
});