A Gulpfile that minifies, concats and uglifies like nobodies business. Contains BrowserSync as a local webserver when using the gulp serve task. The default task assumes you are working on the server but would still like to use BrowserSync for livereload functionality. Also includes Angular specific functions such as safe uglifying and copying o…

gulpfile.js

var _PREFIX           = '';
var _SHORTNAME        = '<your-project-shortname>';
var _BASE             = '';
var _SOURCE           = _BASE+'dev/';
var _TARGET           = _BASE+'static/';
var _API_PLACEHOLDER  = '$API_URL'; // String in your JS files that gets replaced with the correct API url
var _DEV_API_URL      = '<path-to-where-your-dev-api-lives>';
var _ACC_API_URL      = '<path-to-where-your-acceptation-api-lives>';
var _PROD_API_URL     = '<path-to-where-your-production-api-lives>';
var _HEADER       = [
    '/*',
    '',
    '                    Your project name',
    '                    v1.0',
    '                    www.labela.nl',
    '                    Build: <%= new Date() %>',
    '',
    '*/',
    ''].join('\n');

var fs          = require('fs');
var gulp        = require('gulp');
var gutil       = require('gulp-util');
var gdebug      = require('gulp-debug');
var rename      = require('gulp-rename');
var header      = require('gulp-header');
var clean       = require('gulp-clean');
var tap         = require('gulp-tap');
var gzip        = require('gulp-gzip');
var size        = require('gulp-size');
var notify      = require('gulp-notify');
var replace     = require('gulp-replace');

// Reload
var browserSync = require('browser-sync');
var reload      = browserSync.reload;

// JS Plugins
var jshint      = require('gulp-jshint');
var concat      = require('gulp-concat');
var uglify      = require('gulp-uglify');
var ngAnnotate  = require('gulp-ng-annotate');

// CSS Plugins
var sass        = require('gulp-sass');
var prefix      = require('gulp-autoprefixer');
var minifycss   = require('gulp-minify-css');

// IMG Plugins
var imagemin    = require('gulp-imagemin');
var spritesmith = require('gulp.spritesmith');


// Default Watching task
gulp.task('default', function (){

  // This task is meant to be used when your app lives on the server and you already have a webserver. 
  // Browsersync will proxy your app, allowing you to use Browsersync functionality, 
  // even when working on the server.
  // Thank me later.

  browserSync.init({
    notify: true,
    debugInfo: true,
    proxy: {
      target: "192.168.22.8:8001",
    }
  });

  gulp.watch(_SOURCE+'/js/**/*.js', ['scripts']);
  gulp.watch(_SOURCE+'/js_files/**/*', ['scripts-libs']);
  gulp.watch(_SOURCE+'/scss/**/*.scss', ['styles']);
  gulp.watch(_SOURCE+'/css_files/**/*.css', ['styles-libs']);
  gulp.watch(_SOURCE+'/templates/**/*', ['html-templates']);
  gulp.watch(_SOURCE+'/img/**/*', ['images']);
  gulp.watch(_SOURCE+'/fonts/**/*', ['fonts']);

});


// Serve task
// When serving your app locally.
gulp.task('serve', ['styles'], function () {

  browserSync.init({
      server:{
        baseDir: 'app',
        directory: false
      },
      notify: true,
      debugInfo: true,
      port: 8080
    });

    gulp.watch(_SOURCE+'/js/**/*.js', ['scripts']);
    gulp.watch(_SOURCE+'/js_files/**/*', ['scripts-libs']);
    gulp.watch(_SOURCE+'/scss/**/*.scss', ['styles']);
    gulp.watch(_SOURCE+'/css_files/**/*.css', ['styles-libs']);
    gulp.watch(_SOURCE+'/templates/**/*', ['html-templates']);
    gulp.watch(_SOURCE+'/img/**/*', ['images']);
    gulp.watch(_SOURCE+'/fonts/**/*', ['fonts']);

});

// Deploy to Acceptation Task
// Will rewrite any mention of the API string in your JS files with the correct API url.
gulp.task('deploy-to-acc', ['scripts-libs','styles','styles-libs','html-templates','fonts','images','compress'],function(){
  gulp.src(_SOURCE+'js/**/*.js')
    .pipe(concat(_PREFIX+_SHORTNAME+'.js'))
    .pipe(header(_HEADER))
    .pipe(replace(_API_PLACEHOLDER,_ACC_API_URL))
    .pipe(ngAnnotate())
    .pipe(uglify()) 
    .pipe(gulp.dest(_TARGET+'/js/'))
    .pipe(reload({stream:true}))
    .pipe(size());
});

// Deploy to Production Task
// Will rewrite any mention of the API string in your JS files with the correct API url.
gulp.task('deploy-to-acc', ['scripts-libs','styles','styles-libs','html-templates','fonts','images','compress'],function(){
  gulp.src(_SOURCE+'js/**/*.js')
    .pipe(concat(_PREFIX+_SHORTNAME+'.js'))
    .pipe(header(_HEADER))
    .pipe(replace(_API_PLACEHOLDER,_PROD_API_URL))
    .pipe(ngAnnotate())
    .pipe(uglify()) 
    .pipe(gulp.dest(_TARGET+'/js/'))
    .pipe(reload({stream:true}))
    .pipe(size());
});

// JS Lint Task
gulp.task('lint', function () {
  gulp.src(_SOURCE+'js/app/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

// Concatenate & Minify JS
gulp.task('scripts', function () {
  gulp.src(_SOURCE+'js/**/*.js')
    .pipe(concat(_PREFIX+_SHORTNAME+'.js'))
    .pipe(header(_HEADER))

    // Default build step uses the Dev API url
    .pipe(replace(_API_PLACEHOLDER,_DEV_API_URL))

    // Write unoptimized files to target/dev/js. Handy for debugging.
    .pipe(gulp.dest(_TARGET+'dev/js'))

    // Write compressed code to /target/js
    // Commented out because it was sooooooo slooooow on Idle
    // If it isn't slow on your server, consider uncommenting.

    // .pipe(ngAnnotate())
    // .pipe(uglify()) 
    .pipe(header(_HEADER))
    .pipe(gulp.dest(_TARGET+'/js'))

    // Reload 
    .pipe(reload({stream:true}))
    .pipe(size());
});

// Copies all files in the js_files folder to the js folder
gulp.task('scripts-libs', function() {
  gulp.src(_SOURCE+'js_files/**/*')
    .pipe(gulp.dest(_TARGET+'/js'))
    .pipe(reload({stream:true}))
    .pipe(size());
});

// Copies all files in the js_files folder but also minifies them for added size benefits
gulp.task('scripts-libs-prod', function() {
  gulp.src(_SOURCE+'js_files/**/*')
    .pipe(ngAnnotate())
    .pipe(uglify()) 
    .pipe(gulp.dest(_TARGET+'/js'))
    .pipe(reload({stream:true}))
    .pipe(size());
});

// Concatenate & prefix & Minify CSS
gulp.task('styles', function (){
  gulp.src([_TARGET+'/dev/css/*',_TARGET+'/css/*'], {read: false}).pipe(clean({force: true}));

  gulp.src(_SOURCE+'scss/style.scss')
    .pipe(sass({
      errLogToConsole: true,
        outputStyle: 'expanded'
      }))
    .on("error", console.log)
    .pipe(prefix('last 10 version', '> 1%', 'ie 8'))
    .pipe(header(_HEADER))
    .pipe(rename(_PREFIX+_SHORTNAME+'.css'))
    .pipe(gulp.dest(_TARGET+'/dev/css'))
    .pipe(minifycss())
    .pipe(header(_HEADER))
    .pipe(gulp.dest(_TARGET+'/css'))
    .pipe(reload({stream:true}))
    .pipe(size());
});

// Font tasks
gulp.task('fonts', function (){
  gulp.src([_TARGET+'/dev/fonts/*',_TARGET+'/fonts/*'], {read: false}).pipe(clean({force: true}));
  gulp.src(_SOURCE+'fonts/**/*')
  .pipe(gulp.dest(_TARGET+'/dev/fonts'))
  .pipe(gulp.dest(_TARGET+'/fonts'))
  .pipe(reload({stream:true}))
  .pipe(size());
});

// Copies all files in the css_files folder
// Consider including all your css in main.scss as this gets concatted into one css file.
gulp.task('styles-libs', function() {
  gulp.src(_SOURCE+'css_files/**/*')
    .pipe(gulp.dest(_TARGET+'/css'))
    .pipe(reload({stream:true}))
    .pipe(size());
});

// Copies HTML templates
gulp.task('html-templates', function() {
  gulp.src(_SOURCE+'templates/**/*')
    .pipe(gulp.dest(_TARGET+'/templates'))
    .pipe(reload({stream:true}))
    .pipe(size());
});


// Compresses images and copies them
gulp.task('images', function () {
  gulp.src([_TARGET+'/dev/img/**/*',_TARGET+'/img/**/*'], {read: false}).pipe(clean({force: true}));

  gulp.src(_SOURCE+'img/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest(_TARGET+'/dev/img'))
    .pipe(gulp.dest(_TARGET+'/img'))
    .pipe(reload({stream:true}))
    .pipe(size());
});

// Compress
gulp.task('compress',function(){
  gulp.src(_TARGET+'**/*')
    .pipe(gzip())
    .pipe(gulp.dest(_TARGET));
});

// Create Spritesheets
gulp.task('createSpritesheets', function () {
  var _sprites = [];
  fs.truncate(_SOURCE+'scss/_sprites.scss', 0, function (err){});

  gulp.src(_SOURCE+'scss/sprites/**/*', {read: false}).pipe(clean({force: true}));

  gulp.src(_SOURCE+'sprites/**/*.png').pipe(tap(function (file,t) {
    file = file.path.split('/');
    file = file[file.length-2];
    if(_sprites.indexOf(file) == -1) {
      _sprites.push(file);
      var spriteData = gulp.src(_SOURCE+'sprites/'+file+'/*.png').pipe(spritesmith({
        algorithm: 'binary-tree',
        imgName: '../img/'+file+'.png',
        cssName: '_'+file+'.scss',
        cssVarMap: function (sprite) {
          sprite.name = 'ss-'+file+'-' + sprite.name.split('@2x').join('');
        }
      }));
      spriteData.img.pipe(gulp.dest(_SOURCE+'img/'));
      //console.log(spriteData);
      spriteData.css.pipe(header('\t$ss-'+file+'-image: \'../img/'+file+'.png\';\n')).pipe(gulp.dest(_SOURCE+'scss/sprites/'));
       // add file to map
      fs.appendFile(_SOURCE+'scss/_sprites.scss', '@import  "sprites/_'+file+'";\n', function (err) {});
    }
  }));
  console.log('make sure to run gulp to implement the changes to your final src');

});

package.json

{
  "name": "<your-app-name>",
  "repository": {
    "type": "git",
    "url": ""
  },
  "version": "0.0.1",
  "devDependencies": {
    "browser-sync": "^2.7.1",
    "gulp": "~3.5.0",
    "gulp-autoprefixer": "~0.0.6",
    "gulp-clean": "~0.2.4",
    "gulp-concat": "~2.1.7",
    "gulp-debug": "^2.0.1",
    "gulp-header": "~1.0.2",
    "gulp-imagemin": "~0.1.4",
    "gulp-jshint": "~1.3.4",
    "gulp-minify-css": "~0.3.0",
    "gulp-ng-annotate": "^0.5.3",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "~0.2.2",
    "gulp-replace": "^0.5.3",
    "gulp-sass": "~2.0.1",
    "gulp-size": "^1.2.1",
    "gulp-tap": "^0.1.1",
    "gulp-uglify": "~0.2.0",
    "gulp-util": "~2.2.13",
    "gulp.spritesmith": "^0.5.0",
    "gulp-gzip": "0.0.8"
  },
  "description": "### INSTALL ### - Make sure you have ruby+sass (on osx in terminal type \"sudo gem install sass\") - Make sure you have node.js installed (http://nodejs.org/) - Go to your project folder in terminal (\"cd path/to/folder/\" or type \"cd \" and drag the folder to the terminal window) - in terminal type: \"sudo npm init\" and enter the data - in terminal type: \"sudo npm install\" - to start building, just type \"gulp\" in terminal and edit the files in the BUILD dir.",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Coen Warmer",
  "license": "BSD-2-Clause",
  "keywords": [
    "app",
    ""
  ],
  "dependencies": {
    "gulp": "^3.8.11"
  }
}