gulp 學習筆記

以這次學習gulp為契機來同時了解和學習node相關的知識和概念，比如 npm，package.json等，為以後學習node打好基礎。

目錄

  npm

    檢視子產品

    安裝子產品

    解除安裝子產品

    更新子產品

    搜尋子產品

    npm配置

    檢視版本

    幫助

  package

    建立package.json

    package.json的标準格式

    依賴下載下傳

  gulp

    安裝gulp

    gulpAPI

        src

        dest

        task

        watch

    gulpfile

  使用sublime運作gulp

  最後

npm

npm (Node Package Manager) 它是Node的包管理器與分發工具，又因為Node是基于JavaScript的文法格式，是以又被稱之為JavaScript的包管理器。

npm 用于管理Node的子產品以及插件，例如子產品或者插件的安裝，更新，搜尋，解除安裝等。

npm 預設與Node綁定在一起的，是以安裝Node，自然就安裝了npm。

npm 的官網:https://www.npmjs.com/

PS: npm安裝插件過程：從http://registry.npmjs.org下載下傳對應的插件包（該網站伺服器位于國外，是以經常下載下傳緩慢或出現異常），是以建議設定鏡像站點或者是使用淘寶提供的鏡像包管理器 

cnpm

檢視子產品

列出目前目錄的包

npm list           

列出全局安裝的包

npm list -g            

精簡資訊顯示

npm list -g --depth=0           

安裝子產品

本地安裝

npm install gulp --save-dev           

--save： 将該模配置資訊儲存至 

package.json

 檔案中的Dependencies屬性内。

-dev : 指明将配置資訊儲存至 

package.json

 檔案中的的 

Devdependencies

 内。

全局安裝

npm install gulp -g           

安裝指定版本号的子產品

npm install [email protected]           

總的來說，使用npm安裝一個子產品或插件，其格式如下：

npm install <packageName[@version]> [-g] [--save-dev]           

解除安裝子產品

解除安裝本地子產品

npm uninstall rimraf            

解除安裝全局子產品

npm uninstall gulp -g           

删除子產品并解除安裝配置資訊

npm uninstall rimraf --save-dev           

總的來說，解除安裝子產品的格式：

npm unistall <packageName[@version]> [-g] [--save-dev]           

更新子產品

子產品的更新與子產品的安裝和解除安裝在使用上格式相同

npm update [packageName] [-g] [--save-dev]           

如果你要更新所有的插件的話

npm update [--save-dev]           

搜尋子產品

當我們釋出一個自己建立的子產品或包時，就要去搜尋遠端倉庫是否已經有存在相關的命名。

npm search <packageName>           

npm配置

如果想檢視目前npm的配置參數，可以使用一下指令

npm config list -l           

通過 

config

 指令也可以自定義某些npm的功能參數。

其中常用的有，重新設定代理，重新設定子產品的下載下傳位址。

例如因為公司的防火牆原因，無法完成任何子產品的安裝，這個時候設定代理可以解決

npm config set proxy=http://proxy.com           

又如國内的網絡環境問題，某官方的IP可能被和諧了，幸好國内有好心人，搭建了鏡像，此時我們簡單設定鏡像

npm config set registry="http://r.cnpmjs.org"           

最後也可以安裝的淘寶鏡像包管理器

npm install cnpm -g --registry=https://registry.npm.taobao.org           

檢視版本

npm -v           

幫助

可以通過 help 來檢視相關指令的文檔

npm help list           

package

package.json

 是一個JSON檔案，它既可以用于說明目前子產品的相關配置資訊，也可以指明我們安裝時所需要的依賴子產品。

建立package.json

npm init           

通過引導的方式在目前子產品下建立 

package.

 檔案。

npm init --yes           

如果不想根據引導建立 

package.json

 也可以使用該指令直接建立。

package.json的标準格式

一個标準的 

package.json

 檔案内容如下：

{
  "name": "st",
  "version": "1.0.1",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "rimraf": "2.6.1"
  },
  "scripts": {
    "preinstall": "echo here it comes!",
    "postinstall": "echo there it goes!",
    "start": "node index.js",
    "test": "tap test/*.js"
  },
  "keywords": [],
  "author": {
    "name": "gtshen",
    "email": "[email protected]"
  },
  "contributors": [{
    "name": "",
    "email": ""
  }, {
    "name": "",
    "email": ""
  }, {
    "name": "",
    "email": ""
  }],
  "engines": {
    "node": "0.10.x"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/shenguotao2015/st.git"
  },
  "bugs": {
    "url": "",
    "email": ""
  },
  "homepage": "http://st.cn"
}           

name

name用于定義子產品或者包名，它是package.json中非常重要的屬性之一。

如果你向npm送出這個子產品時，你必須保證name的名稱是唯一的。

version

用于設定子產品的版本号。在package.json中最重要的就是name和version字段了。

description

描述内容，值為一個字元串。用于友善 

npm search

 進行搜尋。

keywords

關鍵字。值可以為一個字元串也可以是一個數組。用于友善 

npm search

keywords:'keywords content' 
keywords:['k1','k2']           

homepage

項目官網的url。

目前在我們的項目目錄中隻安裝了兩個子產品，不過包的數量會增長的非常快。手動安裝依賴是非常不明智的，是以可以在項目目錄中用 package.json 檔案來管理它們。通過 nmp init 指令可以建立。

bugs

用于指明回報bug的方式。

license

許可證，用于說明該子產品受到何種保護以及授權人具有哪些權利。

關于選擇何種許可證，可以見下圖：

author

作者

contributors

協助開發的相關人員，值是一個數組。

repository

指定一個代碼存放位址。

main

用于指定該子產品的入口的檔案，這個入口檔案一般都是子產品根目錄下的js檔案，例如：

index.js

。

後期，在我們使用該子產品時，例如:

require('st')

就是加載的這個 

index.js

檔案。

{
    "name":"st",
    "version":"1.0.1",
    "main":"index.js"
}           

engines

engines用于說明該子產品需要依賴的node版本。

scripts

scripts 可以為目前子產品自定義一些腳步動作或指令。

{
    "scripts": {
        "preinstall": "echo here it comes!",
        "postinstall": "echo there it goes!",
        "start": "node index.js",
        "test": "tap test/*.js"
      }
}           

如上所示，現在就可以在該子產品内執行如下指令

node postinstall
node start
node test           

dependencies

dependencies是一個對象，用于聲明該子產品所依賴的子產品清單，其中key是子產品的名稱，value則是子產品的版本。

其中版本常用的書寫格式有：

version 精确比對版本
>version 必須大于某個版本
>=version 大于等于
<version 小于
<=versionversion 小于
~version "約等于"，具體規則詳見semver文檔
^version "相容版本"具體規則詳見semver文檔
1.2.x 僅一點二點幾的版本
range1 || range2 範圍1和範圍2滿足任意一個都行           

{
    "dependencies":{
         "foo":"3.0.1"
        ,"baz" : ">1.0.2 <=2.3.4"
        ,"boo" : "2.0.1"
        ,"qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"
        ,"til" : "~1.2"
        ,"two" : "2.x"
    }
}           

devDependencies

它的功能與 

dependencies

 相同。

不同的是 

devDependencies

 隻用于聲明開發環境的依賴清單，而

dependencies

則是用于聲明正式環境的依賴清單。

如果有人想要下載下傳并使用你的子產品，也許他們并不希望或需要下載下傳一些你在開發過程中使用的額外的測試或者文檔架構。在這種情況下，最好的方法是把這些依賴添加到devDependencies屬性的對象中。

依賴下載下傳

總的來說，package.json中用于儲存子產品的配置資訊，其中最重要的就是 

name

 與 

version

 這兩者的組合用于唯一标示該子產品。其次，如果子產品有依賴其它子產品的情形，則可以按照所依賴的類型，比如開發環境與正式環境的不同有區分的将資訊寫入 

devDependencies

 和 

dependencies

 中。

同理，如果有人使用到了你的子產品，那麼他在本地執行：

npm install            

則可以直接将 

devDependencies

 中的依賴下載下傳到本地，如果在正式環境，他可以使用

npm install -production           

将

dependencies

 中的資訊下載下傳到正式環境中。

gulp

1.簡介

gulp屬于前段自動化工具中的建構工具，我們使用gulp主要用于資源的壓縮合并與優化，除此之外gulp還具有一些很實用的功能，比如 sass的編譯、本地WEB服務的搭建、浏覽器自動重新整理以及檔案的更改監聽。

2.概念

gulp的核心概念是 "流"。你可以了解成類似于一個流水線作業，檔案流在被管道方法(pipe)接收後可以被其回調函數進行操作處理，操作完成後，可以依次被下個管道方法接收處理，是以管道方法就好比是每個作業的環節。

gulp這種“流”的操作相比 

grunt

 等其它建構工具，要大大的減少了頻繁的 

I/O

 操作，并且在代碼的書寫上也可以用與 

Jquery

 相同的鍊式寫法。

3.特點

易于使用

通過代碼優于配置的政策，gulp 讓簡單的任務簡單，複雜的任務可管理。           

建構快速

利用 Node.js 流的威力，你可以快速建構項目并減少頻繁的 IO 操作。           

易于學習

通過最少的 API，掌握 gulp 毫不費力，建構工作盡在掌握：如同一系列流管道。           

插件高質

gulp 嚴格的插件指南確定插件如你期望的那樣簡潔高質得工作。           

4. 準備

在使用gulp之前，我們一般會在本地建立好要開發項目的目錄。

建立好項目後，在該項目的根目錄，我們可以自己選擇是否要建立 

package.json

 檔案，如果你打算将自己配置好的gulp功能與它人分享，那麼便需要建立該檔案。通過 

npm init --yes

 直接建立一個 

package.json

 的檔案。然後我們編輯好基本的 

name

version

 既可。

這裡我貼出自己平常開發時的項目目錄結構：

|- productName
    |- assets
        |- css
        |- js
        |- images
        |- index.html
    |- productName
        |- css
        |- js
        |- images
        |- index.html
    |- node_modues
    |- gulpfile.js
    |- package.json           

其中 

assets

 是我們開發時使用的目錄，而項目裡面相同的 

productName

 則是我們通過gulp編譯的目錄或者是叫分發目錄。

再貼出 

package.json

 檔案的内容

{
    "name":"productName",
    "version":"v1.0.0"
}           

安裝gulp

gulp的安裝要經過兩個步驟：

• 全局安裝：用于可使用gulp指令。
• 本地安裝：用于載入gulp的依賴以及工具包。

首先全局安裝：

npm install -g           

此時gulp便會被安裝到 

"C:\\Users\\Administrator\\AppData\\Roaming\\npm\gulp

想驗證是否安裝完成，在終端中執行下面的指令：

gulp -v           

看看有沒有列印出對應的資訊，如果有，說明gulp安裝成了，現在可以調用gulp的指令。

最後，我們再到自己項目中，然後本地安裝gulp

cd d:/work/gulp
npm install gulp --save-dev           

本地此時便會建立一個 

node_modules

 的檔案夾，檔案夾裡面存放的就是gulp本身以及它所依賴的其它子產品。

gulpAPI

gulp的API很少,是以我們可以很輕松快速的掌握gulp的基本用法。

src

格式: gulp.src(sources,options)

功能：讀取源檔案，并預設将檔案以流的形式載入，供管道方法(pipe)使用加工。

說明：

sources:資源檔案的路徑，可以是字元串，也可以是包含多個資源檔案的數組。

示例:

gulp.src('assets/**/*.js')
gulp.src(['assets/**/*.js','!assets/js/index.js']);           

仔細的你想必已經發現了上面的url值，有 

*,!

 等符号，這些符号叫做 “通配符”，在 

uninx

時代就已經沿用在檔案管理系統中，其功能與含義與正則也很相似，具體的含義與功能如下：

1. *.scss：号比對目前目錄任意檔案，是以這裡.scss比對目前目錄下所有scss檔案
2. */.scss：比對目前目錄及其子目錄下的所有scss檔案。
3. !not-me.scss：！号移除比對的檔案，這裡将移除not-me.scss
4. *.+(scss|sass)：+号後面會跟着圓括号，裡面的元素用|分割，比對多個選項。這裡将比對scss和sass檔案。

options: 

.src()

 方法的附加選項。值是一個對象，具體參數如下：

屬性	預設值	說明
buffer	false	值為false表示目前的檔案以流的形式載入，如果為true，則以buffer的方式存儲
read	true	是否讀取檔案，如果值為false 則不讀取資源檔案，file.contents 傳回null
base	string	用于設定與 dest 相結合的輸出目錄。

注意：

buffer

stream

 的檔案表現方式有很大的不同，

stream

 是在 

buffer

的基礎上再次封裝，它不要求一次性的讀取與裝載檔案，而是以流的形式處理，而

buffer

則類似于一種對象結構的數組，用于存儲目前檔案的所有二進制資料，當然，這些知識理論都是屬于nodeJS的，對于我們這些非背景的gulp使用者，應當認識到gulp的插件在對檔案的處理上，分為 

buffer

stream

 兩種形式既可。

base 的值用于與 

gulp.dest()

 結合使用确定輸出檔案的位置，我們知道 

gulp.src

 用于輸入檔案，而 

gulp.dest

 用于輸出檔案，在預設狀态下，base 的值就是 

gulp.src

 中資源檔案路徑中通配符之前的部分，當我們輸出檔案時 

gulp.dest(path)

 dest 就會讓 path 去覆寫 base的值，這樣便能确定輸出檔案的位置了。

可見示例:

如果現在 

script/js/

 目錄下有一個index.js檔案。那麼：

gulp.src('script/js/*.js') // 此時base的值預設的就是 script/js/
.pipe(gulp.dest('build'))  // 輸出時，build會覆寫base，那麼輸出的位置就是 build/index.js

//效果如下相同
gulp.src('script/**/*.js',{'base':'script/js/'})
.pipe(gulp.dest('build'))           

如果是這樣呢？

gulp.src('script/**/*.js',{'base':'script'})  //此時base的值為script
.pipe(gulp.dest('build')) //當用 build 覆寫 base時，輸出的位置也就是 build/js/index.js           

dest

格式: gulp.dest(path,options)

功能： 将管道(pipe)中的檔案流以檔案的形式重新寫入到指定的目錄。如果該目錄不存在，則會建立目錄

path：要輸出的路徑。值可以是單純的路徑url，也可以是一個處理函數(function)

options：

gulp.dest()

 方法的的選項參數，值是一個對象object。

cwd		輸出目錄的 cwd 參數，隻在所給的輸出目錄是相對路徑時候有效。
mode	string:0777	八進制權限字元，用以定義所有在輸出目錄中所建立的目錄的權限。

task

格式: gulp.task(taskName[,deps],fn)

功能： 建立gulp任務，執行相應功能。gulp建立的任務，可以在指令行中使用 

gulp taskName

 形式執行。如果 taskName 為 default，那麼則可以直接運作 

gulp

taskName:任務名稱。

deps：一個包含任務清單的數組，這些任務會在你目前任務運作之前完成。

fn：任務的處理函數。

watch

格式： gulp.watch(sources,callback)

作用： 監視檔案，并且可以在檔案發生改動時候做一些事情。

sources：檔案檔案的路徑url，取值可以是String，也可以是儲存多個資源檔案路徑的數組Array。其功能就是監控指定檔案的更改。

callback:檔案更改時執行的操作，值可以是預先定義好的task，也可以時自定功能的function。

gulp.watch(config.src + '/**/*.+(scss|sass|html|css|js)',['build']);           

gulpfile

gulpfile.js

 裡面存儲的就是執行gulp時運作的主要邏輯。

sass編譯

var gulp = require(gulp),
    sass = require('gulp-sass');

gulp.task('sass', function() {
    return gulp.src('assets/**/*.+(scss|sass)')
        .pipe(sass({
            "outputStyle": "expanded"
        }))
        .pipe(gulp.dest('gulp-test'))
});           

web伺服器與自動重新整理

var gulp = require('gulp'),
    browserSync = require('browser-sync');
    
gulp.task('browserSync', function() {
    browserSync({
        "server": {
            "baseDir": config.dest
        }
    });
});
gulp.task('reload', function() {
    browserSync.reload();
});           

監聽檔案改動

gulp.task('watch',function(){
    gulp.watch('assets/**/*.+(scss|sass)',['sass']);
})           

CSS壓縮

var gulp = require('gulp'),
    cleanCSS = require('gulp-clean-css');

gulp.task('cssMini', function() {
    return gulp.src('assets/css/*.css')
        .pipe(cleanCSS({
            advanced: false, 
            compatibility: 'ie7',
            keepBreaks: false, 
            keepSpecialComments: '*' 
        }))
        .pipe(gulp.dest('gulp-test/css/'))
});           

advanced: false, //類型：Boolean 預設：true [是否開啟進階優化（合并選擇器等）]

compatibility: 'ie7', //保留ie7及以下相容寫法 類型：String 預設：''or'*' [啟用相容模式； 'ie7'：IE7相容模式，'ie8'：IE8相容模式，'*'：IE9+相容模式]

keepBreaks: false, //類型：Boolean 預設：false [是否保留換行]

keepSpecialComments: '*' //保留所有特殊字首當你用autoprefixer生成的浏覽器字首，如果不加這個參數，有可能将會删除你的部分字首

JS壓縮

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('jsMini', function() {
    return gulp.src('assets/js/*.js')
        .pipe(uglify({
            mangle: true, //類型：Boolean 預設：true 是否修改變量名
            compress: true, //類型：Boolean 預設：true 是否完全壓縮
            preserveComments: 'all' //保留所有注釋
        }))
        .pipe(gulp.dest('gulp-test/js/'))
})           

說明:

mangle: 用于選擇是否壓縮變量名，如果為false則不壓縮變量名，預設值為true。它也可以接收一個對象作為值，來自動以過濾那些指定的變量名。

{"mangle": {except: ['require' ,'exports' ,'module' ,'$']}}

圖檔壓縮優化

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache');
    
gulp.task('imageMini', function() {
    return gulp.src('assets/images/*.+(jpg|png|svg|gif)')
        .pipe(cache(imagemin()))
        .pipe(gulp.dest('gulp-test/images/'))
});           

打版本号

var gulp = require('gulp'),
    rev = require('gulp-rev');
    
gulp.task('rev', function() {
    return gulp.src('assets/**/*.*')
        .pipe(rev())
        .pipe(gulp.dest('gulp-test'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('gulp-test/rev/')) //生成配置檔案，用于記錄原檔案與打版本後的對應關系，友善在以後再html中進行連接配接的替換。
})           

合并、壓縮、打版本号、替換連結

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector'),
    notify = require('gulp-notify'),
    cleanCSS = require('gulp-clean-css');

//合并、壓縮、打版本号
gulp.task('concat', function() {
    return gulp.src(['assets/css/index.css', 'assets/css/style.css'])
        .pipe(concat('main.min.css')) //合并為main.min.css
        .pipe(cleanCSS()) //壓縮mainCSS
        .pipe(rev({
            'replaceReved':true,
            'dirReplacements':{
                'css': 'css',
                'js': 'js',
                'img': 'img'
            }
        })) //為main.min.css 打版本
        .pipe(gulp.dest('gulp-test/css/')) //生成到指定目錄
        .pipe(rev.manifest()) //建立rev配置檔案
        .pipe(gulp.dest('gulp-test/css/rev/')) //将配置檔案生成到指定目錄。
        .pipe(notify({
            message: 'concat minicss rev complate'
        }))
});

//替換資源路徑
gulp.task('revCollector', function() {
    return gulp.src(['assets/*.html', 'gulp-test/css/rev/*.json']) //指定要替換連接配接的檔案以及對應的配置檔案。
        .pipe(revCollector()) //開始替換
        .pipe(gulp.dest('gulp-test')) //重新生成替換好練級後的檔案。
});           

replaceReved：設定replaceReved辨別, 用來說明模闆中已經被替換的檔案是否還能再被替換,預設是false

dirReplacements：辨別目錄替換的集合, 因為gulp-rev建立的manifest檔案不包含任何目錄資訊, 上面的例子将得到下面的替換結果

"/css/style.css" => "/dist/css/style-1d87bebe.css"
"/js/script1.js" => "/dist/script1-61e0be79.js"
"cdn/image.gif"  => "//cdn8.example.dot/img/image-35c3af8134.gif"           

實際上就是将你指定的目錄資訊與 

manifest.json

 檔案中的對應資訊進行拼接，實作可自定義目錄。

替換連結-注釋法

此種方式實作的功能與上面相同，但是它有一個特點，那就是無需生成 

manifest.json

 的對應檔案，也不需要要是用 

collector

 去更改檔案中的資源名稱或者是路徑，但是卻需要開發者在html或者其他頁面檔案中，通過特定的注釋格式，去說明合并的類型以及要合并到那個檔案中。

其注釋格式如下：

<!--build:<type> path/fileName -->
...
<!--endbuild-->           

其中

type

就是編譯的類型，主要有css，js，而

path

則是路徑參數，

fileName

 就是最終合并到的新檔案。

具體示例：

<!--build:css css/main.min.css -->
    <link type="stylesheet" href="a.css" />
    <link type="stylesheet" href="b.css" />
    <link type="stylesheet" href="c.css" />
<!--endbuild-->


<!--build:js js/main.min.js -->
    <script src="a.js" ></script>
    <script src="b.js" ></script>
    <script src="c.js"></script>
<!--endbuild-->           

具體的gulp代碼：

var gulp = require('gulp'),
    useref = require('gulp-useref'),
    gulpIf = require('gulp-if'),
    cleanCSS = require('gulp-clean-css'),
    uglify = require('gulp-uglify');
    
gulp.task('useref', function() {
    return gulp.src('assets/**/*.html')
        .pipe(useref())
        .pipe(gulpIf('*.css', cleanCSS()))
        .pipe(gulpIf('*.js', uglify()))
        .pipe(gulp.dest('gulp-test'))
});           

那麼，如果你隻想壓縮，而并不想合并，那該怎麼辦呢？

其實很簡單

//隻壓縮不合并
<!--build:css css/a.min.css -->
    <link type="stylesheet" href="a.css" />
<!--endbuild-->

//即壓縮也合并
<!--build:css css/a.min.css -->
    <link type="stylesheet" href="b.css" />
    <link type="stylesheet" href="c.css" />
<!--endbuild-->           

删除

gulp的删除一般用于當我們生成新的檔案時，去清除舊的檔案。

實際上再我們重新生成檔案時，基本上都可以自動覆寫。

gulp.task('clean',function(){
    del(['gulp-test/images/','!gulp-test/css/'])
})           

定義運作隊列

gulp的任務都是異步執行的，一般我們無法控制執行順序，但是通過使用requence子產品，我們就可以很輕易的控制gulp任務的執行順序。

var gulp = require('gulp'),
    notify = require('gulp-notify'),
    sequence = require('run-sequenc');
    
gulp.task('task1',function(){
    notify({message: 'task - one'})
})
gulp.task('task2',function(){
    notify({message: 'task - two'})
})
gulp.task('task3',function(){
    notify({message: 'task - thr'})
})

gulp.task('sequence',function(){
    sequence('task1','task2','task3');
})
           

打通管道

我們知道gulp中檔案以“流”的形式在管道(pipe)中傳輸，如果有個需求需要讀取檔案的相關資訊以及對檔案進行某些操作，那麼打通管道，讀取檔案就是我們必須要進行的工作。

之前我們有一個插件 

gulp-if

 它也有類似的功能，但是它已經被固化，隻能用來判斷格式，而這裡我們可以通過 

gulp-tap

這個插件可以實作更自由化的管道操作。

var gulp = require('gulp'),
    tap = require('gulp-tap'),
    path = require('path');

gulp.task('tap',function(){
    gulp.src('assets/**/*.html')
    .pipe(tap(function(file,t){
        console.log(path.extname(file.path)); //檔案擴充名
        console.log(path.basename(file.path)); //檔案名。
    }))
})           

使用sublime運作gulp

在平常開發中，如果我們一邊在編輯器中編寫代碼，另一邊還要打開終端（指令行工具）然後去執行gulp任務，這種方式效率肯定是很低的，使用上也有斷開感，為了提高效率以及連續性，我們可以直接在編輯器中運作gulp任務。這裡以 

sublime

為例來加以說明。

首先，打開 sublime 快捷鍵 

ctrl+shift+p

 選擇 

install package

 然後輸入 

Gulp

 安裝Gulp 插件。

接着，

首選項 - 浏覽器插件目錄 - Gulp

 在其中找到 

Side Bar.sublime-menu

 檔案，将以下内容拷貝覆寫進去

[
    {
        "caption": "Gulp",
        "children":
        [
            { "caption": "運作預設的任務", "command": "gulp", "args": { "task_name": "default", "paths": [] } },
            { "caption": "運作任意的任務", "command": "gulp_arbitrary", "args": { "paths": [] } },
            { "caption": "運作最後的任務", "command": "gulp_last", "args": { "paths": [] } },
            { "caption": "-" },
            { "caption": "列出要運作的任務","command": "gulp", "args": { "paths": [] } },
            { "caption": "删除緩存","command": "gulp_delete_cache", "args": { "paths": [] } },
            { "caption": "結束所有的gulp任務", "command": "gulp_kill" },
            { "caption": "結束特定的gulp任務", "command": "gulp_kill_task" },
            { "caption": "-" },
            { "caption": "插件清單","command": "gulp_plugins" }
        ]
    }
]           

這樣便可以漢化 gulp 的側邊欄菜單。

最後，打開我們本地具有gulp的項目目錄，在sublime的側邊欄找到 

gulpfile.js

檔案，并對其右擊選擇 

Gulp

選項，在其中便可以選擇執行gulp相應的指令。

其中常用的選項有：

運作預設的任務：運作 default 任務
運作任意的任務：自己輸入相應的gulp任務。
列出要運作的任務：手動選擇要執行的gulp任務。
插件清單：可以看到與gulp相關的插件子產品。           

使用sublime執行gulp任務，一定要確定具有 

nodeJS

 環境，其次就是本地存在 

gulpfile.js

如果你感覺右擊很麻煩，也可以自己定義快捷鍵。

依次打開 

首選項

 - 

快捷鍵設定

Default (Windows).sublime-keymap

，在其中放入以下配置代碼。

{
    "keys": ["ctrl+alt+p"],
    "command": "gulp_plugins"
}, {
    "keys": ["ctrl+alt+o"],
    "command": "gulp",
    "args": {
        "paths": []
    }
}, {
    "keys": ["ctrl+alt+;"],
    "command": "gulp_last",
    "args": {
        "paths": []
    }
}, {
    "keys": ["ctrl+alt+h"],
    "command": "gulp_delete_cache",
    "args": {
        "paths": []
    }
}, {
    "keys": ["ctrl+alt+l"],
    "command": "gulp_arbitrary",
    "args": {
        "paths": []
    }
}, {
    "keys": ["ctrl+alt+k"],
    "command": "gulp_kill"
}, {
    "keys": ["ctrl+alt+j"],
    "command": "gulp",
    "args": {
        "task_name": "default",
        "paths": []
    }
},           

最後

目前gulp在公司裡面也剛開始應用，這次學習也隻是掌握了gulp的常用功能，雖然可以滿足基本的工作需求，但是我個人感覺還缺少了一個統一可配置的 

gulpfile.js

檔案，我打算等以後随着gulp使用的更頻繁也更為熟練的時候，自己封裝一個可以統一應用在任何工作上的gulpfile檔案。

參考資料：

https://www.w3ctrain.com/2015/12/22/gulp-for-beginners/

http://www.cnblogs.com/fengyuqing/p/5332112.html

http://jingyan.baidu.com/article/48206aeaa42b63216bd6b372.html