Skip to content

Instantly share code, notes, and snippets.

@petemill
Last active February 3, 2016 22:17
Show Gist options
  • Save petemill/760c69197682a71200a5 to your computer and use it in GitHub Desktop.
Save petemill/760c69197682a71200a5 to your computer and use it in GitHub Desktop.
build only if modified: gulp browserify babelify sourcemap uglify print size (example)
//example - change the paths
function CompileJsAtPath(jsFile, debug){
return new Promise(function(resolve, reject){
//best example is from https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-uglify-sourcemap.md
//deps
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
//get current filename
const fileName = jsFile.split('/').pop();
//init browserify for this file
var b = require('browserify')({
entries: `.${jsFile}`,
debug: debug, //sourcemap
paths: ['./node_modules','./_/logic']
});
//exclude core libs we reference globally
b.exclude('knockout');
b.exclude('jquery');
//get reference to pipeline
var op =
//babelify
b.transform(require('babelify'))
//perform browserify
.bundle()
//report browserify error
.on('error', function(err) {
OnError('JS: ' + jsFile, err);
reject(err);
});
//adjust sourcemap to saved location
if (debug)
op.pipe(require('mold-source-map').transformSourcesRelativeTo('_/logic/build/'));
//convert to stream
op.pipe(require('vinyl-source-stream')(fileName))
//buffer stream for sourcemap
.pipe(require('vinyl-buffer')())
//load in the sourcemap from browserify
.pipe(sourcemaps.init({loadMaps: true}))
//uglify when we want to (takes a few extra seconds)
.pipe( uglify({
compress: false,
ie_proof: false
}) )
//write sourcemap to separate location
.pipe(sourcemaps.write('./', {sourceRoot: '/', includeContent: false}))
.pipe(size({ showFiles: true, showTotal: false }))
//write out the js file to build
.pipe(gulp.dest('_/logic/build/'))
.on('finish', function(){
OnComplete('JS: ' + jsFile);
resolve()
})
});
}
function RunWhenNewer(globsToMonitor, outputFileTimeCheck, taskToRun, cb) {
return gulp.src(globsToMonitor, {read: false})
.pipe(newer(outputFileTimeCheck))
.pipe(gutil.buffer(function(err, files) {
//handle error
if (err)
console.error(err);
//if any files changed, run task
console.log(globsToMonitor, outputFileTimeCheck, files);
if (files.length) {
gulp.series(taskToRun, function(done) { cb(); done(); })();
}
else {
cb();
}
}));
}
const pageAScriptGlobs = ['_/logic/**/*.js','!_/logic/build/**', '!_/logic/OtherPage/**'];
//specific task to build scripts for 'Page A' only when required
gulp.task('script-A-ifneeded', function(done){
RunWhenNewer(pageAScriptGlobs, '_/logic/build/page-a.js', 'script-ide', done);
});
//actual build task to build scripts for 'Page A'
gulp.task('script-a', function(){
return CompileJsAtPath('/_/logic/page-a.js', true)
});
//default only build what's changed
gulp.task('default', gulp.parallel('script-a-ifneeded'));
//option to force build everything
gulp.task('force', gulp.parallel('script-a'));
gulp.task('watch', function(){
var debounce = require('debounce');
//we must debounce since the debouncedelay option for gulp watch only debounces exact file duplications, and here we only want to run the operation once for each type of file since the operation builds every file in the matching glob
//Page 'A' js change
gulp.watch(
pageAScriptGlobs,
debounce(gulp.parallel('script-a'), 50));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment