Gulpfile for html mockup creation

Gulpfile.js

// set source and dest dirs for scss compilation
var scss_src 	= ['scss/*.scss', '!scss/_*.scss'];
var scss_dest	= './public/stylesheets/theme/';

// set ports for browserSync
var bs_port_ui		= 30477;	// main port for viewing site
var bs_port_debug	= 30478;	// port to view browserSync admin panel
var bs_port_weinre	= 30479;	// port for browserSync to open weinre debugger (open source debug tool like chrome devtools/firebug)

// set files to watch for browserSync (reload when watched files are changed)
var bs_watch = [
	'./public/stylesheets/theme/*.css',
	'./app/**/*.haml',
	'./app/**/*.rb',
];

// declare gulp and plugins here
var gulp 			    = require('gulp'),
	browserSync     = require('browser-sync'),
	compress 		    = require('compression'),
	sass 			      = require('gulp-sass'),
	gutil 			    = require('gulp-util'),
	cp 				      = require('child_process'),
	rename 			    = require('gulp-rename'),
	plumber 		    = require('gulp-plumber'),
	cssnano 		    = require('gulp-cssnano'),
	sourcemaps 	    = require('gulp-sourcemaps'),
	merge 			    = require('merge-stream'),
	clone 			    = require('gulp-clone'),
	clip 			      = require('gulp-clip-empty-files'),
	debug 			    = require('gulp-debug'),
	filesize 		    = require('gulp-filesize'),
	changed 		    = require("gulp-changed"),
	notify 			    = require('gulp-notify'),
	data 			      = require('gulp-data'),
	rimraf 			    = require('gulp-rimraf'),
  uglify          = require('gulp-uglify'),
	autoprefixer 	  = require('gulp-autoprefixer'),
  nunjucksRender  = require('gulp-nunjucks-render');

/**
 * Converts nunjucks files to html
 */
gulp.task('nunjucks', function() {
  // Gets .html and .nunjucks files in pages
  return gulp.src('pages/**/*.+(html|nunjucks)')
    .pipe(plumber())
    .pipe(data(function() {
  return requireUncached('./data/app.json')
}))
  // Renders template with nunjucks
  .pipe(nunjucksRender({
      path: ['templates']
    }))
  // output files in app folder
  .pipe(gulp.dest('.'))
});

/**
 * Wait for sass, then launch the server
 */
gulp.task('browser-sync', function() {
	browserSync(
		bs_watch,{
		//	server: {
		//		baseDir: './public',
		//	},
		proxy: {
			target: 	"10.25.4.238:30466",
			middleware: [compress()]
			},
		port: bs_port_ui,
		open: false,
		ui: {
			port: bs_port_debug,
			weinre: {
				port: bs_port_weinre,
			}
		},
		notify: {
			styles: {
				top: 			'auto',
				bottom: 		'0',
				borderRadius: 	'5px 5px 0 0',
				background: 	'rgba(27,32,50,0.7)',
			}
		}
	});
});

/**
 * Compile files from _scss into both _site/css (for live injecting)
 */
gulp.task('sass', function(){
	var source = gulp.src(scss_src)
	.pipe(plumber())
	.pipe(notify({
		title: "Sass",
		message: "Sass init."}))
	.pipe(sourcemaps.init()) // Start Sourcemaps
	.pipe(sass({
		// set output format for compiled css
		outputStyle: 'expanded',
		indentType: 'tab'
		}).on('error', sass.logError))
	.on('error', gutil.log);

	var pipeMaps = source.pipe(clone())
	.pipe(sourcemaps.write('maps'));

	var pipeMinify = source.pipe(clone())
	.pipe(rename({suffix: '.min'}))
	.pipe(cssnano({ // minify with cssnano
		convertValues: {
			length: false
		},
		discardComments: {
			removeAll: true
		},
		discardUnused: {
			// do not minify font-face rule
			// (bug: cssnano completely deletes the rule instead of minifying)
			fontFace: false
		}
	}))
	.pipe(clip());

	return merge(pipeMaps, pipeMinify)
	.pipe(gulp.dest(scss_dest))
	.pipe(debug({title: 'sass-merge:'}))
	.pipe(notify({
		title: "Sass",
		message: "Sass complete. File changed: <%= file.relative %>"}));
});

gulp.task('js', function(){
    return gulp.src('js/general.js')
    .pipe(notify({
        title: "task",
        message: "js init."}))
    .pipe(plumber())
    .pipe(filesize())
    .pipe(uglify())
    .pipe(rename('general.min.js'))
    .pipe(gulp.dest('js'))
    .pipe(filesize())
    .pipe(notify({
        title: "task",
        message: "js complete. File changed: <%= file.relative %>"}))
    .on('error', gutil.log)
    });

/**
 * Default task, running just `gulp` will compile the sass,
 * compile the jekyll site, launch BrowserSync & watch files.
 */
 gulp.task('default', ['browser-sync', 'sass', 'js', 'nunjucks'], function(){
    gulp.watch('scss/**/*.scss', ['sass']);
 	gulp.watch('js/general.js', ['js']);
    gulp.watch(['pages/**/*.*', 'templates/**/*.*', 'data/**/*.json'], ['nunjucks']);
 });