Gulp入門與解惑

Gulp簡介

Gulp.js 是一個自動化構建工具,開發者可使用它在項目開發過程當中自動執行常見任務。Gulp.js是基於 Node.js構建的,利用Node.js流的威力,你能夠快速構建項目。

安裝Gulp

一、全局安裝Gulp:

npm install --global gulp

二、做爲項目的開發依賴（devDependencies）安裝：

npm install --save-dev gulp

小貼士

使用過Gulp的人會碰到一個問題，明明全局已經安裝了Gulp和Gulp的插件，可是在項目中執行Gulp命令會出現以下錯誤：

Local gulp not found in ~\your-path

這是爲何呢？

其實這是Gulp故意設計的，緣由是爲了版本和依賴的控制。意思就是當別人Fork你代碼，或者你過段時間拷貝到別的電腦上再gulp的時候，能控制gulp的版本
和其餘插件的版本。

同時，這也是爲了方便你在不一樣的項目中使用不一樣版本的gulp，若是僅在全局裝一個 gulp 全部的項目就只能使用同一個版本的 gulp 了。

全局安裝用於在命令行中使用gulp命令執行gulp的任務，本地安裝是因爲每一個gulpfile.js都依賴gulp，該文件中依賴的gulp會直接從項目的node_module文件去找。
本地安裝並記錄在package.json的devDependencies下，能保證因此引用你項目的人都能用同個版本的gulp。另外，使用package.json中scripts來執行gulp命令
的話能夠無需安裝全局包。

在這裏能夠看看你們的討論：
Why do we need to install gulp globally and locally?

Npm的包管理

當咱們建立一個項目時，咱們要如今項目中建立一個package.json文件，那麼這個文件時幹什麼用的呢？

從字面意思和文件名稱上看，咱們就能夠知道是包管理的配置文件。下面咱們來講說這個配置文件如何建立和使用！

npm init建立package.json

對於不少剛開始學習gulp的人來講，對package.json一無所知，更比說建立了；網上有不少的模板，可是咱們不能老是依賴於模板吧，萬一哪天斷網呢？

其實，官網已經想到了這一點，咱們能夠經過如下命令來建立：

nmp init

會出現如下提示：

這裏讓咱們輸入項目名稱，咱們輸入咱們的項目名稱，好比myapp。而後回車繼續...，
後面會讓咱們輸入項目的版本(version),描述(description),入口(main)等信息。

Package.json 屬性說明

• name - 包名。
• version - 包的版本號。
• description - 包的描述。
• homepage - 包的官網 url 。
• author - 包的做者姓名。
• contributors - 包的其餘貢獻者姓名。
• dependencies - 依賴包列表。若是依賴包沒有安裝，npm 會自動將依賴包安裝在 node_module 目錄下。
• repository - 包代碼存放的地方的類型，能夠是 git 或 svn，git 可在 Github 上。
• main - main 字段是一個模塊ID，它是一個指向你程序的主要項目。就是說，若是你包的名字叫 express，而後用戶安裝它，而後require("express")。
• keywords - 關鍵字

有時候，咱們fork別的代碼時，會看到devDependencies這個配置項，關於devDependencies這個配置項，咱們下面來專門講他。
其實這個配置項是npm來管理的，當咱們使用npm install命令來安裝一些插件時，npm會自動的更新package.json加入依賴項。下面咱們來實際操做一下，
首先，咱們在D盤(哪一個盤隨意)下建個文件夾，好比gulpdemo，而後，"開始" -> "運行" -> "cmd"，打開DOS命令窗口，執行cd命令，將路徑定位到這個目錄下。
既然package.json是管理依賴包的，那麼咱們第一步固然是添加package.json了。下面是具體的步驟：

1. 在DOS窗口，輸入npm init命令：

nmp init

而後，按照操做，一次輸入配置信息，最後生成的package.json大概以下：

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "My web app",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "yunfeifei",
  "license": "ISC"
}

這個每一個人輸入的信息不一樣，會或多或少少幾項，這個不要緊，咱們能夠參照上面的配置項說明來根據狀況具體修改配置。

1. 安裝Gulp

上面咱們已經說過，雖然已經全局安裝過gulp，可是每一個項目仍是要基於項目依賴安裝的，咱們執行如下命令進行安裝：

npm install --save-dev gulp

執行完命令，安裝成功後，咱們再來看看package.json文件，發現裏面多了devDependencies這個配置:

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "My web app",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "yunfeifei",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

依賴標明瞭模塊名稱和版本號，這樣方便之後別人使用，具體的使用方法隨後會說明。

當咱們發佈項目的時候，並不會把gulp的模塊都打包發佈，只是發佈咱們的源代碼和一些必要的配置文件。
就如.Net和Java的包管理工具同樣，只生成一個配置文件，後面再由包管理工具進行解析、還原。

到這裏，關於package.json的建立和使用相信你們已經清楚了，下面咱們來介紹一下gulp經常使用的一些插件和使用方法。

Gulp經常使用插件和使用簡介

Gulp經常使用的一些功能就是文件拷貝、文件重命名(gulp-rename)、文件合併(gulp-concat)、文件拷貝(gulp-copy)、文件刪除(del)、文本替換(gulp-replace)、
js語法檢測(gulp-jshint)、js壓縮(gulp-uglify)、html壓縮(gulp-htmlmin)、css壓縮(gulp-clean-css)和圖片壓縮(gulp-imagemin)。

下面，寫一個例子，實現js的語法檢測和壓縮合並功能，其餘的插件和功能，你們能夠經過網上找資料進行學習。

這個例子中咱們要用到一下模塊:

• js語法檢測(gulp-jshint)
• js壓縮(gulp-uglify)
• 文件合併(gulp-concat)
• 文件重命名(gulp-rename)

咱們執行如下命令來安裝這些模塊：

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

安裝成功後，咱們在文件夾下新建gulpfile.js和js文件夾，目錄結構以下：

gulpfile.js又稱gulp入口文件，主要用來進行任務配置，告訴gulp須要進行哪些操做。

下面，咱們修改gulpfile.js，寫入如下代碼：

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    jshint = require('gulp-jshint');

//語法檢查
gulp.task('jshint',function () {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

//壓縮，合併 js
gulp.task('minifyjs', function() {
    return gulp.src('js/*.js')      //須要操做的文件
        .pipe(concat('main.js'))    //合併全部js到main.js
        .pipe(gulp.dest('js'))       //輸出到文件夾
        .pipe(rename({suffix: '.min'}))   //rename壓縮後的文件名
        .pipe(uglify())    //壓縮
        .pipe(gulp.dest('js'));  //輸出
});

//默認命令，在cmd中輸入gulp後，執行的就是這個任務(壓縮js須要在檢查js以後操做)
gulp.task('default',['jshint'],function() {
    gulp.start('minifyjs'); 
});

代碼中都加了註釋，相信你們都能看的懂，具體的語法和命令，你們能夠去看看Gulp官網的API文檔。

而後，咱們在js文件中新建兩個js文件，index.js和common.js,分別寫入一些代碼，以下：

index.js

alert("hello,world");
function ShowAlert() {
    alert("Hello,world!");
}

js和common.js

function ShowMessage() {
    alert("Hello,this is a message!");
}

而後，咱們在DOS窗口執行gulp命令，如圖：

從圖中咱們能夠看到，先執行了
執行完成後，咱們會發現js目錄中，多出了兩個js文件，分別是main.js和main.min.js,其中main.js很明顯是index.js和common.js合併後的內容。
main.min.js是main.js的壓縮版。

開發環境中，咱們確定是要把生成目錄和源代碼目錄分開的，這個爲了減小操做，下降複雜度，讓你們容易理解，因此只建了一個目錄。

npm 解析依賴項

上面咱們說了當咱們建立項目時，npm會自動添加依賴模塊配置到package.json，如今咱們來講一下，如何使用這個package.json來還原依賴項。

上面咱們寫的一個小例子，假如咱們要發給別人，咱們會發現，他們直接執行gulp命令來執行任務，是沒法執行成功的，提示缺乏某些模塊。

這個時候，咱們在DOS下進入這個目錄，執行npm install命令，npm就會讀取package.js裏面的依賴項，進行安裝，而後咱們就能夠正常的執行gulp命令，
執行gulp任務了。

npm安裝包失敗的問題

國內的話，執行npm install包時，會出現卡住的現象，這個你不要問我爲何，我不會告訴你的！

咱們可使用的淘寶的npm鏡像，用淘寶定製的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm：

淘寶 NPM 鏡像是一個完整 npmjs.org 鏡像，你能夠用此代替官方版本(只讀)，同步頻率目前爲 10分鐘 一次以保證儘可能與官方服務同步。

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

其用法是和npm同樣的。

第一次用博客園的Markdown編輯器，不是很順手，沒法加空白行，感受不爽的，點擊這裏Gulp入門與解惑

=================================================================================================

做者：雲霏霏

QQ交流羣：243633526

博客地址：http://www.cnblogs.com/yunfeifei/

Github地址：https://github.com/yunfeifei

Github博客：https://yunfeifei.github.io

聲明：本博客原創文字只表明本人工做中在某一時間內總結的觀點或結論，與本人所在單位沒有直接利益關係。非商業，未受權，貼子請以現狀保留，轉載時必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。

若是你們感受個人博文對你們有幫助，請推薦支持一把，給我寫做的動力。