Skip to content

Instantly share code, notes, and snippets.

@crisward
Last active August 29, 2015 13:56
Show Gist options
  • Save crisward/9342850 to your computer and use it in GitHub Desktop.
Save crisward/9342850 to your computer and use it in GitHub Desktop.
Gulp Stylus Browserify - added error handling for production. Need to work out errors for watchify task.
var source = require('vinyl-source-stream'),
watchify = require('watchify'),
gulp = require('gulp'),
fs = require('fs'),
gulp = require('gulp'),
browserify = require('gulp-browserify'),
uglify = require('gulp-uglify'),
ngmin = require('gulp-ngmin'),
stylus = require('gulp-stylus'),
livereload = require('gulp-livereload'),
str2jsify = require('string-to-jsify'),
minifyCSS = require('gulp-minify-css'),
plumber = require('gulp-plumber'),
gutil = require('gulp-util');
// = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// Watching Functions - for updating css and JS
function watch_css(watch,src){
gulp.watch(watch,function(){
gulp.src(src)
.pipe(stylus({use: ['nib'],set:['compress','include css']}))
.pipe(gulp.dest('build/'))
.pipe(livereload());
});
}
function watch_watchify(src,outfile) {
var bundler = watchify(src);
bundler.transform(str2jsify.configure({extensions: '.html'}));
bundler.transform('jadeify');
bundler.transform('coffeeify');
bundler.transform('deamdify');
bundler.transform('debowerify');
bundler.on('update', rebundle);
function rebundle () {
return bundler.bundle()
.pipe(source(outfile))
.pipe(gulp.dest('./build'))
.pipe(livereload());
}
return rebundle();
}
//= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// production scripts below
function build_css(src){
gulp.src(src)
.pipe(stylus({use: ['nib'],set:['compress','include css']}))
.pipe(minifyCSS({keepSpecialComments:0}))
.pipe(gulp.dest('./build/'));
};
//bundle all dev files into main.js not including common files
function build_browserify(src){
gulp.src(src)
.pipe(plumber())
.pipe(browserify({
debug : false,
detectGlobals: false,
transform: [str2jsify.configure({extensions: '.html'}),'jadeify','coffeeify','deamdify','debowerify'],
}))
.pipe(ngmin())
.pipe(uglify({mangle:false}))//experiment changing this - as ngmin updates it may work more successfully
.pipe(gulp.dest('./build/'))
.on('error', gutil.log);
}
//= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
//default task watches
gulp.task('default', function() {
watch_watchify('./dev/main.js','main.js');//input path,output filename
watch_css(['dev/**/*.styl','dev/**/*.css'],'dev/main.styl');//watch paths, input path
})
//production task builds, minifies etc...
gulp.task('production',function(){
build_browserify('./dev/main.js');
build_css('dev/main.styl');
build_browserify('./toolbar/toolbar.js');
build_css('toolbar/toolbar.styl');
});
@crisward
Copy link
Author

Yes, that's right. Sorry for the very late response, didn't get notified of this message. I imagined you've worked that out by now. The only problem I've had with this task so far is error handling. Just had a quick mess with the gulp-plumber plugin, which gives meaningful errors on the production task, but still working out how to use it with watchify.

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