Glen Arrowsmith
@garrows
glen.arrowsmith@gmail.com
https://github.com/garrows/GulpDemo/
gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.
By preferring code over configuration, gulp keeps simple things simple and makes complex tasks manageable.
npm install -g gulp
npm install --save-dev gulp
var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
});
gulp
npm install gulp-browserify --save-dev
var gulp = require('gulp'),
browserify = require('gulp-browserify');
gulp.task('scripts', function() {
gulp.src(['./app/js/index.js'])
.pipe(browserify({
debug : true,
fullPaths: true
}))
.pipe(gulp.dest('./build/'))
});
gulp.task('default', [
'scripts'
]);
gulp.task('watch', function() {
gulp.watch(['./app/**/*.js'], ['scripts']);
});
gulp.task('default', [
'scripts',
'watch'
]);
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
<script src="http://localhost:35729/livereload.js"></script>
var livereloadServer;
var livereload = function (_file) {
return function (_path) {
if (livereloadServer) livereloadServer.changed(_file);
}
}
gulp.task('scripts', function() {
gulp.src(['./app/js/index.js'])
...
.on('end', livereload('.js'));
});
npm install gulp-clean --save-dev
var clean = require('gulp-clean');
gulp.task('clean', function() { gulp.src(['./build', './bower_components', './node_modules'], {read: false})
.pipe(clean()); });
gulp clean
npm install bower -g
bower init
bower install bootstrap angular --save
npm install gulp-bower --save-dev
gulp clean
gulp
var bower = require('gulp-bower');
gulp.task('bower', function() { bower() .pipe(gulp.dest('./bower_components/')) });
npm install gulp-concat gulp-rename gulp-uglify gulp-minify-html --save-dev
var concat = require('gulp-concat'), rename = require('gulp-rename'), compress = require('gulp-uglify'), minifyHTML = require('gulp-minify-html');
gulp.task('scriptsLib', function () { return gulp.src([ './bower_components/angular/angular.js' ]) .pipe(concat('libs.js')) .pipe(gulp.dest('./build/')); }); gulp.task('minifyLibsScripts', ['scriptsLib'], function () { return gulp.src('./build/libs.js') .pipe(compress()) .pipe(rename('libs.min.js')) .pipe(gulp.dest('./build/')); });
gulp.task('minifyHTML', function() { var opts = {comments:true,spare:true}; gulp.src('./app/html/*.html') .pipe(minifyHTML(opts)) .pipe(gulp.dest('./build/')) .on('end', livereload('.html')); });
var through = require('through2');
module.exports = function(opt) {
opt.name = opt.name ? opt.name : "0";
opt.timeout = opt.timeout ? opt.timeout : 1000;
console.log("Constructed: tester " + opt.name);
function tester(file, encoding, callback) {
console.log("Started: tester " + opt.name);
setTimeout(function() {
console.log("Done: tester " + opt.name);
callback();
}, opt.timeout);
}
return through.obj(tester);
};
var gulp = require('gulp'), tester = require('./gulp-tester');
gulp.task('one', function() { gulp.src(['./testInput.js']) .pipe(tester({ name : "1.1 - Slowest", timeout: 3000 })) gulp.src(['./testInput.js']) .pipe(tester({ name : "1.2 - Fast", timeout: 10 })) }); gulp.task('two', function() { gulp.src(['./testInput.js']) .pipe(tester({ name : "2.1 - Medium", timeout: 1000 })); });
gulp.task('default', [ 'one', 'two' ]);
// Started: tester 1.1 - Slowest // Started: tester 1.2 - Fast // Started: tester 2.1 - Medium // Done: tester 1.2 - Fast // Done: tester 2.1 - Medium // Done: tester 1.1 - Slowest
var gulp = require('gulp'), tester = require('./gulp-tester');
gulp.task('three', function() { gulp.src(['./testInput.js']) .pipe(tester({ name : "3.1 - Speedy", timeout: 500 })); }); gulp.task('four', ['three'], function() { gulp.src(['./testInput.js']) .pipe(tester({ name : "4.1 - Blitzing", timeout: 1 })); }); gulp.task('default', [ 'four' ]);
/* Started: tester 3.1 - Speedy Started: tester 4.1 - Blitzing Done: tester 4.1 - Blitzing Done: tester 3.1 - Speedy */
glen.arrowsmith@gmail.com