Skip to content

Instantly share code, notes, and snippets.

@ktmud
Last active Apr 28, 2020
Embed
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 = src.coffee.concat(src.js)
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(jsFilter)
.pipe(concat('vendor.js'))
.pipe(gulp.dest(dist.js))
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(concat('vendor.css'))
.pipe(gulp.dest(dist.css))
.pipe(cssFilter.restore())
.pipe(rename(function(path) {
if (~path.dirname.indexOf('fonts')) {
path.dirname = '/fonts'
}
}))
.pipe(gulp.dest(dist.vendor))
})
function buildCSS() {
return gulp.src(src.styles)
.pipe(stylus({use: ['nib']}))
.pipe(concat('app.css'))
.pipe(gulp.dest(dist.css))
}
function buildJS() {
return gulp.src(src.scripts)
.pipe(include())
.pipe(coffee())
.pipe(browserify({
insertGlobals: true,
extensions: ['.coffee'],
debug: true
}))
.pipe(concat('app.js'))
.pipe(gulp.dest(dist.js))
}
gulp.task('css', buildCSS)
gulp.task('js', buildJS)
gulp.task('watch', function() {
gulp.watch(src.bower, ['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 })
gulp.watch(dist.all).on('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.write(urlpath)
})
batch.on('data', function(files) {
server.changed(files.join(','))
})
})
gulp.task('compress-css', ['css'], function() {
return gulp.src(dist.css)
.pipe(cssmin())
.pipe(gulp.dest(dist.css))
})
gulp.task('compress-js', ['js'], function() {
return gulp.src(dist.js)
.pipe(uglify())
.pipe(gulp.dest(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
@ktmud
Copy link
Author

ktmud commented Mar 6, 2014

@Druzzdil
Copy link

Druzzdil commented Mar 11, 2016

nice one

@50l3r
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