Sass CoffeeScript LESS
P o s t C S S H A M L J a d e
U g l i f y E S 6 R e a c t J S
Browserify AngularJS
Ember CSSMin JSLint
ESHint ImageOptim Mocha
Jasmine TypeScript
gulp.task('scripts', function() { !
return gulp.src(‘src/**/*.js') !
.pipe(uglify()) !
.pipe(concat('main.min.js')) !
.pipe(gulp.dest('dist')); !
}); !
!
gulp.task('default', function(done) { !
gulp.watch(‘src/**/*.js', gulp.parallel(‘scripts')); !
done(); !
}); !
undertaker.task('scripts', function() { !
return vinyl.src(‘src/**/*.js') !
.pipe(uglify()) !
.pipe(concat('main.min.js')) !
.pipe(vinyl.dest('dist')); !
}); !
!
undertaker.task('default', function(done) { !
chokidar.watch(‘src/**/*.js', undertaker.parallel(‘scripts')); !
done(); !
}); !
var source = require(‘vinyl-source-stream’); !
!
var b = browserify({ !
entries: ['_js/main.js'] !
}); !
!
var bundle = function() { !
return b.bundle() !
.pipe(source(‘main.js’)) !
.pipe(gulp.dest('js')); !
} !
!
gulp.task(‘bundle’, bundle); !
var app = express(); !
var router = express.Router(); !
!
router.get('/*', function(req, res) { !
var stream = request('http://host.to.forward.to' + req.originalUrl); !
stream.pipe(res); !
stream !
.pipe(source('.' + req.originalUrl)) !
.pipe(gulp.dest('./cachedir')); !
}); !
!
app.use(express.static('_site')); !
app.use(express.static('cachedir')); !
app.use(router); !
var app = express(); !
var router = express.Router(); !
!
router.get('/*', function(req, res) { !
var stream = request('http://host.to.forward.to' + req.originalUrl); !
stream.pipe(res); !
stream !
.pipe(source('.' + req.originalUrl)) !
.pipe(gulp.dest('./cachedir'));!
}); !
!
app.use(express.static('_site')); !
app.use(express.static('cachedir')); !
app.use(router); !
Multiple input formats
return gulp.src(‘src/**/*.coffee) !
.pipe(coffee()) !
.pipe(uglify()) !
.pipe(concat(‘main.js’)) !
.pipe(gulp.dest(‘build’)) !
Multiple input formats
return gulp.src(‘src/**/*.js) !
.pipe(uglify()) !
.pipe(concat(‘main.js’)) !
.pipe(gulp.dest(‘build’)) !
Multiple input formats
return gulp.src(‘src/**/*.js) !
.pipe(uglify()) !
.pipe(concat(‘main.js’)) !
.pipe(gulp.dest(‘build’)) !
the same!
return gulp.src(‘app1/src/**/*.coffee’) !
.pipe(coffee()) !
.pipe(uglify() !
.pipe(concat(‘main.js’)) !
.pipe(gulp.dest('build')); !
var merge = require(‘merge2’); !
!
return merge(gulp.src(‘app1/src/**/*.coffee’) !
.pipe(coffee()), !
gulp.src(‘app1/src/**/*.js’)) !
.pipe(uglify() !
.pipe(concat(‘main.js’)) !
.pipe(gulp.dest('build')); !
var merge = require(‘merge2’); !
!
return gulp.src(‘app1/src/**/*.coffee’) !
.pipe(markdown()), !
.pipe(gulp.src(‘app1/src/**/*.js’), {passthrough: true}) !
.pipe(rename(blogFn)) !
.pipe(wrap(layoutStr)) !
.pipe(swig()) !
.pipe(gulp.dest('build')); !
var elems = [ !
{ dir: ‘app1’, bundleName: ‘app1.min.js’ }, !
{ dir: ‘app2’, bundleName: ‘app2.min.js’ } !
]; !
!
var streams = elems.map(function(el) { !
return gulp.src(el.dir + ‘src/**/*.coffee’) !
.pipe(coffee()), !
.pipe(gulp.src(el.dir + ‘src/**/*.js’), {passthrough: true}) !
.pipe(uglify()) !
.pipe(concat(el.bundleName)) !
}); !
return merge(streams) !
.pipe(gulp.dest('build')); !
Some tasks take long
gulp.src(‘scripts/*.js’) !
.pipe(uglify()) !
.pipe(gulp.dest()) !
.pipe(concat()) !
Too much is going on!
Each change: Uglify all
the files?
filter files
that have changed
do performance
heavy operations
remember the
old files
and continue
with the other ops
gulp.task('scripts', function () { !
return gulp.src('app/scripts/**/*.js') !
.pipe(cached('ugly')) !
.pipe(uglify()) !
.pipe(remember('ugly')) !
.pipe(concat('main.min.js')) !
.pipe(gulp.dest('dist/scripts')); !
}); !
gulp.task('scripts', function () { !
return gulp.src('app/scripts/**/*.js') !
.pipe(cached('ugly')) !
.pipe(uglify()) !
.pipe(remember('ugly')) !
.pipe(concat('main.min.js')) !
.pipe(gulp.dest('dist/scripts')); !
}); !
we use the cache to
check if files have
changed
gulp.task('scripts', function () { !
return gulp.src('app/scripts/**/*.js') !
.pipe(cached('ugly')) !
.pipe(uglify()) !
.pipe(remember('ugly')) !
.pipe(concat('main.min.js')) !
.pipe(gulp.dest('dist/scripts')); !
}); !
once we are done,
we remember all
the other files
we stored in
the cache
gulp.task('lint', function () { !
return gulp.src(‘src/**/*.js’) !
.pipe(jshint()) !
.pipe(jshint.reporter(‘default’)) !
.pipe(jshint.reporter(‘fail’)); !
}); !
gulp.task('lint', function () { !
return gulp.src(‘src/**/*.js’, { since: gulp.lastRun(‘lint’) }) !
.pipe(jshint()) !
.pipe(jshint.reporter(‘default’)) !
.pipe(jshint.reporter(‘fail’)); !
}); !
gulp.task('images', function () { !
return gulp.src(‘src/images/**/*.*’) !
!
.pipe(imagemin()) !
.pipe(gulp.dest(‘dist’)); !
}); !
gulp.task('images', function () { !
return gulp.src(‘src/images/**/*.*’) !
.pipe(newer(‘dist’)) !
.pipe(imagemin()) !
.pipe(gulp.dest(‘dist’)); !
}); !
Workshop files
https://github.com/frontend-tooling
https://github.com/frontend-tooling/sample-project-gulp
https://github.com/frontend-tooling/static-site-generator
http://fettblog.eu
http://speakerdeck.com/ddprrt