-
-
Save danharper/3ca2273125f500429945 to your computer and use it in GitHub Desktop.
var gulp = require('gulp'); | |
var sourcemaps = require('gulp-sourcemaps'); | |
var source = require('vinyl-source-stream'); | |
var buffer = require('vinyl-buffer'); | |
var browserify = require('browserify'); | |
var watchify = require('watchify'); | |
var babel = require('babelify'); | |
function compile(watch) { | |
var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel)); | |
function rebundle() { | |
bundler.bundle() | |
.on('error', function(err) { console.error(err); this.emit('end'); }) | |
.pipe(source('build.js')) | |
.pipe(buffer()) | |
.pipe(sourcemaps.init({ loadMaps: true })) | |
.pipe(sourcemaps.write('./')) | |
.pipe(gulp.dest('./build')); | |
} | |
if (watch) { | |
bundler.on('update', function() { | |
console.log('-> bundling...'); | |
rebundle(); | |
}); | |
} | |
rebundle(); | |
} | |
function watch() { | |
return compile(true); | |
}; | |
gulp.task('build', function() { return compile(); }); | |
gulp.task('watch', function() { return watch(); }); | |
gulp.task('default', ['watch']); |
For gulp-livereload pipe()
it after gupl.dest()
[1]. Install chrome livereload extension as well.
var livereload = require('gulp-livereload');
...
...
.pipe(gulp.dest('./build'))
.pipe(livereload({ start: true }));
Same question as @aaronbeall and @martinsik: how to get the sourcemaps pointing to the ES6 source.
I can't imagine that all users above are content to look at transpiled ES5 code as their sources.
So, how to init the sourcemaps before babel does the 6=>5 transform?
Ah, I see. You do get ES6 sourcemaps, only Safari was not showing them te me. Safari expects source maps inline, or in the same directory as the build result. In my config I had the maps generated in '../maps'. Generating them in './' does the trick, also for Safari.
Awesome work, thank you!!
Do you have a problems when triggered
.transform(babel.configure({
// Use all of the ES2015 spec
presets: ["es2015"]
}))
several times in a row?
question,
Why does anyone need watchify at all if you're already using gulp that comes with its own file watching built in?
I need to test this out but I believe you could rewrite the whole gulpfile to this:
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var babel = require('babelify');
gulp.task('build', function(){
var bundler = browserify('./src/index.js', { debug: true }).transform(babel);
bundler.bundle()
.on('error', function(err) { console.error(err); this.emit('end'); })
.pipe(source('build.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./build'));
});
gulp.task('watch', function () {
gulp.watch('./src/**/*.js', ['build']);
});
gulp.task('default', ['watch']);
@FranciscoG yes you are right! maybe it was needed since OP created this config based JS function instead gulp task. I have similar working configuration like yours at https://github.com/yeomann/GulPress/blob/master/gulpfile.js
Here's my take on it, hacked, slashed and smashed to bundle and watch multiple files working right. :)
https://gist.github.com/nicekiwi/ca575492dfd83504aced26892c559d58
More info on that in the gulp recipes here too:
https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-multiple-destination.md
Here is mine, it does uglify & sourcemaps. It uses watchify for increment builds plus livereload to notify the browser.
https://gist.github.com/luv2code/77ddbc79c02d40194f929841d0696ebc
Thanks a lot. This works great.
However I added a return
statement on line 13
and 29
to show that the build task is completed
Finished 'build' after 749 ms
;
However, still, the batch process is not ending. I still have to press CTRL+C
to exit this process. :\
can we see the package.json of these?
Thank you for this usefull code. I had to use instead
.transform(babelify, { presets: ['es2015'] })
conf for making it working with"babel-preset-es2015": "^6.6.0", "babelify": "^7.3.0",
node modules