gulpfile.js

/*
* Base Gulp.js workflow
* for simple front-end projects
* author: José López
* version: 1.0
* to-do: 
	- Compile changed files only when watching. (gulp-changed)
*/

var browserSync  = require('browser-sync');
var watchify     = require('watchify');
var browserify   = require('browserify');
var source       = require('vinyl-source-stream');
var gulp         = require('gulp');
var gutil        = require('gulp-util');
var gulpSequence = require('gulp-sequence');
var processhtml  = require('gulp-jade');
var processphp	 = require('gulp-jade-php');
var sass         = require('gulp-sass');
var watch        = require('gulp-watch');
var minifycss    = require('gulp-minify-css');
var uglify       = require('gulp-uglify');
var plumber		 = require("gulp-plumber");
var notify       = require("gulp-notify");
var streamify    = require('gulp-streamify');
var prod         = gutil.env.prod;

/*-----------------
	PROJECT VARS
------------------*/

var srcPath			= './src',
	buildPath		= './build',
	jadeExt			= 'html',
	jadePath		= srcPath + '/templates',
	sassPath		= srcPath + '/scss',
	jsMainFile		= srcPath + '/js/main',
	cssOutputPath	= buildPath + '/stylesheets',
	jsOutputPath	= buildPath + '/js',
	jsOutputFile	= 'bundle.js',
	phpOutputPath	= buildPath;	


var onError = function(err) {
  console.log(err.message);
  this.emit('end');
};

/*--------
	JS
---------*/

var b = watchify(browserify(jsMainFile, {
  cache: {},
  packageCache: {},
  fullPaths: true
}));

gulp.task('js', bundle);
b.on('update', bundle);
b.on('log', gutil.log);

function bundle() {
  return b.bundle()
    .pipe(plumber({errorHandler: notify.onError("× <%= error.message %>")}))
    .pipe(source(jsOutputFile))
    .pipe(prod ? streamify(uglify()) : gutil.noop())
    .pipe(gulp.dest(jsOutputPath))
    .pipe(browserSync.stream())
    .pipe(notify({ message: '✔ <%= file.relative %>' }));
}

/*----------
	HTML
-----------*/

// html
gulp.task('html', function() {
  return gulp.src(jadePath + '/**/[^_]*.jade')
    .pipe(plumber({errorHandler: notify.onError("× <%= error.message %>")}))
    .pipe(processhtml())
    .pipe(gulp.dest(buildPath))
    .pipe(browserSync.stream())
    .pipe(notify({ message: '✔ <%= file.relative %>' }));
});

/*----------
	PHP
-----------*/

//php
gulp.task('php', function() {
  return gulp.src(jadePath + '/**/[^_]*.jade')
  	.pipe(plumber({errorHandler: notify.onError("× <%= error.message %>")}))
    .pipe(processphp({pretty: '\t'}))
    .pipe(gulp.dest(buildPath))
    .pipe(browserSync.stream())
    .pipe(notify({ message: '✔ <%= file.relative %>' }));
});


/*----------
	SASS
-----------*/

// sass
gulp.task('sass', function() {
  return gulp.src(sassPath + '/**/[^_]*.scss')
  	.pipe(plumber({errorHandler: notify.onError("× <%= error.message %>")}))
    .pipe(sass({
      includePaths: require('node-bourbon').includePaths
    }))
    .pipe(prod ? minifycss() : gutil.noop())
    .pipe(gulp.dest(cssOutputPath))
    .pipe(browserSync.stream())
    .pipe(notify({ message: '✔ <%= file.relative %>' }));
});


if (jadeExt === "php"){
	jadeTask = 'php'; 
} else {
	jadeTask = 'html';
}
/*------------------
	BROWSERSYNC
------------------*/

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: buildPath
    }
  });

  gulp.watch('./src/templates/**/*', [jadeTask]);
  gulp.watch('./src/scss/**/*.scss', ['sass']);
});

// use gulp-sequence to finish building html, sass and js before first page load
gulp.task('default', gulpSequence([jadeTask, 'sass', 'js'], 'serve'));