Last active
February 3, 2016 22:17
-
-
Save petemill/760c69197682a71200a5 to your computer and use it in GitHub Desktop.
build only if modified: gulp browserify babelify sourcemap uglify print size (example)
This file contains 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
//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