GulpJS :: GulpFile

gulpfile.js

//==============================================================================
// H&L GulpJS + Node - Front End Asset Management
//==============================================================================

var gulp = require("gulp"),
  sass = require('gulp-sass'),
  autoprefixer = require('gulp-autoprefixer'),
  jshint = require('gulp-jshint'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify'),
  watch = require('gulp-watch'),
  mincss = require('gulp-minify-css'),
  rename = require('gulp-rename'),
  inject = require('gulp-inject'),
  clean = require('gulp-clean'),
  sequence = require('run-sequence');

//==============================================================================
// Node Package List - Install to Project Dir
//==============================================================================

/*
npm install gulp
npm install gulp-sass gulp-autoprefixer gulp-jshint gulp-concat gulp-uglify gulp-watch gulp-minify-css gulp-rename gulp-inject gulp-clean run-sequence --save-dev
bower install zurb/bower-foundation
*/

//==============================================================================
// Asset Lists for Injection
//==============================================================================

var cssOrder = [
  "public/bower/foundation/css/normalize.css",
  "public/bower/foundation/css/foundation.css",
  "public/assets/css/fonts.css",
  "public/assets/font-awesome/css/font-awesome.css",
  "public/assets/fancybox/jquery.fancybox.css",
	"public/assets/css/maytag.css"
];
  	
var jsOrder = [
  "public/bower/fastclick/lib/fastclick.js",
  "public/bower/jquery.stellar/jquery.stellar.min.js",
  "public/bower/jquery-waypoints/waypoints.min.js",
  "public/bower/jquery.scrollTo/jquery.scrollTo.min.js",
  "public/bower/jquery.easing/js/jquery.easing.min.js",
  "public/bower/greensock/src/minified/TweenMax.min.js",
  "public/assets/fancybox/jquery.fancybox.pack.js",
  "public/assets/fancybox/helpers/jquery.fancybox-media.js",
  "public/bower/foundation/js/foundation.min.js",
  "public/assets/galleria/galleria-1.3.5.min.js",
  "public/assets/js/maytag.js"
];
	
//==============================================================================
// assets/dist Methods
//==============================================================================

//Lint all JS
gulp.task('lint', function(){
	return gulp.src('public/assets/js/*.js')
    	.pipe(jshint())
    	.pipe(jshint.reporter('default'));
});

//Clean out distribution assets
gulp.task('clean-static', function(){
	return gulp.src(["public/assets/dist/js/*.js","public/assets/dist/css/*.css"],{read:false}).pipe(clean());
});

//Clean out distribution views
gulp.task('clean-views', function(){
	return gulp.src(["app/views/static/*"],{read:false}).pipe(clean());
});

//Clean out distribution assets
gulp.task('clean-all', function(){
	return gulp.src(["public/assets/dist/js/*.js","public/assets/dist/css/*.css","app/views/static/*"],{read:false}).pipe(clean());
});

//Compile SASS
gulp.task('sass', function(){
	return gulp.src('public/assets/scss/*.scss')
		.pipe(sass({errLogToConsole:true}))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('public/assets/css/'));
});

//Compile and minify SASS
gulp.task('sass-min', function(){
	return gulp.src('public/assets/scss/*.scss')
		.pipe(sass({errLogToConsole:true}))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('public/assets/css/'))
    .pipe(mincss())
    .pipe(gulp.dest('public/assets/css/'));
});

//Compile SASS
gulp.task('prefix', function(){
  return gulp.src('public/assets/css/*.css')
    .pipe(autoprefixer("last 2 versions"))
    .pipe(gulp.dest('public/assets/css/'));
});

//Concatenate and Minify JS With Timestamp
gulp.task('crush-js', function(){
	gulp.src('public/assets/dist/js/*.js',{read:false}).pipe(clean());
	return gulp.src(jsOrder)
  	.pipe(concat('all.min.js'))
    .pipe(rename({suffix:"."+new Date().getTime(),extname:".js"}))
    .pipe(gulp.dest('public/assets/dist/js/'))
    //.pipe(uglify({mangle:false,outSourceMap:true}))
    .pipe(gulp.dest('public/assets/dist/js/'));
});

//Concatenate and Minify CSS With Timestamp
gulp.task('crush-css', function(){
  gulp.src('public/assets/dist/css/*',{read:false}).pipe(clean());
  return gulp.src(cssOrder)
	   .pipe(concat('all.min.css'))
	   .pipe(rename({suffix:"."+new Date().getTime(),extname:".css"}))
	   .pipe(gulp.dest('public/assets/dist/css/'))
     .pipe(mincss())
     .pipe(gulp.dest('public/assets/dist/css/'));
});

//Inject Compressed Header Files
gulp.task('inject-header', function(){  		
  	return gulp.src('public/assets/views/header.php')
      .pipe(inject(
        gulp.src(["public/assets/dist/css/*.css",],
        {read:false}),{addRootSlash:true})
      )
      .pipe(gulp.dest('app/views/static/'));
});

//Inject Compressed Header Files
gulp.task('inject-footer', function(){      
    return gulp.src('public/assets/views/footer.php')
      .pipe(inject(
        gulp.src(["public/assets/dist/js/*.js"],
        {read:false}),{addRootSlash:true})
      )
      .pipe(gulp.dest('app/views/static/'));
});

//Watch files for changes
gulp.task('watch', function(){
    gulp.watch('public/assets/scss/*.scss',['build']);
    gulp.watch('public/assets/js/*.js',['build']);
});

//==============================================================================
// Default Task - Compile SASS/SCSS
//==============================================================================

// Default Tasks
gulp.task('default',['sass']);
gulp.task('clean',['clean-all']);

//==============================================================================
// Build Project
//==============================================================================

//Full assets/dist with dependency
gulp.task('build',function(callback){
  sequence('clean-static','sass-min','crush-css','crush-js','clean-views','inject-header','inject-footer',callback);
});