一、gulp 的簡介

主要從事網(wǎng)頁設(shè)計(jì)、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)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)絡(luò)營銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計(jì)、營銷、管理等多方位專業(yè)化運(yùn)作于一體，具備承接不同規(guī)模與類型的建設(shè)項(xiàng)目的能力。

       基于 node.js 流的自動(dòng)化構(gòu)建工具，可以快速構(gòu)建項(xiàng)目并減少頻繁的 I/0 操作，還可以利用 gulp 插件完成各種自動(dòng)化任務(wù)。gulp 是基于 node.js 的自動(dòng)任務(wù)運(yùn)行器，它能自動(dòng)化地完成 javascript/coffee/sass/less/html/p_w_picpath/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟。在實(shí)現(xiàn)上，它借鑒了 Unix 操作系統(tǒng)的管道（pipe）思想，前一級(jí)的輸出，直接變成后一級(jí)的輸入，使得在操作上非常簡單。通過本文，我們將學(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ò)影響大，甚至還會(huì)遇到需要×××才能下載插件的情況，因此推薦安裝 cnpm。cnpm 跟 npm 用法完全一致，只是在執(zhí)行命令時(shí)將 npm 改為 cnpm。

4、檢測 cnpm 是否安裝成功

       cnpm -v         // 顯示版本號(hào)即安裝成功

三、安裝 gulp

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

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

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

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

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

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

2、全局安裝 gulp

      npm install -g gulp

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

      cd F:\wamp\www\gulp       // 切換到項(xiàng)目根目錄

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

       npm install --save-dev gulp

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

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

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

6、在配置好 package.json 文件后也可以使用命令安裝 gulp 項(xiàng)目依賴的插件（package.json 文件會(huì)自動(dòng)更新）

       npm install gulp-rename --save-dev

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

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

1、提供 gulpfile.js 配置文件

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

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

2、最后在終端運(yùn)行 gulp

      gulp

五、gulp 常用插件介紹

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

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

六、總結(jié)

1、安裝 node.js 和 npm；

2、新建 package.json 文件；

3、全局和本地安裝 gulp；

4、安裝 gulp 插件；

5、新建 gulpfile.js 文件；

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

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

網(wǎng)站欄目：gulp初探-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://aaarwkj.com/article2/goeic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、關(guān)鍵詞優(yōu)化、網(wǎng)站建設(shè)、域名注冊(cè)、軟件開發(fā)、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)