Skip to content

Instantly share code, notes, and snippets.

@ktmud ktmud/gulpfile.js
Last active Apr 28, 2020

What would you like to do?
An example gulpfile.js with bower components and live reload support
var BatchStream = require('batch-stream2')
var gulp = require('gulp')
var coffee = require('gulp-coffee')
var uglify = require('gulp-uglify')
var cssmin = require('gulp-minify-css')
var bower = require('gulp-bower-files')
var stylus = require('gulp-stylus')
var livereload = require('gulp-livereload')
var include = require('gulp-include')
var concat = require('gulp-concat')
var browserify = require('gulp-browserify')
var gulpFilter = require('gulp-filter')
var watch = require('gulp-watch')
var rename = require('gulp-rename')
var src = {
styl: ['assets/**/*.styl'],
css: ['assets/**/*.css'],
coffee: ['assets/**/*.coffee'],
js: ['assets/**/*.js'],
bower: ['bower.json', '.bowerrc']
src.styles = src.styl.concat(src.css)
src.scripts =
var publishdir = 'public'
var dist = {
all: [publishdir + '/**/*'],
css: publishdir + '/static/',
js: publishdir + '/static/',
vendor: publishdir + '/static/'
// concat *.js to `vendor.js`
// and *.css to `vendor.css`
// rename fonts to `fonts/*.*`
gulp.task('bower', function() {
var jsFilter = gulpFilter('**/*.js')
var cssFilter = gulpFilter('**/*.css')
return bower()
.pipe(rename(function(path) {
if (~path.dirname.indexOf('fonts')) {
path.dirname = '/fonts'
function buildCSS() {
return gulp.src(src.styles)
.pipe(stylus({use: ['nib']}))
function buildJS() {
return gulp.src(src.scripts)
insertGlobals: true,
extensions: ['.coffee'],
debug: true
gulp.task('css', buildCSS)
gulp.task('js', buildJS)
gulp.task('watch', function() {, ['bower'])
watch({ glob: src.styles, name: 'app.css' }, buildCSS)
watch({ glob: src.scripts, name: 'app.js' }, buildJS)
// live reload can emit changes only when at lease one build is done
gulp.task('livereload', ['bower', 'css', 'js', 'watch'], function() {
var server = livereload()
var batch = new BatchStream({ timeout: 100 })'change', function change(file) {
// clear directories
var urlpath = file.path.replace(__dirname + '/' + publishdir, '')
// also clear the tailing index.html
urlpath = urlpath.replace('/index.html', '/')
batch.on('data', function(files) {
gulp.task('compress-css', ['css'], function() {
return gulp.src(dist.css)
gulp.task('compress-js', ['js'], function() {
return gulp.src(dist.js)
gulp.task('compress', ['compress-css', 'compress-js'])
gulp.task('default', ['bower', 'css', 'js', 'livereload']) // development
gulp.task('build', ['bower', 'compress']) // build for production

This comment has been minimized.


This comment has been minimized.

Copy link

Druzzdil commented Mar 11, 2016

nice one


This comment has been minimized.

Copy link

50l3r commented Apr 20, 2017

Much thanks for this snippet.

I have a problem when i try to load vendor.js:

require is not defined

This is the part of the file:

/*global require,module*/
"use strict";
var CodeMirror = require("codemirror");

i need to use a babel gulp pipe? @ktmud can you help me?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.