Skip to content

Instantly share code, notes, and snippets.

@drrobotnik
Created June 30, 2015 19:52
Show Gist options
  • Save drrobotnik/bfe1a54aac2d529d2311 to your computer and use it in GitHub Desktop.
Save drrobotnik/bfe1a54aac2d529d2311 to your computer and use it in GitHub Desktop.
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 '';
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment