Weitere ähnliche Inhalte Ähnlich wie Automating your workflow with Gulp.js (20) Kürzlich hochgeladen (20) Automating your workflow with Gulp.js2. 2
Software Engineer @ Realtek
https://github.com/appleboy
http://blog.wu-boy.com
https://www.facebook.com/appleboy46
24. 24
Easy to useEasy to use
By preferring code over configuration, gulp
keeps simple things simple and makes complex
tasks manageable.
25. 25
Easy to useEasy to use
var gulp = require('gulp‘),
coffee = require(‘gulp-coffee’);
26. 26
Easy to useEasy to use
var gulp = require('gulp‘),
coffee = require(‘gulp-coffee’);
gulp.task('coffee', function() {
//ready to go
});
27. 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/’));
});
32. 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. 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. 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
38. 38
Gulp plugin
gulp-coffee / gulp-livescript
gulp-ruby-sass / gulp-compass
gulp-imagemin
gulp-rename
gulp-minify-css
gulp-htmlmin
gulp-mocha
gulp-replace
gulp-livereload
40. 40
Easy to LearnEasy to Learn
With 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. 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
});
48. 48
Write your first Gulp TaskWrite your first Gulp Task
gulpfile.[js|coffee|ls]
Support CoffeeScript or LiveScript from Gulp > 3.7.0
Thanks @tkellen
https://github.com/tkellen/node-liftoff
49. 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'));
});
52. 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'
54. 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. 55
Only pass through changed files
By using gulp-changed only changed
files will be passed through.
60. 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']);
62. 62
var runs = require('run-sequence‘);
gulp.task('release', function(cb) {
return runs(‘clean’, ['build', 'rjs'], cb);
});
63. 63
Reloading Changes In The BrowserReloading Changes In The Browser
gulp-livereload
https://github.com/vohof/gulp-livereload
64. 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());
});
66. 66
var gulp = require('gulp');
webserver = require('gulp-webserver');
gulp.task('webserver', function() {
gulp.src('app')
.pipe(webserver({
livereload: true
}));
});
68. 68
var browserSync = require('browser-sync'),
reload = browserSync.reload;
// Watch Files For Changes & Reload
gulp.task('serve', function () {
browserSync({
server: {
baseDir: 'app'
}
});
gulp.watch(['*.html'], reload);
});
70. 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'));
});
72. 72
var gulp = require('gulp'),
$ = require('gulp-load-plugins')(),
lazypipe = require('lazypipe');
// give lazypipe
var 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'));
});
76. 76
Why not use Makefile?Why not use Makefile?
Using Gulp.js tool only for development
83. 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. 85
Scaffold your first projectScaffold your first project
$ mkdir app
$ cd app && slush html5-template
$ npm start