一、gulp 的簡介

主要從事網(wǎng)頁設(shè)計、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、響應(yīng)式網(wǎng)站、程序開發(fā)、微網(wǎng)站、微信小程序等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)絡(luò)營銷經(jīng)驗，集策劃、開發(fā)、設(shè)計、營銷、管理等多方位專業(yè)化運作于一體，具備承接不同規(guī)模與類型的建設(shè)項目的能力。

       基于 node.js 流的自動化構(gòu)建工具，可以快速構(gòu)建項目并減少頻繁的 I/0 操作，還可以利用 gulp 插件完成各種自動化任務(wù)。gulp 是基于 node.js 的自動任務(wù)運行器，它能自動化地完成 javascript/coffee/sass/less/html/p_w_picpath/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟。在實現(xiàn)上，它借鑒了 Unix 操作系統(tǒng)的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。通過本文，我們將學(xué)習(xí)如何使用 gulp 來改變開發(fā)流程，從而使開發(fā)更加快速，高效。

       gulp 和 grunt 非常類似，但相比于 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更便捷地完成構(gòu)建。

       gulp 學(xué)習(xí)常用地址：

                    gulp 官方網(wǎng)址：https://gulpjs.com/

                    gulp 插件地址：https://gulpjs.com/plugins/

                    gulp 官方 API：http://www.gulpjs.com.cn/docs/api/

                    gulp 中文文檔：http://www.gulpjs.com.cn/docs/

                    淘寶 npm 鏡像站：http://npm.taobao.org/

二，安裝 node.js 和 npm（gulp 和 gulp 插件是通過 npm 安裝并管理的，npm 是 node.js 的包管理器）

1、node.js 下載地址

       http://www.nodejs.org/download/

2、安裝完成后，可通過命令行更新 npm 版本，保證是最新的

      npm  update npm  -g

PS：安裝好 node.js 之后，可以在你的終端中輸入“node -v”命令來查看 node.js 的版本，也順便檢測 node.js 是否安裝成功。

3、安裝 cnmp 命令（選裝）

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

PS：npm 安裝插件是從國外服務(wù)器下載，受網(wǎng)絡(luò)影響大，甚至還會遇到需要×××才能下載插件的情況，因此推薦安裝 cnpm。cnpm 跟 npm 用法完全一致，只是在執(zhí)行命令時將 npm 改為 cnpm。

4、檢測 cnpm 是否安裝成功

       cnpm -v         // 顯示版本號即安裝成功

三、安裝 gulp

1、提供 package.json 配置文件（package.json 文件用于保存項目元數(shù)據(jù)）

{
    "name": "demo",
    "version": "1.1.0",
    "description": "demo",
    "devDependencies": {
       "gulp": "^3.8.11"
    }
}

PS：package.json 是我們 gulp 項目的核心配置文件，用于設(shè)置將要執(zhí)行操作的項目名稱，版本，描述，依賴等信息，其格式為 json 數(shù)據(jù)格式。package.json 文件是每個 gulp 項目必備的文件，因此首要條件需要先創(chuàng)建這個文件。創(chuàng)建 package.json 文件方式有很多種：

          1、在終端通過“npm init”命令自動創(chuàng)建一個基本的 package.json 文件；

          2、從官網(wǎng)上復(fù)制或者下載一個 package.json 文件；

          3、手工創(chuàng)建一個 package.json 文件；

2、全局安裝 gulp

      npm install -g gulp

3、在終端下通過命令進(jìn)入到項目的根目錄

      cd F:\wamp\www\gulp       // 切換到項目根目錄

4、作為項目的開發(fā)依賴安裝（本地安裝）

       npm install --save-dev gulp

PS：全局安裝 gulp 是為了執(zhí)行 gulp 任務(wù)，本地安裝 gulp 則是為了調(diào)用 gulp 插件的功能。

5、執(zhí)行“npm install”命令安裝項目依賴的插件（安裝成功后會在項目根目錄下的  node_modules 文件夾里）

       npm install    // 此命令會批量安裝 package.json 文件內(nèi) "devDependencies" 中所有依賴插件

6、在配置好 package.json 文件后也可以使用命令安裝 gulp 項目依賴的插件（package.json 文件會自動更新）

       npm install gulp-rename --save-dev

PS：這種安裝一律是如下形式： npm install –save-dev，不僅會安裝指定的 插件，還會將插件信息自動添加到  package.json 文件的 "devDependencies" 區(qū)域中，且包括插件名稱，版本范圍。

四、gulpfile.js  文件的配置（package.json 和 gulpfile.js 文件都要放置到項目的根目錄下）

1、提供 gulpfile.js 配置文件

// 裝載 gulp 插件
var gulp = require('gulp');

// 自定義任務(wù)
gulp.task('default', function() {
       // 將你的默認(rèn)的任務(wù)代碼放在這
});

2、最后在終端運行 gulp

      gulp

五、gulp 常用插件介紹

gulp-uglify —— 壓縮 javascript 文件；
gulp-clean-css —— 壓縮 css 文件；
gulp-concat —— 合并文件；
gulp-jshint —— js 文件語法檢測；
gulp-sass —— sass 編譯；
gulp-less —— less 編譯；
gulp-autoprefixer —— 自動添加 css 前綴；
gulp-p_w_picpathmin —— 圖片壓縮；
gulp-livereload —— 瀏覽器自動刷新；
gulp-rename —— 文件重命名；

PS：以上這些插件，本套教程不會全部講到。但是隨著講解其中的一部分，我想你就能掌握使用 gulp 插件的方法。知道方法了，然后你就可以參考官方文檔去使用你想要的插件。

六、總結(jié)

1、安裝 node.js 和 npm；

2、新建 package.json 文件；

3、全局和本地安裝 gulp；

4、安裝 gulp 插件；

5、新建 gulpfile.js 文件；

6、通過命令提示符運行 gulp 任務(wù)；

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站欄目：gulp初探-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://weahome.cn/article/goeic.html