gulp前端自動化環境搭建詳解

 

1、安裝 nodejs

   Grunt和全部grunt插件都是基於nodejs來運行的， https://nodejs.org/

   安裝完成以後在終端 node -v 查看安裝版本  npm -v 查看npm版本

   

   選裝cnpm

1.一、說明：由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常， 若是npm的服務器在中國就行了，因此咱們樂於分享的淘寶團隊幹了這事。來自官網： 「這是一個完整 npmjs.org 鏡像，你能夠用此代替官方版本(只讀)，同步頻率目前爲  10分鐘 一次以保證儘可能與官方服務同步。」；

1.二、官方網址：http://npm.taobao.org；

1.3安裝：命令提示符執行npm install cnpm -g  --registry=https://registry.npm.taobao.org；  注意：安裝完後最好查看其版本號 cnpm -v或關閉命令提示符從新打開，安裝完直接使用有可能會出現錯誤；

 注：cnpm跟npm用法徹底一致，只是在執行命令時將npm改成cnpm（如下操做將以cnpm 代替npm）。

 

二、全局安裝gulp

   安裝方式：cnpm install gulp -g   

   執行gulp -v查看安裝版本  

   

 

 

三、建立網站項目

   

 

   建立項目名稱「gulp」子目錄爲：src（源文件）dist（目標文件）gulpfile.js(gulp任務配置文件) package.json（開發依賴項）

   package.json 基礎文件編寫

   

 

 

四、給項目安裝gulp

   安裝方式：cnpm install gulp -save-dev 回車（注意package.json文件內容變化）

   

 

   項目文件「gulp」下回自動生成node_modules文件夾，這裏就是存儲gulp源文件的地方。

 

五、gulpfile.js 基礎文件編寫

    

 

 

六、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

        任務配置信息以下：

 

 

 

七、如上所示，「watch」任務中所執行的任務爲，當編寫程序過程當中按下ctrl+s保存以後所執行的任務

   7.1、若是文件變更保存，則執行任務

 

   7.2、若是文件變更保存，則執行任務

 

   7.3、若是所監控的文件有所改動執行相應的任務以後，在從新加載中的html文件，使之頁面變更。

 

 

gulpfile.js文件全貌

 

package.json文件全貌