gulp用法

轉載：http://segmentfault.com/blog/laopopo/1190000000372547

http://javascript.ruanyifeng.com/tool/gulp.html

本文假設你以前沒有用過任何任務腳本（task runner）和命令行工具，一步步教你上手Gulp。不要怕，它其實很簡單，我會分爲五步向你介紹gulp並幫助你完成一些驚人的事情。那就直接開始吧。

第一步：安裝Node

首先，最基本也最重要的是，咱們須要搭建node環境。訪問http://nodejs.org，而後點擊大大的綠色的install按鈕，下載完成後直接運行程序，就一切準備就緒。npm會隨着安裝包一塊兒安裝，稍後會用到它。

第二步：使用命令行

也許如今你還不是很瞭解什麼是命令行——OSX中的終端（Terminal），windows中的命令提示符（Command Prompt），但很快你就會知道。它看起來沒那麼簡單，但一旦掌握了它的竅門，就能夠很方便的執行不少命令行程序，好比Sass，Yeoman和Git等，這些都是很是有用的工具。

若是你很熟悉命令行，直接跳到步驟四。

爲了確保Node已經正確安裝，咱們執行幾個簡單的命令。

node -v 

回車（Enter），若是正確安裝的話，你會看到所安裝的Node的版本號，接下來看看npm。

npm -v 

這一樣能獲得npm的版本號。

若是這兩行命令沒有獲得返回，可能node就沒有安裝正確，嘗試重啓下命令行工具，若是還不行的話，只能回到第一步進行重裝。

第三步：定位到項目

如今，咱們已經大體瞭解了命令行而且知道如何簡單使用它，接下來只須要兩個簡單的命令就能定位到文件目錄並看看目錄裏都有些什麼文件。

1. cd，定位到目錄
2. ls，列出文件列表

建議多敲敲這兩個命令，瞭解文件系統並知道文件都在哪裏。

習慣使用了這兩個命令後，就要進入咱們的項目目錄，這個目錄各不相同，舉個例子，這是我進入我項目目錄的命令：

cd /Applications/XAMPP/xamppfiles/htdocs/my-project 

成功進入項目目錄後，咱們開始安裝gulp。

第四步：安裝gulp

咱們已經知道如何使用命令行，如今嘗試點新的東西，認識npm而後安裝gulp。

NPM是基於命令行的node包管理工具，它能夠將node的程序模塊安裝到項目中，在它的官網中能夠查看和搜索全部可用的程序模塊。

在命令行中輸入

sudo npm install -g gulp 

1. sudo是以管理員身份執行命令，通常會要求輸入電腦密碼

2. npm是安裝node模塊的工具，執行install命令

3. -g表示在全局環境安裝，以便任何項目都能使用它

4. 最後，gulp是將要安裝的node模塊的名字

運行時注意查看命令行有沒有錯誤信息，安裝完成後，你可使用下面的命令查看gulp的版本號以確保gulp已經被正確安裝。

gulp -v 

接下來，咱們須要將gulp安裝到項目本地

npm install —-save-dev gulp 

這裏，咱們使用—-save-dev來更新package.json文件，更新devDependencies值，以代表項目須要依賴gulp。

Dependencies能夠向其餘參與項目的人指明項目在開發環境和生產環境中的node模塊依懶關係，想要更加深刻的瞭解它能夠看看package.json文檔。

第五步：新建Gulpfile文件，運行gulp

安裝好gulp後咱們須要告訴它要爲咱們執行哪些任務，首先，咱們本身須要弄清楚項目須要哪些任務。

• 檢查Javascript
• 編譯Sass（或Less之類的）文件
• 合併Javascript
• 壓縮並重命名合併後的Javascript

安裝依賴

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 

提醒下，若是以上命令提示權限錯誤，須要添加sudo再次嘗試。

新建gulpfile文件

如今，組件都安裝完畢，咱們須要新建gulpfile文件以指定gulp須要爲咱們完成什麼任務。

gulp只有五個方法： task，run，watch，src，和dest，在項目根目錄新建一個js文件並命名爲gulpfile.js，把下面的代碼粘貼進去：

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')); }); // 默認任務 gulp.task('default', function(){ gulp.run('lint', 'sass', 'scripts'); // 監聽文件變化 gulp.watch('./js/*.js', function(){ gulp.run('lint', 'sass', 'scripts'); }); }); 

如今，分段解釋下這段代碼。

引入組件

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和其餘依賴組件，接下來，分開建立lint, sass, scripts 和 default這四個不一樣的任務。

Lint任務

gulp.task('lint', function() { gulp.src('./js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); 

Link任務會檢查js/目錄下得js文件有沒有報錯或警告。

Sass任務

gulp.task('sass', function() { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')); }); 

Sass任務會編譯scss/目錄下的scss文件，並把編譯完成的css文件保存到/css目錄中。

Scripts 任務

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任務會合並js/目錄下得全部得js文件並輸出到dist/目錄，而後gulp會重命名、壓縮合並的文件，也輸出到dist/目錄。

default任務

gulp.task('default', function(){ gulp.run('lint', 'sass', 'scripts'); gulp.watch('./js/*.js', function(){ gulp.run('lint', 'sass', 'scripts'); }); }); 

這時，咱們建立了一個基於其餘任務的default任務。使用.run()方法關聯和運行咱們上面定義的任務，使用.watch()方法去監聽指定目錄的文件變化，當有文件變化時，會運行回調定義的其餘任務。

如今，回到命令行，能夠直接運行gulp任務了。

gulp 

這將執行定義的default任務，換言之，這和如下的命令式同一個意思

gulp default 

固然，咱們能夠運行在gulpfile.js中定義的任意任務，好比，如今運行sass任務：

gulp sass 

(Kimi: 哇塞，酷比了哎~)

結束語

如今已經作到了設置gulp任務而後運行他們，如今再回顧下以前學習的。

1. 學習了安裝Node環境
2. 學習了簡單使用命令行
3. 學習了用命令行進入項目目錄
4. 學習了使用npm和安裝gulp
5. 學習瞭如何運行gulp任務

另外，有一些參考資源供進一步學習：

1. npm上得gulp組件
2. gulp的Github主頁
3. 官方package.json文檔

本文譯自http://travismaynard.com/writing/getting-started-with-gulp

 

2. 

Gulp：任務自動管理工具

來自《JavaScript 標準參考教程（alpha）》，by 阮一峯

Gulp與Grunt同樣，也是一個自動任務運行器。它充分借鑑了Unix操做系統的管道（pipe）思想，不少人認爲，在操做上，它要比Grunt簡單。

安裝

Gulp須要全局安裝，而後再在項目的開發目錄中安裝爲本地模塊。先進入項目目錄，運行下面的命令。

npm install -g gulp

npm install --save-dev gulp

gulpfile.js

項目根目錄中的gulpfile.js，是Gulp的配置文件。它大概是下面的樣子。

var gulp = require('gulp'); gulp.task('default', function () { }); 

下面就是一個典型的gulpfile.js文件。

var gulp = require('gulp'), uglify = require('gulp-uglify'); gulp.task('minify', function () { gulp.src('js/app.js') .pipe(uglify()) .pipe(gulp.dest('build')) }); 

上面代碼中使用了gulp-uglify模塊。在此以前，須要先安裝這個模塊。

npm install --save-dev gulp-uglify

gulpfile.js加載gulp和gulp-uglify模塊以後，使用gulp模塊的task方法指定任務。task方法有兩個參數，第一個是任務名，第二個是任務函數。在任務函數中，使用gulp模塊的src方法，指定所要處理的文件，而後使用pipe方法，將上一步的輸出轉爲當前的輸入，進行鏈式處理。

在上面代碼中，使用兩次pipe方法，也就是說作了兩種處理。第一種處理是使用gulp-uglify模塊，壓縮源碼；第二種處理是使用gulp模塊的dest方法，將上一步的輸出寫入本地文件，這裏是build.js（代碼中省略了後綴名js）。

從上面的例子中能夠看到，gulp充分使用了「管道」思想，就是一個數據流（stream）：src方法讀入文件產生數據流，dest方法將數據流寫入文件，中間是一些中間步驟，每一步都對數據流進行一些處理。

下面是另外一個數據流的例子。

gulp.task('js', function () { return gulp.src('js/*.js') .pipe(jshint()) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build')); }); 

上面代碼使用pipe命令，分別進行jshint、uglify、concat三步處理。

gulp.src()

gulp模塊的src方法，用於產生數據流。它的參數表示所要處理的文件，通常有如下幾種形式。

• js/app.js：指定確切的文件名。
• js/*.js：某個目錄全部後綴名爲js的文件。
• js/**/*.js：某個目錄及其全部子目錄中的全部後綴名爲js的文件。
• !js/app.js：除了js/app.js之外的全部文件。
• *.+(js|css)：匹配項目根目錄下，全部後綴名爲js或css的文件。

src方法的參數還能夠是一個數組，用來指定多個成員。

gulp.src(['js/**/*.js', '!js/**/*.min.js']) 

gulp.task()

gulp模塊的task方法，用於定義具體的任務。它的第一個參數是任務名，第二個參數是任務函數。下面是一個很是簡單的任務函數。

gulp.task('greet', function () { console.log('Hello world!'); }); 

task方法還能夠指定按順序運行的一組任務。

gulp.task('build', ['css', 'js', 'imgs']); 

上面代碼先指定build任務，它按次序由css、js、imgs三個任務所組成。注意，因爲每一個任務都是異步調用，因此沒有辦法保證js任務的開始運行的時間，正是css任務運行結束。

若是但願各個任務嚴格按次序運行，能夠把前一個任務寫成後一個任務的依賴模塊。

gulp.task('css', ['greet'], function () { // Deal with CSS here }); 

上面代碼代表，css任務依賴greet任務，因此css必定會在greet運行完成後再運行。

若是一個任務的名字爲default，就代表它是「默認任務」，在命令行直接輸入gulp命令，就會運行該任務。

gulp.task('default', function () { // Your default task }); 

gulp.watch()

gulp模塊的watch方法，用於指定須要監視的文件。一旦這些文件發生變更，就運行指定任務。

gulp.task('watch', function () { gulp.watch('templates/*.tmpl.html', ['build']); }); 

上面代碼指定，一旦templates目錄中的模板文件發生變化，就運行build任務。

watch方法也能夠用回調函數，代替指定的任務。

gulp.watch('templates/*.tmpl.html', function (event) { console.log('Event type: ' + event.type); console.log('Event path: ' + event.path); }); 

另外一種寫法是watch方法所監控的文件發生變化時（修改、增長、刪除文件），會觸發change事件。能夠對change事件指定回調函數。

var watcher = gulp.watch('templates/*.tmpl.html', ['build']); watcher.on('change', function (event) { console.log('Event type: ' + event.type); console.log('Event path: ' + event.path); }); 

除了change事件，watch方法還可能觸發如下事件。

• end：回調函數運行完畢時觸發。
• error：發生錯誤時觸發。
• ready：當開始監聽文件時觸發。
• nomatch：沒有匹配的監聽文件時觸發。

watcher對象還包含其餘一些方法。

• watcher.end()：中止watcher對象，不會再調用任務或回調函數。
• watcher.files()：返回watcher對象監視的文件。
• watcher.add(glob)：增長所要監視的文件，它還能夠附件第二個參數，表示回調函數。
• watcher.remove(filepath)：從watcher對象中移走一個監視的文件。

gulp-load-plugins模塊

通常狀況下，gulpfile.js中的模塊須要一個個加載。

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')); }); 

上面代碼中，除了gulp模塊之外，還加載另外三個模塊。

這種一一加載的寫法，比較麻煩。使用gulp-load-plugins模塊，能夠加載package.json文件中全部的gulp模塊。上面的代碼用gulp-load-plugins模塊改寫，就是下面這樣。

var gulp = require('gulp'), gulpLoadPlugins = require('gulp-load-plugins'), plugins = gulpLoadPlugins(); gulp.task('js', function () { return gulp.src('js/*.js') .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter('default')) .pipe(plugins.uglify()) .pipe(plugins.concat('app.js')) .pipe(gulp.dest('build')); }); 

上面代碼假設package.json文件包含如下內容。

{ "devDependencies": { "gulp-concat": "~2.2.0", "gulp-uglify": "~0.2.1", "gulp-jshint": "~1.5.1", "gulp": "~3.5.6" } } 

gulp-livereload模塊

gulp-livereload模塊用於自動刷新瀏覽器，反映出源碼的最新變化。它除了模塊之外，還須要在瀏覽器中安裝插件，用來配合源碼變化。

var gulp = require('gulp'), less = require('gulp-less'), livereload = require('gulp-livereload'), watch = require('gulp-watch'); gulp.task('less', function() { gulp.src('less/*.less') .pipe(watch()) .pipe(less()) .pipe(gulp.dest('css')) .pipe(livereload()); }); 

上面代碼監視less文件，一旦編譯完成，就自動刷新瀏覽器。