The perfect Gulp.js

README.md

The perfect gulp.js file

Tasks

serve

Runs a connect web server, serving files from /client on port 3000.

uglify-js

Concatenates JavaScript files, runs them through ngAnnotate (magic angular.js dependency injection), uglifies, and names the output file app.min.js.

less

Compiles less styles into a single app.css.

watch

Automatically runs uglify-js and less when relivant files are created, deleted, or modified. Also supports live reloading via a Chrome Extension.

default

Runs the serve and watch tasks. Usually this is the only task you will need to run.

Notifications

Popup task notifications (similar to growl) are provided by gulp-notify. On error notifications (either failed to compile less or JavaScript) also play a frog sound on OS X.

Help

gulp help for help.

gulpfile.js

var gulp        = require('gulp'),
    watch       = require('gulp-watch'),
    liveReload  = require('gulp-livereload'),
    concat      = require('gulp-concat'),
    ngAnnotate  = require('gulp-ng-annotate'),
    uglify      = require('gulp-uglify'),
    rename      = require('gulp-rename'),
    moment      = require('moment'),
    notify      = require('gulp-notify');
    less        = require('gulp-less');
    serve       = require('gulp-serve');

    require('gulp-help')(gulp, {
        description: 'Help listing.'
    });

gulp.task('serve', 'A simple web server.', serve({
    root: ['client'],
    port: 3000
}));

gulp.task('uglify-js', 'Concat, Ng-Annotate, Uglify JavaScript into a single app.min.js.', function() {
    gulp.src(['client/js/libraries/**/*.js', 'client/js/source/**/*.js'])
        .pipe(concat('app'))
        .pipe(ngAnnotate())
        .on('error', notify.onError("Error: <%= error.message %>"))
        .pipe(uglify())
        .on('error', notify.onError("Error: <%= error.message %>"))
        .pipe(rename({
            extname: ".min.js"
         }))
        .pipe(gulp.dest('client/js'))
        .pipe(notify('Uglified JavaScript (' + moment().format('MMM Do h:mm:ss A') + ')'))
        .pipe(liveReload({
            auto: false
        }));
});

gulp.task('less', 'Compile less into a single app.css.', function() {
    gulp.src(['client/styles/bootstrap/bootstrap.less', 'client/styles/*.less'])
        .pipe(concat('app'))
        .pipe(less())
        .on('error', notify.onError("Error: <%= error.message %>"))
        .pipe(gulp.dest('client/styles'))
        .pipe(notify('Compiled less (' + moment().format('MMM Do h:mm:ss A') + ')'))
        .pipe(liveReload({
            auto: false
        }));
});

gulp.task('watch', 'Watch for changes and live reloads Chrome. Requires the Chrome extension \'LiveReload\'.', function() {
    liveReload.listen();
    watch({
        glob: 'client/js/source/**/*.js'
    }, function() {
        gulp.start('uglify-js');
    });

    watch({
        glob: 'client/styles/*.less',
    }, function() {
        gulp.start('less');
    });

    watch({
        glob: 'client/views/**/*.html'
    }).pipe(liveReload({
        auto: false
    }));
});

gulp.task('default', ['watch', 'serve']);

package.json

{
  "name": "perfect-gulp",
  "description": "The perfect gulp.js file",
  "author": "Commando.io",
  "contributors": [
    {
      "name": "Commando.io",
      "email": "hello@commando.io"
    }
  ],
  "version": "0.0.1",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.8.2",
    "gulp-concat": "^2.2.0",
    "gulp-help": "^0.1.8",
    "gulp-less": "^1.3.1",
    "gulp-livereload": "^2.1.0",
    "gulp-ng-annotate": "^0.2.0",
    "gulp-notify": "^1.4.0",
    "gulp-rename": "^1.2.0",
    "gulp-serve": "^0.2.0",
    "gulp-uglify": "^0.3.1",
    "gulp-watch": "^0.6.8",
    "moment": "^2.7.0"
  }
}

Really a perfect one. Thanks 🤠