gulpfile.js

gulpfile.js

var gulp 				= require('gulp');
var rename 				= require('gulp-rename');
var postcss 			= require('gulp-postcss');
var postcssImport 		= require('postcss-import');
var postcssSimpleVars 	= require('postcss-simple-vars');
var postcssCalc 		= require('postcss-calc');
var colorFunction 		= require('postcss-color-function');
var sprites				= require('postcss-sprites');
var sourcemaps 			= require('gulp-sourcemaps');
var autoprefixer 		= require('autoprefixer');
var plumber 			= require('gulp-plumber');
var filter 				= require('gulp-filter');
var preprocess 			= require('gulp-preprocess');
var shell 				= require('gulp-shell');

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

var spriteOpts    = {
    baseUrl       : './css',
    spritePath    : './css/images',
    spriteName    : 'sprite.png',
    retina        : true,
    filterBy      : function(image) {
    	return /sprite\//gi.test(image.url);
    },

    // Spritesmith options:
    padding       : 4
};

// CSS Post Processing
gulp.task('css', function() {
	// PostCSS processors
	var postcss_processors = [
		postcssImport,										// import
		postcssSimpleVars,									// variables
		postcssCalc(),										// reduces calcs, where possible
		colorFunction(),									// colors
		autoprefixer({ browsers: ['last 3 version'] }),		// autoprefix
		sprites(spriteOpts) 								// sprites
	];

	// PostCSS task error handler
	var errorHandler = plumber(function(errorObj) {
		// Notify the user
		browserSync.notify('Error: ' + beautifyMessage(errorObj.message));

		// Post the message in the console
		console.log(errorObj.message);

		// End this task
		this.emit('end');
	});

	var task = gulp.src('css/_load.css')
		.pipe(errorHandler) 								// Prevent pipe breaking caused by errors from gulp plugins
		.pipe(sourcemaps.init())							// source map init
		.pipe(postcss( postcss_processors )) 				// post css
		.pipe(rename( 'style.css' )) 						// rename
		.pipe(sourcemaps.write( '.' ))						// sourcemap write
		.pipe(gulp.dest( 'css' )) 							// save css file
		.pipe(filter('**/*.css')) 							// filter only css files (remove the map file)
		.pipe(reload({stream: true})); 						// inject the changed css


	return task;
});

// Browser sync server
gulp.task('browser-sync', function() {
	browserSync.init({
		proxy : 'localhost/' + getRelativePath(process.env.INIT_CWD, 'server'),
		port  : 3000
	});
});

// Defaut Task
gulp.task('default', ['browser-sync', 'css', 'html', 'watch']);

// Build Task
gulp.task('build', ['css']);

// Watch
gulp.task('watch', function() {
	// CSS watch - run only on files that match this model: _*.css
	gulp.watch('css/**/_*.css', ['css']);

	// JS watch
	gulp.watch('js/*.js').on('change', reload);

	// HTML watch
	gulp.watch('**/*{.shtml,.html}').on('change', reload);
});

gulp.task('html', function() {
  return gulp.src(['./app/*.html'])
    .pipe(preprocess())
    .pipe(gulp.dest(''));
});



// Helpers

/**
 * Prepare message for browser notify.
 * @param  {string} message raw message
 * @return {string}         parsed message - new lines replaced by html elements.
 */
function beautifyMessage(message) {
	return '<p style="text-align: left">' + message.replace(/\n/g, '<br>') + '</p>';
};


/**
 * Gets project's address from string, relative to server
 * @param  {string} path full project path
 * @return {string}        project's path, relative to 'server' dir
 */
function getRelativePath(path, relativeTo) {
	if (path.match(relativeTo)) {
		return path.split(new RegExp(relativeTo, 'i')).pop().replace(/\//g, '\\');
	} else {
		return '';
	};
};