一、gulp 的簡介

在細河等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都網(wǎng)站制作、網(wǎng)站設計、外貿網(wǎng)站建設 網(wǎng)站設計制作定制網(wǎng)站制作,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站設計,全網(wǎng)整合營銷推廣,外貿網(wǎng)站制作,細河網(wǎng)站建設費用合理。

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

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

            gulp 學習常用地址：

                    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ǎng)絡影響大，甚至還會遇到需要×××才能下載插件的情況，因此推薦安裝 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 項目的核心配置文件，用于設置將要執(zhí)行操作的項目名稱，版本，描述，依賴等信息，其格式為 json 數(shù)據(jù)格式。package.json 文件是每個 gulp 項目必備的文件，因此首要條件需要先創(chuàng)建這個文件。創(chuàng)建 package.json 文件方式有很多種：

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

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

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

2、全局安裝 gulp

            npm install -g gulp

3、在終端下通過命令進入到項目的根目錄

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

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

            npm install --save-dev gulp

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

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

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

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

            npm install gulp-rename --save-dev

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

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

1、提供 gulpfile.js 配置文件

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

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

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 插件的方法。知道方法了，然后你就可以參考官方文檔去使用你想要的插件。

六、總結

1、安裝 node.js 和 npm；

2、新建 package.json 文件；

3、全局和本地安裝 gulp；

4、安裝 gulp 插件；

5、新建 gulpfile.js 文件；

6、通過命令提示符運行 gulp 任務；

分享文章：gulp初探
網(wǎng)頁網(wǎng)址：http://www.aaarwkj.com/article36/ipdspg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿網(wǎng)站建設、網(wǎng)站排名、全網(wǎng)營銷推廣、建站公司、用戶體驗、服務器托管

廣告

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