Skip to content

Instantly share code, notes, and snippets.

@kalharbi
Created August 20, 2015 19:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kalharbi/3ec5c63fc8e5a991c921 to your computer and use it in GitHub Desktop.
Save kalharbi/3ec5c63fc8e5a991c921 to your computer and use it in GitHub Desktop.
gulpfile.js with browserify, babelify, watchify, sourcemaps, gulp-connect, and node-notifier
var gulp = require("gulp");
var gutil = require("gulp-util");
var open = require("gulp-open");
var sourcemaps = require("gulp-sourcemaps");
var notifier = require("node-notifier")
var connect = require("gulp-connect");
var buffer = require("vinyl-buffer");
var source = require("vinyl-source-stream");
var chalk = require("chalk");
var browserify = require("browserify");
var watchify = require("watchify");
var babelify = require("babelify");
var browserifyOpts = {
entries: ['./src/app.jsx'],
extensions: [
".js", ".jsx"
],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
};
var bundler = watchify(browserify(browserifyOpts)
.transform(babelify));
bundler.on("update", bundle);
bundler.on("log", gutil.log);
function handleError(error) {
notifier.notify({
"title": "Build Error",
"message": error.message
});
if (error.filename) {
gutil.log(chalk.red(error.name) + " in " + chalk.white(error.filename.replace(
__dirname + "/src/", "")) + ": Line " + chalk.magenta(error.loc.line) +
" & Column " + chalk.magenta(error.loc.column) + " Message: " +
chalk.yellow(error.message));
} else {
gutil.log(chalk.red(error.name) + ": " + chalk.yellow(error.message));
}
}
function bundle(file) {
if (file) {
gutil.log(new Date()
.toString() + ": Recompiling " + file[0].replace(__dirname + "/src/",""));
}
return bundler.bundle()
.on("error", handleError)
.pipe(source("bundle.js"))
.pipe(buffer())
.pipe(sourcemaps.init({
loadMaps: true
}))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("dist/js"))
.pipe(connect.reload());
}
gulp.task("build", function() {
bundle();
});
gulp.task("connect", function() {
connect.server({
port: 8709,
root: "dist",
livereload: true
});
});
gulp.task("open-browser", function() {
gulp.src("dist/index.html")
.pipe(open({
uri: "http://localhost:8709"
}));
});
gulp.task("copy-index", function() {
gulp.src("./index.html")
.pipe(gulp.dest("./dist"));
});
gulp.task("default", [
"connect", "build", "copy-index", "open-browser"
]);
@kalharbi
Copy link
Author

$ npm install --save-dev gulp gulp-util gulp-open gulp-sourcemaps node-notifier gulp-connect vinyl-buffer vinyl-source-stream chalk browserify watchify babelify

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment