Skip to content

Instantly share code, notes, and snippets.

@ktmud ktmud/gulpfile.js
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

This comment has been minimized.

@Druzzdil

This comment has been minimized.

Copy link

Druzzdil commented Mar 11, 2016

nice one

@50l3r

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.