Skip to content

Instantly share code, notes, and snippets.

@iovar
Last active August 29, 2015 14:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iovar/0841b187b61eb68d7c7e to your computer and use it in GitHub Desktop.
Save iovar/0841b187b61eb68d7c7e to your computer and use it in GitHub Desktop.
Gulp, less and browserify quick start
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var sass = require('gulp-sass');
// timers and WATCH_INTERVAL are needed for debouncing watch tasks
var timers = {
js: -1,
sass: -1,
tests: -1
};
var WATCH_INTERVAL = 1000;
gulp.task('js', compileJS);
//The debounce task exists to prevent unnecessary runs
//of a task, when multiple files are saved together
//(a common occurence when working with vim)
gulp.task('js:debounce', debounceCompileJS);
gulp.task('js:watch', jsWatch);
gulp.task('sass', compileSass);
//same as above, for 'scrips:debounce'
gulp.task('sass:debounce', debounceCompileSass);
gulp.task('sass:watch', sassWatch);
gulp.task('tests', compileTests);
//same as above, for 'scrips:debounce'
gulp.task('tests:debounce', debounceCompileTests);
gulp.task('tests:watch', testsWatch);
gulp.task('watch', ['js:watch', 'sass:watch', 'tests:watch']);
gulp.task('default', ['js', 'sass', 'tests']);
/**
* compileJS
*
* compiles and bundles all the js under app/
* except the tests
*/
function compileJS() {
gulp.src('./app/app.js')
.pipe(browserify({
insertGlobals:true,
debug: true
}).on('error', function(error) {
console.error(error.message);
}))
.pipe(gulp.dest('./dist/js'));
}
/**
* jsWatch
*
* watches for changes the js under app/, and triggers a
* debounced compilation, to prevent multiple runs.
*/
function jsWatch() {
gulp.watch(['app/*.js', 'app/**/*.js', '!app/tests/*.js'], ['js:debounce']);
}
/**
* debounceCompileJS
*
* typical js debounce. The reason that this is needed, is
* because when multiple files are changed, one run of the
* browserify task will take them all into account, but gulp.watch
* would launch the task multiple times.
*/
function debounceCompileJS() {
clearTimeout(timers.js);
timers.js = setTimeout( function() {
compileJS();
xkbbell();
}, WATCH_INTERVAL);
}
/**
* compileSass
*
* see compileJS
*/
function compileSass() {
gulp.src('./styles/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/css'));
}
/**
* sassWatch
*
* see jsWatch
*/
function sassWatch() {
gulp.watch(['styles/main.scss', 'styles/**/*.scss'], ['sass:debounce']);
}
/**
* debounceCompileSass
*
* see debounceCompileJS.
* Likewise with browserify, compiling scss, will re-import all newly changed
* files, so it only needs a single run, even when multiple files have changed.
*/
function debounceCompileSass() {
clearTimeout(timers.sass);
timers.sass = setTimeout( function() {
compileSass();
xkbbell();
}, WATCH_INTERVAL);
}
/**
* compileTests
*
* compiles and bundles all the tests under app/tests
*/
function compileTests() {
gulp.src('./app/tests/tests.js')
.pipe(browserify({
insertGlobals:true,
debug: true
}).on('error', function(error) {
console.error(error.message);
}))
.pipe(gulp.dest('./dist/js'));
}
/**
* testsWatch
*
* watches for changes the js under app/tests, and triggers a
* debounced compilation, to prevent multiple runs.
*/
function testsWatch() {
gulp.watch(['app/tests/*.js'], ['tests:debounce']);
}
/**
* debounceCompileTests
*
* See debounceCompileJS
*/
function debounceCompileTests() {
clearTimeout(timers.tests);
timers.tests = setTimeout( function() {
compileTests();
xkbbell();
}, WATCH_INTERVAL);
}
/**
* xkbbell
*
* simple terminal bell sound, to notify when a task has run
* without needed to change terminal and see if it is completed
*/
function xkbbell() {
var spawn = require('child_process').spawn,
xkbbell_s = spawn('xkbbell');
//sometimes, when programming on a remote server, xkbbell isn't available
//so I create a script named xkbbell that does 'tput bel'. This creates
//a message in screen and serves as an adequate replacement of the audio
//notification. In order for it to work, though, the output must be shown:
xkbbell_s.stdout.on('data', function (data) {
console.log(''+data);
});
xkbbell_s.stdin.end();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment