Gulp新手入門教程
Gulp 是一個自動化工具，前端開發者可以使用它來處理常見任務：
- 搭建web服務器
- 文件保存時自動重載瀏覽器
- 使用預處理器如Sass、LESS
- 優化資源，比如壓縮CSS、JavaScript、壓縮圖片
當然Gulp能做的遠不止這些。如果你夠瘋狂，你甚至可以使用它搭建一個靜態頁面生成器。Gulp真的足夠強大，但你必須學會駕馭它。
這是這篇文章的主要目的。幫助你了解Gulp的基礎用法，助你早日完成一統天下的大業。
在我們深入了解之前，我們先來說說為什麽是Gulp。
為什麽是Gulp?
類似Gulp的工具，我們通常稱之為構建工具。如今最流行的兩個構建工具是Gulp和Grunt。
已經有非常多的文章論證它們之前的異同，你隨便搜一下就知道了。
主要區別是你如何使用他們構建自動化工作流。與Grunt相比，Gulp更加簡潔，執行效率更高。
讓我們繼續學習Gulp並搭建一個簡單的工作流。
我們將要做的
這篇文章的最後，你會擁有簡單的一個工作流：
- 搭建本地web服務器
- 編譯Sass
- 每當保存更改，自動刷新瀏覽器
- 優化&壓縮資源
除此之外，你還將學會使用簡單命令鏈式調用多個任務。
安裝Gulp
安裝Gulp之前你需要先安裝Node.js。
如果你還沒安裝Node，你可以在 這裏 下載。
安裝完Node.js，使用Terminal(終端，win下是cmd)用下面命令安裝Gulp
$ sudo npm install gulp -g
只有mac用戶才需要sudo命令，並且不要把$符號也復制進去，這不是你的菜。
npm install是指定從Node Package Manager(npm 你怕毛)安裝的命令。
-g表示全局安裝，這樣你在電腦上任何位置都能只用gulp 命令。
Mac 用戶需要管理員權限才能全局安裝，所以需要sudo。
接下來使用Gulp創建項目。
創建Gulp項目
首先，我們新建一個project文件夾，並在該目錄下執行npm init命令：
$ npm init
npm init命令會為你創建一個package.json文件，這個文件保存著這個項目相關信息。比如你用到的各種依賴（這裏主要是插件）
（終端會自動出現下面內容，這裏先隨便填就行）
npm-init
創建完之後，我們執行下面的命令：
$ npm install gulp --save-dev
這一次，我們局部安裝Gulp。使用—save-dev，將通知計算機在package.json中添加gulp依賴。
package-json
執行完之後，gulp將創建node_modules文件夾，裏面有個gulp文件夾。
node-modules
在正式開始之前，我們再來明確下項目的目錄結構。
目錄結構
Gulp非常之靈活，理解它的內部工作，你就能在項目中得心應手。
這篇文章，我們使用通用的webapp目錄結構：
structure
在這個結構中，我們使用app文件夾作為開發目錄（所有的源文件都放在這下面），dist文件夾用來存放生產環境下的內容。
這些文件名，你想怎麽起都行，但請務必記住你的目錄結構。
現在我們來創建gulpfile.js。
第一個Gulp任務
（你需要先在根目錄下創建一個gulpfile.js文件）。
var gulp = require(‘gulp‘);
這行命令告知Node去node_modules中查找gulp包，先局部查找，找不到就去全局環境中查找。
找到之後就會賦值給gulp變量，然後我們就可以使用它了。
簡單的任務如下所示：
gulp.task(‘task-name‘, function() {
// Stuff here
});
task-name 是給你的任務起的名字，稍後在命令行中執行gulp task-name，將運行該任務。
寫個HelloWorld，是這樣的：
gulp.task(‘hello‘, function() {
console.log(‘Hello World!‘);
});
命令行中執行：
$ gulp hello
那麽將會輸出Hello World!。 夠簡單吧？
Gulp任務通常都會比這難一丁點，就一丁點。
通常會包含兩個特定的Gulp方法和一些列Gulp插件。
大概這樣：
gulp.task(‘task-name‘, function () {
return gulp.src(‘source-files‘) // Get source files with gulp.src
.pipe(aGulpPlugin()) // Sends it through a gulp plugin
.pipe(gulp.dest(‘destination‘)) // Outputs the file in the destination folder
})
正如你所見，兩個Gulp方法，src,dest，一進一出[捂臉.jpg]。
下面用編譯Sass來舉栗子。
Gulp執行預處理
我們使用gulp-sass插件來編譯Sass。
安裝插件的步驟是這樣的：
-
使用npm install 命令安裝
$ npm install gulp-sass --save-dev
-
在gulpfile中引入插件，用變量保存
var gulp = require(‘gulp‘);
// Requires the gulp-sass plugin
var sass = require(‘gulp-sass‘); -
在任務中使用
gulp.task(‘sass‘, function(){
return gulp.src(‘source-files‘)
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest(‘destination‘))
});
我們需要給sass任務提供源文件和輸出位置。所以我們先在項目中創建app/scss文件夾，裏面有個styles.scss文件。
這個文件將在gulp.src中用到。
sass處理之後，我們希望它生成css文件並產出到app/css目錄下，可以這樣寫：
gulp.task(‘sass‘, function(){
return gulp.src(‘app/scss/styles.scss‘)
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest(‘app/css‘))
});
測試一下：
// styles.scss
.testing {
width: percentage(5/7);
}
使用Terminal執行gulp sass,你將看到app/css/styles.css文件下會有下面的代碼：
/* styles.css */
.testing {
width:71.42857%;
}
styles.css是gulp智動為我們生成的。
percentage 是Sass的方法。
使用Sass就這麽簡單。但是通常我們不止有一個scss文件。這時候可以使用Node通配符。
Node中的通配符
通配符是一種匹配模式，允許你匹配到多個文件。不止是Node，很多平臺都有，有點像正則表達式。
使用通配符，計算機檢查文件名和路徑進行匹配。
大部分時候，我們只需要用到下面4種匹配模式：
- *.scss：*號匹配當前目錄任意文件，所以這裏*.scss匹配當前目錄下所有scss文件
- **/*.scss：匹配當前目錄及其子目錄下的所有scss文件。
- !not-me.scss：！號移除匹配的文件，這裏將移除not-me.scss
- *.+(scss|sass)：+號後面會跟著圓括號，裏面的元素用|分割，匹配多個選項。這裏將匹配scss和sass文件。
那麽還是上面的栗子，改造一下：
gulp.task(‘sass‘, function() {
return gulp.src(‘app/scss/**/*.scss‘) // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass())
.pipe(gulp.dest(‘app/css‘))
})
任何app下的scss文件，在執行命令之後將生成對應的css文件存放到相應路徑。(智動…)
second-stylesheet
現在我們能處理多個文件了，但是不想每次都要執行命令，怎麽辦？
Gulp就是為懶人而生的，我們可以使用watch命令，自動檢測並執行。
監聽Sass文件
Gulp提供watch方法給我們，語法如下：
// Gulp watch syntax
gulp.watch(‘files-to-watch‘, [‘tasks‘, ‘to‘, ‘run‘]);
將上面的栗子再改下：
// Gulp watch syntax
gulp.watch(‘app/scss/**/*.scss‘, [‘sass‘]);
通常我們監聽的還不只是一個文件，把它變成一個任務：
gulp.task(‘watch‘, function(){
gulp.watch(‘app/scss/**/*.scss‘, [‘sass‘]);
// Other watchers
})
執行gulp watch命令。
watch-start
有了監聽，每次修改文件，Gulp都將自動為我們執行任務。
watch-compile
還不夠，修改完直接幫我刷新瀏覽器行嗎，我不想每次都要手動按Command + R;
使用Browser Sync自動刷新
Browser Sync 幫助我們搭建簡單的本地服務器並能實時刷新瀏覽器，它還能 同時刷新多個設備
新插件？記住！安裝，引入，使用。
$ npm install browser-sync --save-dev
這裏沒有gulp-前綴，因為browser-sync支持Gulp，所以沒有人專門去搞一個給Gulp用。
var browserSync = require(‘browser-sync‘);
我們創建一個broswerSync任務，我們需要告知它，根目錄在哪裏。
gulp.task(‘browserSync‘, function() {
browserSync({
server: {
baseDir: ‘app‘
},
})
})
我們稍微修改一下之前的代碼，讓每次css文件更改都刷新一下瀏覽器：
gulp.task(‘sass‘, function() {
return gulp.src(‘app/scss/**/*.scss‘) // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest(‘app/css‘))
.pipe(browserSync.reload({
stream: true
}))
});
現在我們配置好Broswer Sync了，我們需要運行這兩個命令。
我們可以在watch任務之前告知Gulp，先把browserSync和Sass任務執行了再說。
語法如下：
gulp.task(‘watch‘, [‘array‘, ‘of‘, ‘tasks‘, ‘to‘, ‘complete‘,‘before‘, ‘watch‘], function (){
// ...
})
應用下來是這樣：
gulp.task(‘watch‘, [‘browserSync‘, ‘sass‘], function (){
gulp.watch(‘app/scss/**/*.scss‘, [‘sass‘]);
// Other watchers
})
現在你執行gulp watch命令，在執行完browserSync和Sass，才會開始監聽。
bs-watch
並且現在瀏覽器的顯示的頁面為app/index.html。你修改了styles.scss之後，瀏覽器將自動屬性頁面。
bs-change-bg
不止是scss修改的時候需要刷新瀏覽器吧？再改改：
gulp.task(‘watch‘, [‘browserSync‘, ‘sass‘], function (){
gulp.watch(‘app/scss/**/*.scss‘, [‘sass‘]);
// Reloads the browser whenever HTML or JS files change
gulp.watch(‘app/*.html‘, browserSync.reload);
gulp.watch(‘app/js/**/*.js‘, browserSync.reload);
});
到目前為止，我們做了下面三件事：
- 可運轉的web開發服務
- 使用Sass預處理器
- 自動刷新瀏覽器
接下來說說優化方面的技巧
優化CSS和JavaScript文件
說到優化的時候，我們需要想到：壓縮，拼接。也就是減少體積和HTTP次數。
開發者面臨的主要問題是很難按照正確的順序合並文件。
<body>
<!-- other stuff -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/another-library.js"></script>
<script src="js/main.js"></script>
</body>
由於文件路徑的的不同，使用 https://www.npmjs.com/package/gulp-concat 等插件非常困難。
慶幸的是，gulp-useref 解決了這個問題。
gulp-useref會將多個文件拼接成單一文件，並輸出到相應目錄。
<!-- build:<type> <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
可以是js,css,或者remove。如果你設為remove,Gulp將不會生成文件。
指定產出路徑。
我們想最終產出main.min.js。可以這樣寫：
<!--build:js js/main.min.js -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/another-library.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
我們來安裝gulp-useref。
$ npm install gulp-useref --save-dev
引用
var useref = require(‘gulp-useref‘);
使用起來非常簡單：
gulp.task(‘useref‘, function(){
return gulp.src(‘app/*.html‘)
.pipe(useref())
.pipe(gulp.dest(‘dist‘));
});
（新版的gulp-useref已經不需要寫多余的useref.assets了）
執行useref命令，Gulp將合並三個script標簽成一個文件，並保存到dist/js/main.min.js。
合並完之後，我們再來壓縮。使用gulp-uglify插件。
安裝
$ npm install gulp-uglify --save-dev
使用
// Other requires...
var uglify = require(‘gulp-uglify‘);
gulp.task(‘useref‘, function(){
return gulp.src(‘app/*.html‘)
.pipe(uglify()) // Uglifies Javascript files
.pipe(useref())
.pipe(gulp.dest(‘dist‘))
});
搞定！
註意：執行完useref後，html中的script路徑將只剩下main.min.js。
useref-html
王祖藍：完美~
gulp-useref同樣可以用在css上。除了壓縮，需要區分，其它內容同js一樣。所以我們使用gulp-if來做不同處理。
使用gulp-minify-css壓縮css。
$ npm install gulp-if gulp-minify-css --save-dev
應用
var gulpIf = require(‘gulp-if‘);
var minifyCSS = require(‘gulp-minify-css‘);
gulp.task(‘useref‘, function(){
return gulp.src(‘app/*.html‘)
// Minifies only if it‘s a CSS file
.pipe(gulpIf(‘*.css‘, minifyCSS()))
// Uglifies only if it‘s a Javascript file
.pipe(gulpIf(‘*.js‘, uglify()))
.pipe(useref())
.pipe(gulp.dest(‘dist‘))
});
搞定！
再說說如何壓縮圖片。同樣easy。
優化圖片
使用gulp-imagemin插件。
$ npm install gulp-imagemin --save-dev
引入，使用
var imagemin = require(‘gulp-imagemin‘);
gulp.task(‘images‘, function(){
return gulp.src(‘app/images/**/*.+(png|jpg|gif|svg)‘)
.pipe(imagemin())
.pipe(gulp.dest(‘dist/images‘))
});
（所有的gulp插件都是有相關參數可以配置，如果需要，請自行查看。）
壓縮圖片可能會占用較長時間，使用 gulp-cache 插件可以減少重復壓縮。
$ npm install gulp-cache --save-dev
引入、使用
var cache = require(‘gulp-cache‘);
gulp.task(‘images‘, function(){
return gulp.src(‘app/images/**/*.+(png|jpg|jpeg|gif|svg)‘)
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest(‘dist/images‘))
});
接下來，我們說說發布流程。
清理生成文件
由於我們是自動生成文件，我們不想舊文件摻雜進來。
使用 del
npm install del --save-dev
引入、使用
var del = require(‘del‘);
gulp.task(‘clean‘, function() {
del(‘dist‘);
});
但是我們又不想圖片被刪除（圖片改動的幾率不大）,啟用新的任務。
gulp.task(‘clean:dist‘, function(callback){
del([‘dist/**/*‘, ‘!dist/images‘, ‘!dist/images/**/*‘], callback)
});
這個任務會刪除，除了images/文件夾，dist下的任意文件。
為了知道clean:dist任務什麽時候完成，我們需要提供callback參數。
在某些時候我們還是需要清除圖片，所以clean任務我們還需要保留。
gulp.task(‘clean‘, function(callback) {
del(‘dist‘);
return cache.clearAll(callback);
})
噢，我真的是廢話太多了。把我們學到的組合到一塊吧！
組合Gulp任務
廢話了這麽多，我們主要有兩條線路。
第一條是開發過程，我們便以Sass，監聽文件，刷新瀏覽器。
第二條是優化，我們優化CSS,JavaScript,壓縮圖片，並把資源從app移動到dist。
開發任務我們上面的watch已經組裝好了。
gulp.task(‘watch‘, [‘browserSync‘, ‘sass‘], function (){
// ... watchers
})
我們也做一個來執行第二條線路。
gulp.task(‘build‘, [`clean`, `sass`, `useref`, `images`, `fonts`], function (){
console.log(‘Building files‘);
})
但是這樣Gulp會同時觸發[]的事件。我們要讓clean在其他任務之前完成。
這裏要用到 RunSequence 。
$ npm install run-sequence --save-dev
用法如下：
var runSequence = require(‘run-sequence‘);
gulp.task(‘task-name‘, function(callback) {
runSequence(‘task-one‘, ‘task-two‘, ‘task-three‘, callback);
});
執行task-name時，Gulp會按照順序執行task-one,task-two,task-thre。
RunSequence也允許你同時執行多個任務。
gulp.task(‘task-name‘, function(callback) {
runSequence(‘task-one‘, [‘tasks‘,‘two‘,‘run‘,‘in‘,‘parallel‘], ‘task-three‘, callback);
});
改造我們的代碼：
gulp.task(‘build‘, function (callback) {
runSequence(‘clean:dist‘,
[‘sass‘, ‘useref‘, ‘images‘, ‘fonts‘],
callback
)
})
開發任務我們也用runSequence:
gulp.task(‘default‘, function (callback) {
runSequence([‘sass‘,‘browserSync‘, ‘watch‘],
callback
)
})
default? 如果你的任務名字叫做default，那麽只需要輸入gulp命令即可執行。
這裏是我們最終的 代碼倉庫。
總結
上面的的內容搭建了一個基本的Gulp工作流。還有更精彩的內容等著你去開發。這裏提供些插件：
開發過程：
- 使用 Autoprefixer，你不再需要寫CSS瀏覽器內核前綴
- 增加 Sourcemaps，讓你更方便的調試Sass,coffeescript
- 使用 sprity創建精靈圖
- gulp-changed 只允許通過修改的文件
- Babel 或 Traceur 寫ES6
- Browserify , webpack , jspm 模塊化JavaScript
- Handlebars ,Swing 模塊化Html
- require-dir 分割gulpfile成多個文件
- gulp-moderinizr 自動生成Modernizr腳本
優化：
- unCSS 移除多余的CSS
- CSSO 更深入地優化CSS
- Critical 生成行內CSS
除了開發和優化過程，你可以使用gulp-jasmine寫JavaScript單元測試，甚至使用gulp-rync直接部署dist文件到生產環境。
譯者的話
花了點時間去學習Gulp，這篇文章是我找到比較全面的，非常適合新手入門。
Gulp其實非常簡單，多玩一下，你就能完全掌握它了，有能力的話，可以嘗試開發Gulp插件。
我在 前端收藏夾 以及 使用gulp生成sprites圖片和樣式表 都有實踐過。不過正如作者 Zell Liew 所說，Gulp的強大之處遠不止這些，所以他出了本電子書 automating your workflow ，可以幫助你搭建屬於自己的工作流，剩下時間去喝咖啡，有興趣的可以去購買，支持作者。
Thank you, Zell Liew!
本文根據@Zell Liew的文章所譯，整篇譯文帶有我們自己的理解和意思，如果有譯得不好的地方或者不對之處，還請大家指點。英文出處：Gulp for Beginners
如需轉載，請註明出處: http://w3ctrain.com/2015/12/22/gulp-for-beginners/ ，歡迎加入前端Q群（ 467969149 ）
from: http://www.w3ctrain.com/2015/12/22/gulp-for-beginners/
Gulp新手入門教程
標簽：
原文地址：http://www.cnblogs.com/GarfieldEr007/p/5747308.html
Gulp新手入門教程