????本文假設(shè)你之前沒(méi)有用過(guò)任何任務(wù)腳本（task runner）和命令行工具，一步步教你上手Gulp。不要怕，它其實(shí)很簡(jiǎn)單，我會(huì)分為五步向你介紹gulp并幫助你完成一些驚人的事情。那就直接開(kāi)始吧。
第一步：安裝Node
????首先，最基本也最重要的是，我們需要搭建node環(huán)境。訪問(wèn) http://nodejs.org ，然后點(diǎn)擊大大的綠色的install按鈕，下載完成后直接運(yùn)行程序，就一切準(zhǔn)備就緒。 npm 會(huì)隨著安裝包一起安裝，稍后會(huì)用到它。
第二步：使用命令行
????也許現(xiàn)在你還不是很了解什么是命令行——OSX中的終端（Terminal），windows中的命令提示符（Command Prompt），但很快你就會(huì)知道。它看起來(lái)沒(méi)那么簡(jiǎn)單，但一旦掌握了它的竅門，就可以很方便的執(zhí)行很多命令行程序，比如Sass，Yeoman和Git等，這些都是非常有用的工具。
如果你很熟悉命令行，直接跳到步驟四。
????為了確保Node已經(jīng)正確安裝，我們執(zhí)行幾個(gè)簡(jiǎn)單的命令。
node -v
????回車（Enter），如果正確安裝的話，你會(huì)看到所安裝的Node的版本號(hào)，接下來(lái)看看npm。
npm -v
????這同樣能得到npm的版本號(hào)。
????如果這兩行命令沒(méi)有得到返回，可能node就沒(méi)有安裝正確，嘗試重啟下命令行工具，如果還不行的話，只能回到第一步進(jìn)行重裝。
第三步：定位到項(xiàng)目
????現(xiàn)在，我們已經(jīng)大致了解了命令行并且知道如何簡(jiǎn)單使用它，接下來(lái)只需要兩個(gè)簡(jiǎn)單的命令就能定位到文件目錄并看看目錄里都有些什么文件。
- cd，定位到目錄
- ls，列出文件列表
建議多敲敲這兩個(gè)命令，了解文件系統(tǒng)并知道文件都在哪里。
????習(xí)慣使用了這兩個(gè)命令后，就要進(jìn)入我們的項(xiàng)目目錄，這個(gè)目錄各不相同，舉個(gè)例子，這是我進(jìn)入我項(xiàng)目目錄的命令：
cd /Applications/XAMPP/xamppfiles/htdocs/my-project
????成功進(jìn)入項(xiàng)目目錄后，我們開(kāi)始安裝gulp。
第四步：安裝gulp
????我們已經(jīng)知道如何使用命令行，現(xiàn)在嘗試點(diǎn)新的東西，認(rèn)識(shí)npm然后安裝gulp。
????NPM是基于命令行的node包管理工具，它可以將node的程序模塊安裝到項(xiàng)目中，在它的 官網(wǎng)中可以查看和搜索所有可用的程序模塊。
sudo npm install -g gulp
- sudo是以管理員身份執(zhí)行命令，一般會(huì)要求輸入電腦密碼
- npm是安裝node模塊的工具，執(zhí)行install命令
- -g表示在全局環(huán)境安裝，以便任何項(xiàng)目都能使用它
- 最后，gulp是將要安裝的node模塊的名字
????運(yùn)行時(shí)注意查看命令行有沒(méi)有錯(cuò)誤信息，安裝完成后，你可以使用下面的命令查看gulp的版本號(hào)以確保gulp已經(jīng)被正確安裝。
gulp -v
????接下來(lái)，我們需要將gulp安裝到項(xiàng)目本地
npm install —-save-dev gulp
????這里，我們使用 --save-dev來(lái)更新package.json文件，更新 devDependencies值，以表明項(xiàng)目需要依賴gulp。
????Dependencies可以向其他參與項(xiàng)目的人指明項(xiàng)目在開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境中的node模塊依懶關(guān)系，想要更加深入的了解它可以看看 package.json文檔 。
第五步：新建Gulpfile文件，運(yùn)行g(shù)ulp
????安裝好gulp后我們需要告訴它要為我們執(zhí)行哪些任務(wù)，首先，我們自己需要弄清楚項(xiàng)目需要哪些任務(wù)。
- 檢查Javascript
- 編譯Sass（或Less之類的）文件
- 合并Javascript
- 壓縮并重命名合并后的Javascript
安裝依賴
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
提醒下，如果以上命令提示權(quán)限錯(cuò)誤，需要添加 sudo再次嘗試。
新建gulpfile文件
????現(xiàn)在，組件都安裝完畢，我們需要新建gulpfile文件以指定gulp需要為我們完成什么任務(wù)。
????gulp只有五個(gè)方法：task，run，watch，src，和dest，在項(xiàng)目根目錄新建一個(gè)js文件并命名為 gulpfile.js ，把下面的代碼粘貼進(jìn)去：
??gulpfile.js
// 引入 gulp
var gulp = require('gulp');
// 引入組件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// 檢查腳本
gulp.task('lint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 編譯Sass
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// 合并，壓縮文件
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
// 默認(rèn)任務(wù)
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
// 監(jiān)聽(tīng)文件變化
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
??現(xiàn)在，分段解釋下這段代碼。
引入組件
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
????這一步，我們引入了核心的gulp和其他依賴組件，接下來(lái)，分開(kāi)創(chuàng)建lint, sass, scripts 和 default這四個(gè)不同的任務(wù)。
Lint任務(wù)
gulp.task('lint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
????Link任務(wù)會(huì)檢查 js/目錄下得js文件有沒(méi)有報(bào)錯(cuò)或警告。
Sass任務(wù)
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
????Sass任務(wù)會(huì)編譯 scss/目錄下的scss文件，并把編譯完成的css文件保存到/css目錄中。
Scripts 任務(wù)
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
????scripts任務(wù)會(huì)合并 js/目錄下得所有得js文件并輸出到 dist/目錄，然后gulp會(huì)重命名、壓縮合并的文件，也輸出到 dist/目錄。
default任務(wù)
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
????這時(shí)，我們創(chuàng)建了一個(gè)基于其他任務(wù)的default任務(wù)。使用 .run()方法關(guān)聯(lián)和運(yùn)行我們上面定義的任務(wù)，使用 .watch()方法去監(jiān)聽(tīng)指定目錄的文件變化，當(dāng)有文件變化時(shí)，會(huì)運(yùn)行回調(diào)定義的其他任務(wù)。
現(xiàn)在，回到命令行，可以直接運(yùn)行g(shù)ulp任務(wù)了。
gulp
????這將執(zhí)行定義的default任務(wù)，換言之，這和以下的命令式同一個(gè)意思
gulp default
????當(dāng)然，我們可以運(yùn)行在gulpfile.js中定義的任意任務(wù)，比如，現(xiàn)在運(yùn)行sass任務(wù)：
gulp sass
結(jié)束語(yǔ)
現(xiàn)在已經(jīng)做到了設(shè)置gulp任務(wù)然后運(yùn)行他們，現(xiàn)在再回顧下之前學(xué)習(xí)的。
- 學(xué)習(xí)了安裝Node環(huán)境
- 學(xué)習(xí)了簡(jiǎn)單使用命令行
- 學(xué)習(xí)了用命令行進(jìn)入項(xiàng)目目錄
- 學(xué)習(xí)了使用npm和安裝gulp
- 學(xué)習(xí)了如何運(yùn)行g(shù)ulp任務(wù)
