Example Gulpfile with concat, minify, bundle and image optimization

gulpfile-minimal.js

"use strict";
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    uglify = require('gulp-uglify'),
    notify = require('gulp-notify'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    plumber = require('gulp-plumber'),
    serve = require('gulp-serve'),
    connect = require('gulp-connect'),
    rev = require('gulp-rev-append');

// Asset pipelines.   I do it this way so they are loaded in the correct order.  ie: Angular files, vendor files, custom app files.

var jsAssets = [
'vendor/angular/angular.min.js',
'vendor/angular-bootstrap/ui-bootstrap.min.js',
'src/app/**/*.js'
];

var cssAssets = [
'vendor/bootstrap/bootstrap.min.css',
'vendor/animate.css/animate.min.css',
'src/styles/*.css'
];

gulp.task('default', ['watch', 'connect', 'bundleJS', 'build-scss', 'bundleCSS', 'rev']);


gulp.task('serve', serve('public'));

gulp.task('connect', function() {
  connect.server({
    root: 'public',
    livereload: true
  });
});


gulp.task('build-scss', function() {
    return gulp.src('src/scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'compressed'
        }))
        .on('error', notify.onError("Error: <%= error.message %>"))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write('/map'))
        .pipe(plumber())
        .pipe(gulp.dest('src/styles'));
});


gulp.task('bundleJS', function() {
    return gulp.src(jsAssets)
        .pipe(sourcemaps.init())
        .pipe(concat('app.js'))
        .pipe(gulp.dest('public/js'))
        .pipe(ngAnnotate())
        .on('error', notify.onError("Error: <%= error.message %>"))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .on('error', notify.onError("Error: <%= error.message %>"))
        .pipe(sourcemaps.write('/map'))
        .pipe(gulp.dest('public/js'));
});

gulp.task('bundleCSS', function() {
    return gulp.src(cssAssets)
        .pipe(sourcemaps.init())
        .pipe(concat('app.css'))
        .pipe(gulp.dest('public/styles'))
        .on('error', notify.onError("Error: <%= error.message %>"))
        .pipe(rename({
            suffix: '.min'
        }))
        .on('error', notify.onError("Error: <%= error.message %>"))
        .pipe(sourcemaps.write('/map'))
        .pipe(gulp.dest('public/styles'))
        .pipe(connect.reload());
});

// This task will add a cache  buster to file with  ?rev=@@hash added to it.  This forces a users cache to refresh anytime there is a change.

gulp.task('rev', function() {
    gulp.src('./src/index.html')
        .pipe(rev())
        .pipe(gulp.dest('./public'));
});

gulp.task('html', function () {
  gulp.src('./public/*.html')
    .pipe(connect.reload());
});


gulp.task('watch', function() {

    gulp.watch('src/scss/**/*.scss', ['build-scss', 'rev']);
    gulp.watch(jsAssets, ['bundleJS', 'rev']);
    gulp.watch(cssAssets, ['bundleCSS', 'rev']);
    });

gulpfile.js

// By Taylor Ackley.  taylorackley@gmail.com


"use strict";
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    image = require('gulp-image'),
    moment = require('moment'),
    notify = require('gulp-notify'),
    ngAnnotate = require('gulp-ng-annotate'),
    liveReload = require('gulp-livereload'),
    autoprefixer = require('gulp-autoprefixer'),
    merge = require('merge-stream'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    cleanCSS = require('gulp-clean-css'),
    plumber = require('gulp-plumber'),
    rev = require('gulp-rev-append');

// Asset pipeline.   Loaded in order.

var assets = [
    'public/ng/*.min.js',
    'public/vendor/select2/angular-select.min.js',
    'public/vendor/colorpicker/tinycolor.min.js',
    'public/vendor/colorpicker/colorpicker.min.js',
    'public/vendor/codemirror/codemirror.min.js',
    'public/vendor/codemirror/css.min.js',
    'public/vendor/codemirror/angular-codemirror.min.js',
    'public/vendor/ng-upload/ng-file-upload-all.min.js',
    'public/vendor/quill/quill.min.js',
    'public/vendor/nonangular/lodash.min.js',
    'public/vendor/nonangular/xml.js',
    'public/vendor/nonangular/moment.min.js',
    'public/vendor/nonangular/socket.min.js',
    'public/app/**/*.js'
];

var jsAssets = [
    'bower_components/angular/angular.js',
    'bower_components/angular-animate/angular-animate.js',
    'bower_components/angular-messages/angular-messages.js',
    'bower_components/angular-mocks/angular-mocks.js',
    'bower_components/angular-resource/angular-resource.js',
    'bower_components/angular-toastr/dist/angular-toastr.js',
    'bower_components/angular-toastr/dist/angular-toastr.tpls.js',
    'node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js',
    'node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js',
    'bower_components/tinycolor/dist/tinycolor-min.js',
    'bower_components/angular-color-picker/dist/angularjs-color-picker.js',
    'bower_components/angular-ui-router/release/angular-ui-router.js',
    'bower_components/angular-pageslide-directive/dist/angular-pageslide-directive.js',
    'bower_components/angular-sanitize/angular-sanitize.js',
    'bower_components/angulartics/src/angulartics.js',
    'bower_components/angulartics-google-analytics/lib/angulartics-ga.js',
    'bower_components/angular-deckgrid/angular-deckgrid.js',
    'bower_components/angular-socket-io/socket.js',
    'bower_components/socket.io-client/dist/socket.io.js',
    'node_modules/quill/dist/quill.js',
    'bower_components/ngQuill/src/ng-quill.js',
    'bower_components/satellizer/dist/satellizer.js',
    'bower_components/ng-file-upload/ng-file-upload-all.js',
    'bower_components/codemirror/lib/codemirror.js',
    'bower_components/codemirror/mode/sass/sass.js',
    'bower_components/angular-ui-codemirror/ui-codemirror.js',
    'bower_components/angularjs-slider/dist/rzslider.js',
    'bower_components/angular-ui-select/dist/select.js',
    'bower_components/moment/moment.js',
    'bower_components/lodash/dist/lodash.js',
    'bower_components/xml2json/xml2json.js',
    'src/app/**/*.js'
];

var cssAssets = [
    'bower_components/bootstrap/dist/css/bootstrap.css',
    'node_modules/angular-ui-bootstrap/dist/ui-bootstrap.css',
    'node_modules/quill/dist/quill.snow.css',
    'bower_components/angular-color-picker/dist/angularjs-color-picker.min.css',
    'bower_components/angular-color-picker/dist/themes/angularjs-color-picker-bootstrap.min.css',
    'bower_components/animate.css/animate.css',
    'bower_components/font-awesome/css/font-awesome.min.css',
    'bower_components/codemirror/lib/codemirror.css',
    'bower_components/Ionicons/css/ionicons.css',
    'bower_components/angular-ui-select/dist/select.css',
    'public/styles/style.css',
    //'bower_components/angularjs-slider/dist/rzslider.css',
    'bower_components/angular-toastr/dist/angular-toastr.css'
];

var sassAssets = ['src/scss/**/*.scss'];

var fontAssets = [
    'bower_components/font-awesome/fonts/*.*',
    'bower_components/Ionicons/fonts/*.*',
    'bower_components/bootstrap/fonts/*.*'
];

gulp.task('default', ['watch', 'build-css-v2', 'fonts', 'bundle', 'rev']);

gulp.task('jshint', function() {
    return gulp.src(['public/app/**/*.js'])
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'));
});

gulp.task('build-css', function() {
    return gulp.src(sassAssets)
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'compressed'
        }))
        .on('error', notify.onError("Error: <%= error.message %>"))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write('/map'))
        .pipe(plumber())
        .pipe(gulp.dest('public/styles'));
});

gulp.task('concat-css', function() {
    return gulp.src(cssAssets)
        //.pipe(sourcemaps.init())
        .pipe(concat('app.css'))
        .pipe(gulp.dest('public/styles'))
        .pipe(cleanCSS())
        .pipe(rename({
            suffix: '.min'
        }))
        //.pipe(sourcemaps.write('/map'))
        .pipe(gulp.dest('public/styles'));
});

gulp.task('build-css-v2', function() {
    var scss = gulp.src('src/scss/**/*.scss')
       // .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'compressed'
        }))
        .on('error', notify.onError("Error: <%= error.message %>"))
        .pipe(autoprefixer())
       // .pipe(sourcemaps.write('/map'))
        .pipe(plumber())
        .pipe(gulp.dest('public/styles'));

    var css = gulp.src(cssAssets)
        //.pipe(sourcemaps.init({loadMaps: true}))
        .pipe(concat('app.css'))
        .pipe(gulp.dest('public/styles'))
        .pipe(cleanCSS())
        .pipe(rename({
            suffix: '.min'
        }))
        //.pipe(sourcemaps.write('/map'))
        .pipe(gulp.dest('public/styles'))
        .pipe(notify('Build CSS Task Done'));

    return merge(scss, css);
});

gulp.task('build-defaults', function() {
    return gulp.src('backend/template/styles/**/*.scss')
        .pipe(sass({
            outputStyle: 'compressed'
        }))
        .on('error', notify.onError("Error: <%= error.message %>"))
        .pipe(autoprefixer())
        .pipe(plumber())
        .pipe(gulp.dest('backend/template/styles'));
});

gulp.task('fonts', function() {
    return gulp.src(fontAssets)
            .pipe(gulp.dest('public/fonts'));
});

gulp.task('bundle', function() {
    return gulp.src(jsAssets)
        .pipe(sourcemaps.init())
        .pipe(concat('app.js'))
        .pipe(gulp.dest('public/js'))
        .pipe(ngAnnotate())
        .on('error', notify.onError("Error: <%= error.message %>"))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .on('error', notify.onError("Error: <%= error.message %>"))
        .pipe(sourcemaps.write('/map'))
        .pipe(gulp.dest('public/js'))
        .pipe(notify('JS Assets compiled Task Done'));
});


// This task will add a cache buster to files in index.html with  ?rev=@@hash added to it.   Thanks regex!
gulp.task('rev', function() {
    gulp.src('./public/index.html')
        .pipe(rev())
        .pipe(gulp.dest('./public'));
});


gulp.task('image', function() {
    return gulp.src('src/img/*.*')
        .pipe(image({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        }))
        .pipe(gulp.dest('public/img'));
});


gulp.task('watch', function() {
    //gulp.watch('public/app/**/*.js', ['jshint']);
    gulp.watch(sassAssets, ['build-css-v2', 'rev']);
    //gulp.watch(cssAssets, ['concat-css', 'rev']);
    gulp.watch(fontAssets, ['fonts']);
    //gulp.watch('public/app/**/*.js', ['bundle', 'rev']);
    gulp.watch(jsAssets, ['bundle', 'rev']);
    //gulp.watch(vendorFiles, ['vendor', 'rev']);
    //gulp.watch('public/ng/*.min.js', ['angular', 'rev']);
    gulp.watch('src/img/*.*', ['image']);
    //gulp.watch('public/vendor/**/*.css', ['vendor-css', 'rev']);
    gulp.watch('backend/template/styles/**/*.scss', ['build-defaults']);
});