Automating your workflow with Gulp.js
-
Upload
bo-yi-wu -
Category
Technology
-
view
1.949 -
download
3
description
Transcript of Automating your workflow with Gulp.js
2
Software Engineer @ Realtekhttps://github.com/appleboy
http://blog.wu-boy.comhttps://www.facebook.com/appleboy46
7
SetupDownloadServer SetupPHPRuby
Develop Watch Live Reload Lint Coffee Sass/Less
Build Testing Compile Concat Rename Minify Image-min Deployment
Work Flow
9
TasksTasks
Html / JadeJavaScript / CoffeeScript / LiveScript
– JSHintCSS / Sass / Compass / StylusTesting
– MochaDeploy
– Minify– Rename– Replace
11
2013 @ JSDC Conference你不可不知的前端開發工具http://bit.ly/jsdc-grunt
21
Typical grunt taskTypical grunt task
FileSystem
ReadFiles
Modify WriteFiles
Temp
ReadFiles
Modify WriteFiles
Temp
FileSystem
24
Easy to useEasy to useBy preferring code over configuration, gulp
keeps simple things simple and makes complex tasks manageable.
26
Easy to useEasy to use
var gulp = require('gulp‘), coffee = require(‘gulp-coffee’);gulp.task('coffee', function() { //ready to go});
27
Easy to useEasy to use
var gulp = require('gulp‘), coffee = require(‘gulp-coffee’);gulp.task('coffee', function() { gulp.src(‘assets/coffee/**/*.coffee’) .pipe(coffee()) .pipe(gulp.dest(‘assets/js/’));});
30
EfficientEfficientBy harnessing the power of node's streams you get fast builds that don't write intermediary files to
disk.
32
Efficient
var gulp = require('gulp‘), coffee = require(‘gulp-coffee’);gulp.task('coffee', function() { gulp.src(‘assets/coffee/main.coffee’) .pipe(coffee()) .pipe(uglify()) .pipe(rename(‘assets/js/main.min.js’)) .pipe(gulp.dest(‘dist/assets/js/’));});
Read file
33
Efficient
var gulp = require('gulp‘), coffee = require(‘gulp-coffee’);gulp.task('coffee', function() { gulp.src(‘assets/coffee/main.coffee’) .pipe(coffee()) .pipe(uglify()) .pipe(rename(‘assets/js/main.min.js’)) .pipe(gulp.dest(‘dist/assets/js/’));});
Process in Memory
Process in Memory
Process in Memory
34
Efficient
var gulp = require('gulp‘), coffee = require(‘gulp-coffee’);gulp.task('coffee', function() { gulp.src(‘assets/coffee/main.coffee’) .pipe(coffee()) .pipe(uglify()) .pipe(rename(‘assets/js/main.min.js’)) .pipe(gulp.dest(‘dist/assets/js/’));});
Write file
35
stream-handbookstream-handbook By By@@ substacksubstack
https://github.com/substack/stream-handbook
36
High QualityHigh Qualitygulp's strict plugin guidelines assure plugins stay simple and work the way
you expect.
37
Gulp pluginsGulp pluginsmore than 600+ pluginsmore than 600+ plugins
http://gulpjs.com/plugins/http://gulpjs.com/plugins/
38
Gulp plugin
gulp-coffee / gulp-livescriptgulp-ruby-sass / gulp-compassgulp-imagemingulp-renamegulp-minify-cssgulp-htmlmingulp-mochagulp-replacegulp-livereload
39
gulp black list
gulp-browserify gulp-requirejs gulp-shell gulp-connect gulp-twitter gulp-if-else
https://github.com/gulpjs/plugins/blob/master/src/blackList.json
40
Easy to LearnEasy to LearnWith a minimal API surface, you can pick up gulp in no time. Your
build works just like you envision it: a series of streaming pipes.
44
gulp.task(name[, deps], fn)gulp.task(name[, deps], fn)gulp.task(‘hello', function() { console.log('Hello world!'); });gulp.task('css', ['greet'], function () { // Deal with CSS here }); gulp.task('build', ['css', 'js', 'imgs']); gulp.task('default', function () { // Your default task });
46
gulp.src(globs[, options])
gulp.src('./*.jade') gulp.src('*.+(js|css)')gulp.src('*.{jpg,jpeg,png,gif}')gulp.src(['js/**/*.js', '!js/**/*.min.js'])
47
gulp.dest(path)
gulp.src('./client/templates/*.jade') .pipe(jade()) .pipe(gulp.dest('./app')) .pipe(minify()) .pipe(gulp.dest('./dist'));
48
Write your first Gulp TaskWrite your first Gulp Taskgulpfile.[js|coffee|ls]
Support CoffeeScript or LiveScript from Gulp > 3.7.0
Thanks @tkellen
https://github.com/tkellen/node-liftoff
49
var gulp = require('gulp'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), concat = require('gulp-concat');
gulp.task('js', function () { return gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build'));});
50
package.json
{ "devDependencies": { "gulp-concat": "^2.3.3", "gulp-uglify": "^0.3.1", "gulp-jshint": "^1.7.1", "gulp": "^3.8.6" }}
52
gutil = require 'gulp-util'coffee = require 'gulp-coffee'coffeelint = require 'gulp-coffeelint'compass = require 'gulp-compass'w3cjs = require 'gulp-w3cjs'imagemin = require 'gulp-imagemin'cache = require 'gulp-cache'changed = require 'gulp-changed'connect = require 'gulp-connect'size = require 'gulp-size'gulpif = require 'gulp-if'rename = require 'gulp-rename'uglify = require 'gulp-uglify'minifyCSS = require 'gulp-minify-css'htmlmin = require 'gulp-htmlmin'replace = require 'gulp-replace'mocha = require 'gulp-mocha'
53
You needgulp-load-plugins
Automatically load in gulp pluginshttps://github.com/jackfranklin/gulp-load-plugins
54
var gulp = require('gulp'), $ = require('gulp-load-plugins')();
gulp.task('js', function () { return gulp.src('js/*.js') .pipe($.jshint()) .pipe($.jshint.reporter('default')) .pipe($.uglify()) .pipe($.concat('app.js')) .pipe(gulp.dest('build'));});
55
Only pass through changed files
By using gulp-changed only changed files will be passed through.
56
gulp.task('coffee', function() { gulp.src('app/coffee/**/*.coffee') .pipe(coffeelint()) .pipe(coffeelint.reporter()) .pipe(coffee()) .pipe(gulp.dest(paths.script));});
58
gulp.task('coffee', function() { gulp.src('app/coffee/**/*.coffee') .pipe(changed(paths.script, {extension: '.js'})) .pipe(coffeelint()) .pipe(coffeelint.reporter()) .pipe(coffee()) .pipe(gulp.dest(paths.script));});
60
var gulp = require('gulp');
gulp.task('one', function(cb) { // do stuff -- async or otherwise cb(err);});gulp.task('two', ['one'], function() { // task 'one' is done now});gulp.task('default', ['one', 'two']);
61
Using run-sequenceUsing run-sequenceRun a series of dependent gulp tasks in order
https://github.com/OverZealous/run-sequence
62
var runs = require('run-sequence‘);gulp.task('release', function(cb) { return runs(‘clean’, ['build', 'rjs'], cb);});
63
Reloading Changes In The BrowserReloading Changes In The Browser
gulp-livereloadhttps://github.com/vohof/gulp-livereload
64
var gulp = require('gulp'), sass = require('gulp-sass'), livereload = require('gulp-livereload'), watch = require('gulp-watch');
gulp.task(‘sass', function() { gulp.src(‘sass/*.scss') .pipe(watch()) .pipe(sass()) .pipe(gulp.dest('css')) .pipe(livereload());});
65
gulp-webservergulp-webserverStreaming gulp plugin to run a local webserver with
LiveReload
https://github.com/schickling/gulp-webserver
66
var gulp = require('gulp'); webserver = require('gulp-webserver');
gulp.task('webserver', function() { gulp.src('app') .pipe(webserver({ livereload: true }));});
67
BrowserSyncBrowserSyncTime-saving synchronised browser testing.
http://www.browsersync.io/
68
var browserSync = require('browser-sync'), reload = browserSync.reload;
// Watch Files For Changes & Reloadgulp.task('serve', function () { browserSync({ server: { baseDir: 'app' } });
gulp.watch(['*.html'], reload);});
70
var gulp = require('gulp'), $ = require('gulp-load-plugins')();
gulp.task('bootstrap', function() { return gulp.src('bootstrap/js/*.js') .pipe($.jshint()) .pipe($.jshint.reporter(stylish)) .pipe($.uglify()) .pipe(gulp.dest('public/bootstrap'));});
gulp.task('coffee', function() { return gulp.src('lib/js/*.coffee') .pipe($.coffee()) .pipe($.jshint()) .pipe($.jshint.reporter(stylish)) .pipe($.uglify()) .pipe(gulp.dest('public/js'));});
71
uses lazypipe to get the job done
https://github.com/OverZealous/lazypipe
72
var gulp = require('gulp'), $ = require('gulp-load-plugins')(), lazypipe = require('lazypipe');
// give lazypipevar jsTransform = lazypipe() .pipe($.jshint) .pipe($.jshint.reporter, stylish) .pipe($.uglify);gulp.task('bootstrap', function() { return gulp.src('bootstrap/js/*.js') .pipe(jsTransform()) .pipe(gulp.dest('public/bootstrap'));});gulp.task('coffee', function() { return gulp.src('lib/js/*.coffee') .pipe($.coffee()) .pipe(jsTransform()) .pipe(gulp.dest('public/js'));});
74
Deploy ProcessDeploy ProcessCoffeeScript / LiveScriptCompass / SassJadeImage-minRequireJSRenameReplaceCopy
78
A gulp.js generator for modern webapps https://github.com/yeoman/generator-gulp-webapp
79
Web Starter Kithttps://developers.google.com/web/starter-kit/
81
SlushThe streaming scaffolding systemGulp as a replacement for Yeoman
http://slushjs.github.io
82
slush-html5-template html5 template engine generator
https://github.com/appleboy/slush-html5-template
83
FeaturesFeatures● The latest html5boilerplate.com source code. ● Includes Normalize.scss v3.0.x and v1.1.x. ● The latest jQuery and Modernizr via Bower
package manager. ● Support CoffeeScript, RequireJS, Sass or
Compass, html minification (via htmlcompressor).
● Support JavaScript test framework Mocha. ● Support streaming build system Gulp. ● Support Minify PNG and JPEG images with
image-min. ● Support browser-sync Keep multiple browsers
& devices in sync when building websites.
85
Scaffold your first projectScaffold your first project
$ mkdir app$ cd app && slush html5-template$ npm start
88
OrchestratorOrchestrator
A module for sequencing and executing tasks and dependencies in maximum concurrency
https://github.com/orchestrator/orchestrator
89
vinyl-fsvinyl-fsVinyl adapter for the file system
https://github.com/wearefractal/vinyl-fs
90
gulp-cheatsheet gulp-cheatsheet A cheatsheet for gulp.js
https://github.com/osscafe/gulp-cheatsheet