Glup用自動化構(gòu)建工具增強(qiáng)你的工作流程钥屈！
同類型的軟件還有Grunt签财。關(guān)于兩者的區(qū)別可以參考這篇文章Grunt VS Gulp
安裝：
$ npm install gulp -g
$ npm install gulp --save-dev
安裝gulp插件
安裝一些插件，完成下列任務(wù)：
- 編譯Sass (gulp-ruby-sass)
- Autoprefixer (gulp-autoprefixer)
- 縮小化(minify)CSS (gulp-minify-css)
- JSHint (gulp-jshint)
- 拼接 (gulp-concat)
- 丑化(Uglify) (gulp-uglify)
- 圖片壓縮 (gulp-imagemin)
- 即時(shí)重整(LiveReload) (gulp-livereload)
- 清理檔案 (gulp-clean)
- 圖片快取磨总，只有更改過得圖片會進(jìn)行壓縮 (gulp-cache)
- 更動通知 (gulp-notify)
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev
載入插件
接下來皮壁，我們需要建立一個(gè)gulpfile.js檔案，并且載入這些插件：
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
建立任務(wù)
下面是任務(wù)的最基本形態(tài)铣揉，在gulpfile.js文件中
var gulp = require('gulp');
gulp.task('default', function() {
// 將你的默認(rèn)的任務(wù)代碼放在這
});
可以通過如下命令來執(zhí)行任務(wù)：
$ gulp default
我們設(shè)置編譯Sass饶深。我們將編譯Sass、接著通過Autoprefixer逛拱，最后儲存結(jié)果到我們的目的地粥喜。接著產(chǎn)生一個(gè)縮小化的.min版本、自動重新整理頁面及通知任務(wù)已經(jīng)完成：
gulp.task('styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/assets/css'))
.pipe(notify({ message: 'Styles task complete' }));
});
gulp基本API
- gulp.src(globs[, options])
- gulp.dest(path[, options])
- gulp.task(name[, deps], fn)
- gulp.watch(glob [, opts], tasks)
gulp.src(globs[, options])
輸出（Emits）符合所提供的匹配模式（glob）或者匹配模式的數(shù)組（array of globs）的文件橘券。 將返回一個(gè) Vinyl files 的 stream 它可以被 piped 到別的插件中额湘。
gulp.dest(path[, options])
能被 pipe 進(jìn)來卿吐，并且將會寫文件。并且重新輸出（emits）所有數(shù)據(jù)锋华，因此你可以將它 pipe 到多個(gè)文件夾嗡官。如果某文件夾不存在，將會自動創(chuàng)建它毯焕。
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())
.pipe(gulp.dest('./build/minified_templates'));
文件被寫入的路徑是以所給的相對路徑根據(jù)所給的目標(biāo)目錄計(jì)算而來衍腥。類似的，相對路徑也可以根據(jù)所給的 base 來計(jì)算纳猫。 請查看上述的 gulp.src 來了解更多信息婆咸。
gulp.task(name[, deps], fn)
gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
監(jiān)視文件，并且可以在文件發(fā)生改動時(shí)候做一些事情芜辕。它總會返回一個(gè) EventEmitter 來發(fā)射（emit） change 事件尚骄。
例如：需要在文件變動后執(zhí)行的一個(gè)或者多個(gè)通過 gulp.task() 創(chuàng)建的 task 的名字
var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
gulp.watch('js/**/*.js', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
使用例子：
- 編譯Sass，Autoprefix及縮小化
gulp.task('styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/assets/css'))
.pipe(notify({ message: 'Styles task complete' }));
});
- JSHint侵续，拼接及縮小化JavaScript
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('dist/assets/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});
- 圖片壓縮
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('dist/assets/img'))
.pipe(notify({ message: 'Images task complete' }));
});
- 收拾乾淨(jìng)!
在我們進(jìn)行佈署之前倔丈，清除目的地目錄并重建檔案是一個(gè)好主意–以防萬一任何已經(jīng)被刪除的來源檔案遺留在目的地目錄之中:
gulp.task('clean', function() {
return gulp.src(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], {read: false})
.pipe(clean());
});
我們可以傳入一個(gè)目錄(或檔案)陣列到gulp.src。因?yàn)槲覀儾幌胍x取已經(jīng)被刪除的檔案状蜗，我們可以加入read: false選項(xiàng)來防止gulp讀取檔案內(nèi)容–讓它快一些需五。
- 預(yù)設(shè)任務(wù)
我們可以建立一個(gè)預(yù)設(shè)任務(wù)，當(dāng)只輸入$ gulp指令時(shí)執(zhí)行的任務(wù)轧坎，這裡執(zhí)行三個(gè)我們所建立的任務(wù):
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
注意額外傳入gulp.task的陣列宏邮。這裡我們可以定義任務(wù)相依(task dependencies)。在這個(gè)范例中缸血，gulp.start開始任務(wù)前會先執(zhí)行清理(clean)任務(wù)蜜氨。Gulp中所有的任務(wù)都是并行(concurrently)執(zhí)行，并沒有先后順序哪個(gè)任務(wù)會先完成属百，所以我們需要確保clean任務(wù)在其他任務(wù)開始前完成记劝。
- 看守
為了能夠看守檔案变姨，并在更動發(fā)生后執(zhí)行相關(guān)任務(wù)族扰，首先需要建立一個(gè)新的任務(wù)，使用gulp.watchAPI來看守檔案:
gulp.task('watch', function() {
// 看守所有.scss檔
gulp.watch('src/styles/**/*.scss', ['styles']);
// 看守所有.js檔
gulp.watch('src/scripts/**/*.js', ['scripts']);
// 看守所有圖片檔
gulp.watch('src/images/**/*', ['images']);
});
- 即時(shí)重整(LiveReload)
Gulp也可以處理檔案更動后定欧，自動重新整理頁面渔呵。我們需要修改watch任務(wù)，設(shè)置即時(shí)重整伺服器砍鸠。
// 載入外掛
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
// 樣式
gulp.task('styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded', }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/styles'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({ message: 'Styles task complete' }));
});
// 腳本
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
// 圖片
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
// 清理
gulp.task('clean', function() {
return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
.pipe(clean());
});
// 預(yù)設(shè)任務(wù)
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
// 看手
gulp.task('watch', function() {
// 看守所有.scss檔
gulp.watch('src/styles/**/*.scss', ['styles']);
// 看守所有.js檔
gulp.watch('src/scripts/**/*.js', ['scripts']);
// 看守所有圖片檔
gulp.watch('src/images/**/*', ['images']);
// 建立即時(shí)重整伺服器
var server = livereload();
// 看守所有位在 dist/ 目錄下的檔案扩氢，一旦有更動，便進(jìn)行重整
gulp.watch(['dist/**']).on('change', function(file) {
server.changed(file.path);
});
});
