安裝gulp步驟和使用方法

1.使用npm命令安裝,一下兩個命令都需要使用

gulp的安裝非常簡單，只要使用npm命令安裝即可。但是因為gulp需要作為命令列的方式執行，因此需要在安裝在系統級別的目錄中。

npm install gulp -g

因為在本地需要使用require的方式gulp。(需要進入到專案的路徑下面)因此也需要在本地安裝一份：

npm install gulp --save-dev

2 建立gulp任務： 

要使用gulp來流程化我們的開發工作。首先需要在專案的根目錄下建立一個gulpfile.js檔案。然後在gulpfile.js中填入以下程式碼：

var gulp = require("gulp")

gulp.task("greet",function () {
    console.log('hello world');
});

這裡對程式碼進行一一解釋：

1. 通過require語句引用已經安裝的第三方依賴包。這個require只能是引用當前專案的，不能引用全域性下的。require語法是node.js獨有的，只能在node.js環境下使用。

2. gulp.task是用來建立一個任務。gulp.task的第一個引數是命令的名字，第二個引數是一個函式，就是執行這個命令的時候會做什麼事情，都是寫在這個裡面的。

3. 寫完以上程式碼後，以後如果想要執行greet命令，那麼只需要進入到專案所在的路徑，然後終端使用gulp greet即可執行。

 

3. 建立處理css檔案的任務：

gulp只是提供一個框架給我們。如果我們想要實現一些更加複雜的功能，比如css壓縮，那麼我們還需要安裝一下gulp-cssnano外掛。gulp相關的外掛安裝也是通過npm命令安裝，安裝方式跟其他包是一模一樣的（gulp外掛本身就是一個普通的包）。
對css檔案的處理，需要做的事情就是壓縮，然後再將壓縮後的檔案放到指定目錄下（不要和原來css檔案重合了）！這裡我們使用gulp-cssnano來處理這個工作：

npm install gulp-cssnano --save-dev

然後在gulpfile.js中寫入以下程式碼：

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")

// 定義一個處理css檔案改動的任務
gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(gulp.dest("./css/dist/"))
});

以上對程式碼進行詳細解釋：

1. gulp.task：建立一個css處理的任務。
2. gulp.src：找到當前css目錄下所有以.css結尾的css檔案。
3. pipe：管道方法。將上一個方法的返回結果傳給另外一個處理器。比如以上的cssnano。
4. gulp.dest：將處理完後的檔案，放到指定的目錄下。不要放在和原檔案相同的目錄，以免產生衝突，也不方便管理。

 

 4. 修改檔名：

像以上任務，壓縮完css檔案後，最好是給他新增一個.min.css的字尾，這樣一眼就能知道這個是經過壓縮後的檔案。這時候我們就需要使用gulp-rename來修改了。當然首先也需要安裝npm install gulp-rename --save-dev。示例程式碼如下：

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
});

在上述程式碼中，我們增加了一行.pipe(rename({"suffix":".min"}))，這個我們就是使用rename方法，並且傳遞一個物件引數，指定修改名字的規則為新增一個.min字尾名。這個gulp-rename還有其他的指定檔名的方式，比如可以在檔名前加個字首等。更多的教程可以看這個：https://www.npmjs.com/package/gulp-rename。 

5. 建立處理js檔案的任務： 

處理js檔案，我們需要使用到gulp-uglify外掛。安裝命令如下：

npm install gulp-uglify --save-dev

安裝完後，我們就可以對js檔案進行處理了。示例程式碼如下：

var gulp = require("gulp")
var rename = require("gulp-rename")
var uglify = require('gulp-uglify');
gulp.task('script',function(){
    gulp.src(path.js + '*.js')
    .pipe(uglify())
    .pipe(rename({suffix:'.min'}))
    .pipe(gulp.dest('js/'));
});

這裡就是增加了一個.pipe(uglify())的處理，對js檔案進行壓縮和醜化（修改變數名）等處理。更多關於gulp-uglify的教程。請看：https://github.com/mishoo/UglifyJS2#minify-options。

6. 合併多個檔案： 

 

在網頁開發中，為了加快網頁的渲染速度，有時候我們會將多個檔案壓縮成一個檔案，從而減少請求的次數。要拼接檔案，我們需要用到gulp-concat外掛。安裝命令如下：

npm install gulp-concat --save-dev

比如我們現在有一個nav.js檔案用來控制導航條的。有一個index.js檔案用來控制首頁整體內容的。那麼我們可以使用以下程式碼將這兩個檔案合併成一個檔案：

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('vendorjs',function(){
    gulp.src([
        './js/nav.js',
        './js/index.js'
    ])
    .pipe(concat('index.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js/'));
});

7. 壓縮圖片： 

 

圖片是限制網站載入速度的一個主要原因。圖片越大，從網站上下載所花費的時間越長。因此對於一些圖片，我們可以採取無失真壓縮，即在不改變圖片質量的基礎之上進行壓縮。在gulp中我們可以通過gulp-imagemin來幫我們實現。安裝命令如下：

npm install gulp-imagemin --save-dev

壓縮圖片也是一個比較大的工作量，對於一些已經壓縮過的圖片，我們就沒必要再重複壓縮了。這時候我們可以使用gulp-cache來快取那些壓縮過的圖片。安裝命令如下：

npm install gulp-cache --save-dev

兩個外掛結合使用的程式碼如下：

var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
gulp.task('image',function(){
    gulp.src("./images/*.*")
    .pipe(cache(imagemin()))
    .pipe(gulp.dest('dist/images/'));
});

8. 檢測程式碼修改，自動重新整理瀏覽器： 

 

以上我們實現了更改一些css檔案後，可以自動執行處理css的任務。但是我們還是需要手動的去重新整理瀏覽器，才能看到修改後的效果。有什麼辦法能在修改完程式碼後，自動的重新整理瀏覽器呢。答案是使用browser-sync。browser-sync安裝的命令如下：

npm install browser-sync --save-dev

browser-sync使用的示例程式碼如下：

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
var bs = require("browser-sync").create()

gulp.task("bs",function () {
    bs.init({
        'server': {
            'baseDir': './'
        }
    });
});

// 定義一個處理css檔案改動的任務
gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
    .pipe(bs.stream())
});

// 定義一個監聽的任務
gulp.task("watch",function () {
    gulp.watch("./css/*.css",['css'])
});

// 執行gulp server開啟伺服器
gulp.task("server",['bs','watch'])

以上我們建立了一個bs的任務，這個任務會開啟一個3000埠，以後我們在訪問html頁面的時候，就需要通過http://127.0.0.1:3000的方式來訪問了。然後接下來我們還定義了一個server任務。這個任務會去執行bs和watch任務，只要修改了css檔案，那麼就會執行css的任務，然後就會自動重新整理瀏覽器。
browser-sync更多的教程請參考：http://www.browsersync.cn/docs/gulp/。