var gulp = require('gulp'); var browserSync = require('browser-sync'); var runSequence = require('run-sequence'); var clean = require('gulp-clean'); var babelify = require('babelify'); var browserify = require('browserify'); var source = require('vinyl-source-stream'); var plumber = require('gulp-plumber'); // I have a question: how to use plumber to handle babel error var useref = require('gulp-useref'); var uglify = require('gulp-uglify'); var streamify = require('gulp-streamify'); //handler babel error https://gist.github.com/Fishrock123/8ea81dad3197c2f84366 //This url gives us a solution, but we need change `this.end()` to `this.emit('end')` //you can refer to use-gulp project's https://csspod.com/error-management-in-gulp/ var gutil = require('gulp-util'); var chalk = require('chalk'); function map_error(err) { if (err.fileName) { // regular error gutil.log(chalk.red(err.name) + ': ' + chalk.yellow(err.fileName.replace(__dirname + '/src/js/', '')) + ': ' + 'Line ' + chalk.magenta(err.lineNumber) + ' & ' + 'Column ' + chalk.magenta(err.columnNumber || err.column) + ': ' + chalk.blue(err.description)) } else { // browserify error.. gutil.log(chalk.red(err.name) + ': ' + chalk.yellow(err.message)) } this.emit('end'); } gulp.task("copyIndex", function () { gulp.src("src/index.html") .pipe(useref()) .pipe(gulp.dest("./build")) .pipe(browserSync.reload({stream: true})); }); gulp.task('browserSync', function () { browserSync({ port: 3000, server: { baseDir: './build' }, ghostMode: { clicks: true, location: true, forms: true, scroll: true }, injectChanges: true, logFileChanges: true, logLevel: 'info', logPrefix: 'es6-practice', notify: true, reloadDelay: 1000 }); gulp.watch(['src/index.html', 'src/**/*.js'], { debounceDelay: 400 }, function () { runSequence('babelIt', 'copyIndex', function () { browserSync.reload(); }); }); }); // gulp.task("watchFiles", function(){ // gulp.watch('src/index.html', ['copyIndex']); // gulp.watch('src/**/*.js', ['babelIt','copyIndex']); // }); //upgrade the babelify to new gulp.task("babelIt", function () { browserify({ entries: 'src/index.js', debug: true }) .transform(babelify, {presets: ["es2015", "stage-0", "stage-1"], "plugins": ["transform-decorators-legacy"]}) //babel 6.0 https://github.com/babel/babelify .bundle().on("error", map_error) .pipe(source('index.js')) //.pipe(streamify(uglify())) .pipe(gulp.dest('./build')); }); gulp.task("clean", function () { gulp.src("./build", {read: false}) .pipe(clean()); }); // gulp.task("default", ["copyIndex", "babelIt" ,"browserSync", "watchFiles"]); gulp.task("default", ["copyIndex", "babelIt", "browserSync"]);