構建工具gulp之入門指南
構建工具gulp之入門指南
什麼是gulp
gulp是前端開發過程中對程式碼進行構建的工具，是自動化專案的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重複的任務能夠使用正確的工具自動完成；使用它，我們不僅可以很愉快的編寫程式碼，而且大大提高我們的工作效率。
gulp是基於Nodejs的自動任務執行器， 她能自動化地完成 javascript、coffee、sass、less、html/image、css 等檔案的測試、檢查、合併、壓縮、格式化、瀏覽器自動重新整理、部署檔案生成，並監聽檔案在改動後重復指定的這些步驟。
安裝gulp
一、安裝Node
node.js官方安裝包及原始碼下載地址：http://nodejs.org/download/
安裝步驟參考：http://www.runoob.com/nodejs/nodejs-install-setup.html
—————————————————————————————————
二、安裝gulp
步驟1
以全域性方式安裝gulp，開啟命令提示符執行下列命令（開啟方式：window + r 輸入cmd回車）輸入下面命令，然後回車：
npm install -g gulp
步驟2
全域性安裝gulp後，還需要在每個要使用gulp的專案中都單獨安裝一次。全域性安裝gulp是為了執行gulp任務，本地安裝gulp則是為了呼叫gulp外掛的功能。把目錄切換到你的專案資料夾中，然後在命令列中執行：
npm install gulp
步驟3
如果想在安裝的時候把gulp寫進專案package.json檔案的依賴中，則可以加上–save-dev：
npm install --save-dev gulp
這樣就完成了gulp的安裝，接下來就可以在專案中應用gulp了。
應用gulp
建立gulpfile.js檔案
gulp也需要一個檔案作為它的配置檔案，在gulp中這個檔案叫做gulpfile.js。新建一個檔名為gulpfile.js的檔案，然後放到你的專案目錄中。之後要做的事情就是在gulpfile.js檔案中定義我們的任務了。下面是一個最簡單的gulpfile.js檔案內容示例，它定義了一個預設的任務。
var gulp = require('gulp'); //本地安裝gulp所用到的地方
gulp.task('default',function(){//定義預設任務
console.log('My first gulp project!');
});
目錄結構如下：
執行任務，輸入命令：
gulp
預設的名為 default 的任務（task）將會被執行，在這裡，這個任務做的事情是在控制檯列印：My first gulp project!，效果如下：
總結
本文簡單的介紹一下gulp安裝及專案的建立過程，下一篇我將介紹gulp使用的主要API。