Annotated example gulpfile

var gulp = require('gulp');

/* 
 * Used plugins. All need to be installed first (see dependencies comment at bottom)
 */
var autoprefixer  = require('gulp-autoprefixer'),
    concat        = require('gulp-concat'),
    connect       = require('gulp-connect'),
    del           = require('del'),
    jshint        = require('gulp-jshint'),
    minifyCss     = require('gulp-minify-css'),
    sass          = require('gulp-sass'),
    templateCache = require('gulp-angular-templatecache'),
    uglify        = require('gulp-uglify');

/* 
 * Configuration object to store all settings to be used in tasks below
 * 
 * Unlike Grunt, this config is completely custom/optional and doesn't need to 
 * adhere to any specific structure. It's purely used to store config data in
 * a logical way. Completely open for debate.
 */
var config = {
    // This might seem weird. Gulp uses a "dest" for the destination of files 
    // after each task. I prefer to put those in a "dist" for "distribution" folder
    dest: "dist",
    html: {
        all: "src/**/*.html",
        options: {
            // Used by templateCache to tell which angular app the templates belong to
            module: "app"
        }
    },
    scripts: {
        all: "src/**/*.js",
        main: "src/app.module.js",
        out: "app.js"
    },
    server: {
        root: '',
        port: 1337
    },
    styles: {
        all: "src/**/*.scss",
        autoprefixerOptions: ['last 2 version', 'safari 5', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'],
        main: "src/module.scss",
        sassOptions: {
            style: 'compressed'
        }
    }
};

/* 
 * Empty the dist folder before re-building just to make sure nothing lingers
 */
gulp.task('clean', function() {
   del(config.dest + "/**/*");
});

/*
 * Serve your project with the settings defined above (http://localhost:1337)
 */
gulp.task('connect', function () {
    connect.server(config.server);
});

/* 
 * Store all partials into angular's templateCache to prevent HTTP requests for
 * each template
 */
gulp.task('html', function () {
    return gulp.src(config.html.all)
        .pipe(templateCache(config.html.options))
        .pipe(gulp.dest(config.dest));
});

/* 
 * Lint your javascript to make sure you haven't made any booboos
 */
gulp.task('lint', function() {
    gulp.src(config.scripts.all)
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

/* 
 * Concatenate all scripts and minify them
 */
gulp.task('scripts', function() {
   gulp.src(config.scripts.all)
       .pipe(concat(config.scripts.out))
       .pipe(uglify())
       .pipe(gulp.dest(config.dest));
});

/* 
 * Parse SCSS, autoprefix for browser compatibility, then minify
 */
gulp.task('styles', function() {
    return gulp.src(config.styles.main)
        .pipe(sass(config.styles.sassOptions))
        .pipe(autoprefixer(config.styles.autoprefixerOptions))
        .pipe(minifyCss())
        .pipe(gulp.dest(config.dest));
});

/* 
 * Watch for changes in all styles, scripts and partials and run the corresponding
 * tasks again when changes occurred
 */
gulp.task('watch', function() {
    gulp.watch(config.styles.all, ['styles']);
    gulp.watch(config.scripts.all, ['scripts', 'lint']);
    gulp.watch(config.html.all, ['html']);
});

/*
 * Tell the `gulp` command to run all tasks in a semi-logical order
 */
gulp.task('default', ['clean', 'styles', 'lint', 'scripts', 'html', 'watch', 'connect']);


/*
 * Dev dependencies in package.json for this gulpfile:
 
 "devDependencies": {
      "del": "^1.1.1",
      "gulp": "^3.8.11",
      "gulp-angular-templatecache": "^1.6.0",
      "gulp-autoprefixer": "^2.3.0",
      "gulp-concat": "^2.5.2",
      "gulp-connect": "^2.2.0",
      "gulp-jshint": "^1.10.0",
      "gulp-minify-css": "^1.1.1",
      "gulp-sass": "^2.0.1",
      "gulp-uglify": "^1.2.0"
  }
  
  */