Last active
August 29, 2015 14:11
-
-
Save iovar/0841b187b61eb68d7c7e to your computer and use it in GitHub Desktop.
Gulp, less and browserify quick start
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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