Last active
February 28, 2022 10:39
-
-
Save ktmud/9384509 to your computer and use it in GitHub Desktop.
An example gulpfile.js with bower components and live reload support
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
nice one
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
https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support