Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
An example for a build process using Gulp and Browserify
var pkg = require('./package.json'),
gulp = require('gulp'),
less = require('gulp-less'),
path = require('path'),
concat = require('gulp-concat'),
closure_compiler = require('gulp-closure-compiler'),
jshint = require('gulp-jshint'),
autoprefixer = require('gulp-autoprefixer'),
rev = require('gulp-rev'),
rimraf = require('gulp-rimraf'),
run_sequence = require('run-sequence'),
extend = require('gulp-extend'),
rename = require('gulp-rename'),
source = require('vinyl-source-stream'),
browserify = require('browserify'),
watchify = require('watchify'),
notify = require('gulp-notify'),
gutil = require('gulp-util'),
streamify = require('gulp-streamify'),
react = require('gulp-react'),
reactify = require('reactify'),
babelify = require("babelify"),
karma = require('gulp-karma'),
csslint = require('gulp-csslint');
var JS_SRC_DIR = './js';
var LESS_SRC_DIR = './css';
var BUILD_DIR = './build';
var JS_BUILD_DIR = BUILD_DIR + '/js';
var CSS_BUILD_DIR = BUILD_DIR + '/css';
function _get_revision_filename(prefix) {
return prefix + '-version.json';
}
function _handle_error(task, should_end) {
return function(err) {
gutil.log(gutil.colors.red(err));
notify.onError(task + ' failed, check the logs..')(err);
if (should_end) {
this.emit('end');
}
};
}
gulp.task('clear_build_dir', function() {
return gulp.src([BUILD_DIR, './build-revisions.json'], {read: false})
.pipe(rimraf());
});
///////////////////// Styles /////////////////////
function styles(module_name, entries, is_dev) {
var stream = gulp.src(entries)
.pipe(less().on('error', _handle_error('Less', true)))
.pipe(concat(module_name + '.css'))
.pipe(autoprefixer());
if (!is_dev) {
stream = stream
.pipe(rev())
.pipe(gulp.dest(CSS_BUILD_DIR))
.pipe(rev.manifest())
.pipe(rename(_get_revision_filename(module_name)));
}
return stream.pipe(gulp.dest(CSS_BUILD_DIR));
}
function create_styles_tasks(module_name, entries) {
gulp.task('css_'+module_name, function() {
return styles(module_name, entries, false);
});
gulp.task('css_'+module_name+'_dev', function() {
return styles(module_name, entries, true);
});
}
create_styles_tasks('main', [LESS_SRC_DIR + '/main.less']);
create_styles_tasks('static_page', [LESS_SRC_DIR + '/static_page.less']);
gulp.task('watch_styles', function () {
var watcher = gulp.watch(LESS_SRC_DIR + '/*.*', ['css_main_dev', 'css_static_page_dev']);
watcher.on('change', function(event) {
console.log('Watcher event type: ' + event.type);
});
});
gulp.task('css_lint', function() {
return gulp.src([LESS_SRC_DIR + '/main.less'])
.pipe(less().on('error', _handle_error('Less', true)))
.pipe(csslint('./.csslintrc'))
.pipe(csslint.reporter())
.pipe(concat('main.csslint.css'))
.pipe(gulp.dest('./'));
});
///////////////////// Scripts /////////////////////
function scripts(module_name, entries, is_dev) {
var bundler = browserify({
entries: entries,
paths: ['./node_modules', JS_SRC_DIR],
debug: is_dev,
cache: {}, // required for watchify
packageCache: {}, // required for watchify
fullPaths: is_dev // required to be true only for watchify
});
if (is_dev) {
bundler = watchify(bundler);
}
bundler.transform(babelify);
bundler.transform(reactify);
var rebundle = function() {
console.log("Rebundling " + module_name);
var stream = bundler.bundle();
stream.on('error', _handle_error('Browserify'));
stream = stream.pipe(source(module_name + '.js'));
if (!is_dev) {
stream = stream
.pipe(streamify(closure_compiler({
compilerPath: './utils/compiler.jar',
fileName: module_name + '.js',
compilerFlags: {
jscomp_off: ['uselessCode']
}
})))
.pipe(rev())
.pipe(gulp.dest(JS_BUILD_DIR))
.pipe(rev.manifest())
.pipe(rename(_get_revision_filename(module_name + '.js')));
}
return stream.pipe(gulp.dest(JS_BUILD_DIR));
};
bundler.on('update', rebundle);
return rebundle();
}
function create_script_tasks(module_name, entries) {
gulp.task('js_'+module_name, function() {
return scripts(module_name, entries, false);
});
gulp.task('js_'+module_name+'_dev', function() {
return scripts(module_name, entries, true);
});
}
create_script_tasks('main', [JS_SRC_DIR + '/main.js']);
gulp.task('js_plugins', function() {
return gulp.src(pkg.js.plugins)
.pipe(concat('plugins.js'))
.pipe(rev())
.pipe(gulp.dest(JS_BUILD_DIR))
.pipe(rev.manifest())
.pipe(rename(_get_revision_filename('plugins')))
.pipe(gulp.dest(JS_BUILD_DIR));
});
gulp.task('js_plugins_dev', function() {
return gulp.src(pkg.js.plugins)
.pipe(concat('plugins.js'))
.pipe(gulp.dest(JS_BUILD_DIR));
});
gulp.task('js_vendor_copy', function() {
return gulp.src(JS_SRC_DIR + '/vendor/*.js')
.pipe(gulp.dest(JS_BUILD_DIR + '/vendor/'))
});
gulp.task('js_lint', function() {
return gulp.src([JS_SRC_DIR + '/**/*.js'])
.pipe(react())
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(jshint.reporter('fail'));
});
gulp.task('js_test', function() {
var files = [
JS_SRC_DIR + '/polyfills/es5-shim.min.js',
JS_SRC_DIR + '/vendor/jquery-1.11.0.min.js',
JS_SRC_DIR + '/vendor/react-with-addons-0.13.3.js',
JS_SRC_DIR + '/plugins/underscore-1.8.3.min.js',
JS_SRC_DIR + '/**/__tests__/*.js'
];
return gulp.src(files)
.pipe(karma({
configFile: 'karma.conf.js',
action: 'run'
}));
});
////////////////////////////////////////////////////
gulp.task('combine_version_manifest', function() {
return gulp.src(BUILD_DIR + '/**/*-version.json')
.pipe(rimraf())
.pipe(extend(BUILD_DIR + '/build-revisions.json'))
.pipe(gulp.dest('.'));
});
gulp.task('test', ['js_test'])
gulp.task('default', function() {
run_sequence('clear_build_dir', [
'test',
'js_lint',
'css_main',
'css_static_page',
'js_main',
'js_plugins',
'js_vendor_copy',
], 'combine_version_manifest');
});
gulp.task('develop', [
'js_plugins_dev',
'js_main_dev',
'css_main_dev',
'css_static_page_dev',
'watch_styles',
]);
gulp.task('lint', ['js_lint']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment