Gulp File for Default Projects. Uses BrowserSync for live-reload, variables so you can define your own base and dist folders easily, and includes tasks such as the Spritesheet task which will make one spritesheet *and* makes SCSS mixins for you (including retina sprites). If you're building an Angular app, don't forget to add gulp-ngAnnotate (se…

gulpfile.js

var _PREFIX           = '';
var _SHORTNAME        = '<your-project-shortname>';
var _BASE             = '';
var _SOURCE           = _BASE+'build/';
var _TARGET           = _BASE+'app/includes/';
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');

// 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 Task
// Runs a server locally with browsersync / livereload functionality
gulp.task('default', function (){

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

  gulp.watch(['app/*.html'], reload);
  gulp.watch(_SOURCE+'/js/**/*.js', ['scripts']);
  gulp.watch(_SOURCE+'/styles/**/*.scss', ['styles']);
  gulp.watch(_SOURCE+'/images/**/*', ['images']);
  gulp.watch(_SOURCE+'/fonts/**/*', ['fonts']);

});

// Main modes
gulp.task('check', ['lint']);
gulp.task('spritesheets', ['createSpritesheets']);

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

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

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

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

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

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


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

  gulp.src(_SOURCE+'styles/main.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 Task
// Compresses all font files and copies them to your dist folder.
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());
});


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

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

// Compress everything with Gzip if your server setup accepts it.
gulp.task('compress',function(){
  gulp.src(_TARGET+'**/*')
    .pipe(gzip())
    .pipe(gulp.dest(_TARGET));
});


// Sprite Task -- This actually makes a spritesheet containing all images in ONE image 
// BUT THATS NOT ALL MIKE
// It also makes a .scss file with sprite MIXINS, that you can include everywhere
// IS THAT EVERYTHING MIKE? --IT SURE ISN'T STEVE!
// It also makes a retina version of everything because it loves you. 
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-project-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-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",
    "label-a"
  ],
  "dependencies": {
    "gulp": "^3.8.11"
  }
}