1、安裝 nodejs
Grunt和所有grunt插件都是基於nodejs來運行的， https://nodejs.org/
安裝完成之后在終端 node -v 查看安裝版本 npm -v 查看npm版本
選裝cnpm
1.1、說明：因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常， 如果npm的服務器在中國就好了，所以我們樂於分享的淘寶團隊干了這事。來自官網： “這是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鍾 一次以保證盡量與官方服務同步。”；
1.2、官方網址：http://npm.taobao.org；
1.3安裝：命令提示符執行npm install cnpm -g --registry=https://registry.npm.taobao.org； 注意：安裝完后最好查看其版本號 cnpm -v或關閉命令提示符重新打開，安裝完直接使用有可能會出現錯誤；
注：cnpm跟npm用法完全一致，只是在執行命令時將npm改為cnpm（以下操作將以cnpm 代替npm）。
2、全局安裝gulp
安裝方式：cnpm install gulp -g
執行gulp -v查看安裝版本
3、創建網站項目
創建項目名稱“gulp”子目錄為：src（源文件）dist（目標文件）gulpfile.js(gulp任務配置文件) package.json（開發依賴項）
package.json 基礎文件編寫
4、給項目安裝gulp
安裝方式：cnpm install gulp -save-dev 回車（注意package.json文件內容變化）
項目文件“gulp”下回自動生成node_modules文件夾，這里就是存儲gulp源文件的地方。
5、gulpfile.js 基礎文件編寫
6、gulp插件的安裝
6.1、安裝css插件gulp-sass（編譯scss文件成css文件）
安裝方式：cnpm install gulp-sass --save-dev
任務配置信息如下：
6.2、安裝css插件 gulp-autoprefixer（為css文件添加瀏覽器前綴 例如：-webkit-）
安裝方式：cnpm install gulp-autoprefixer --save-dev
任務配置信息如上：
6.3、安裝css插件 gulp-clean-css （壓縮css文件）
安裝方式：cnpm install gulp-clean-css --save-dev
任務配置信息如下：
6.4、安裝插件 gulp-rename （重命名文件）
安裝方式：cnpm install gulp-rename --save-dev
任務配置信息如上：
6.5、安裝html插件 gulp-file-include （外部引入html文件）
安裝方式： cnpm install gulp-file-include --save-dev
任務配置信息如下：
6.6、安裝插件 browser-sync （監控文件有改動頁面隨之變動）
安裝方式：cnpm install browser-sync --save-dev
任務配置信息如下：
7、如上所示，“watch”任務中所執行的任務為，當編寫程序過程中按下ctrl+s保存之后所執行的任務
7.1、如果
文件變動保存，則執行任務
7.2、如果
文件變動保存，則執行任務
7.3、如果所監控的文件有所改動執行相應的任務之后，在重新加載
中的html文件，使之頁面變動。
gulpfile.js文件全貌
package.json文件全貌
