Gulp Angular Skeleton Annotated Gulpfile

gulp-angular-skeleton-gulpfile-annotated.js

//two main tasks are 'gulp watch' and 'gulp build'

//dependencies:
var gulp = require('gulp');
    //to use in conjunction with chrome plugin:
    livereload = require('gulp-livereload');
    //for css:
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = reqwuire('gulp-minify-css'),
    rename = require('gulp-rename');
    //for javascript:
    jshint = require('gulp-jshint');
    uglify = require('gulp-uglify');
    concat = require('gulp-concat');
    //for cleaning out dist/ directory before build:
    rimraf = require('gulp-rimraf');
    //angular-specific:
    ngAnnotate = require('gulp-ng-annotate');
    htmlify = require('gulp-angular-htmlify');
    //for bundling up js bower dependencies into one vendor file on build:
    mainBowerFiles = require('main-bower-files');
    gulpFilter = require('gulp-filter');
    useref = require('gulp-useref');

//paths object to save file paths for ease as gulpfile gets larger
var paths = {
  dev: {
    css: 'app/public/css',
    html: 'app/public/**/*.html',
    sass: 'app/public/scss/*.scss',
    js: 'app/public/js/**/*.js',
    bower: 'app/bower_components/**'
  },
  build: {
    main: 'dist/',
    css: 'dist/public/css',
    js: 'dist/public/js'
  }
};

//for now, only used in bower-files task
var jsFilter = gulpFilter('*.js');

//watch for changes and compile css and run jshint on those changes
//also use livereload to automatically reload page
gulp.task('watch', function() {
  livereload.listen();
  gulp.watch(paths.dev.html).on('change', livereload.changed);
  gulp.watch(paths.dev.sass, ['styles']).on('change', livereload.changed);
  gulp.watch(paths.dev.js, ['lint']).on('change', livereload.changed);
});

//watch scss for changes and render into minified css with nice auto-prefixing
gulp.task('styles', function() {
  return gulp.src(paths.dev.sass)
    .pipe(sass({ style: 'expanded', errLogToConsole: true }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
    .pipe(concat('main.css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('app/public/css'));
});

//stylish output for errors
gulp.task('lint', function() {
  return gulp.src([paths.dev.js, '!./app/public/bower_components/**'])
  .pipe(jshint()).on('error', errorHandler)
  .pipe(jshint.reporter('jshint-stylish'))
  .pipe(jshint.reporter('fail'));
});

//build task, with other tasks as dependencies and then javascript handling in anonymous function
gulp.task('build', ['bower-files', 'copy-css', 'copy-server', 'copy-html-files'], function() {
    return gulp.src(['./app/public/js/**/*.js', '!./app/public/bower_components/**'])
    .pipe(ngAnnotate())
    .pipe(uglify())
    .pipe(concat('app.min.js'))
    .pipe(gulp.dest(paths.build.js))
});

//task to clear out dist/ folder befor building out deployment version of app - runs before every other task in 'gulp build'
gulp.task('empty-dist', function() {
  return gulp.src(paths.build.main, { read: false })
    .pipe(rimraf());
});

//copy minified CSS over to /dist
gulp.task('copy-css', ['empty-dist'], function () {
  return gulp.src('./app/public/css/*.css')
    .pipe(gulp.dest('dist/public/css'));
});

//copy html files into build directory, apply html5 data prefix to angular
gulp.task('copy-html-files', ['empty-dist'], function () {
  var assets = useref.assets();

  return gulp.src('./app/public/**/*.html')
    .pipe(assets)
    .pipe(htmlify())
    .pipe(assets.restore())
    .pipe(useref())
    .pipe(gulp.dest('dist/public'));
});

//copy over express server into dist/ folder
gulp.task('copy-server', ['empty-dist'], function () {
  return gulp.src('./app/server.js')
  .pipe(gulp.dest('dist/'));
})

//deal with getting bower dependencies into dist/index.html bower and minify and concat bower js into vendor.min.js
gulp.task("bower-files", ['empty-dist'], function(){
  return gulp.src(mainBowerFiles())
    .pipe(jsFilter)
    .pipe(uglify())
    .pipe(concat('vendor.min.js'))
    .pipe(gulp.dest("dist/public/js"));
});

//error handler helper for jshint
function errorHandler (error) {
  this.emit('end');
}