gulp的安裝和配置詳解

gulp的安裝和配置詳解

1.安裝node.js

 先下載一個node.js安裝包。

下載完成後雙擊便可。
打開cmd，命令行輸入node -v，回車輸出nodejs版本號，表示安裝成功。
命令行輸入npm -v,回車輸出npm版本號，表示安裝成功(nodejs集成了npm)。
因爲npm不穩定，下載速度慢，建議使用淘寶鏡像：npm install -g cnpm --registry=https://registry.npm.taobao.org,命令行輸入cnpm -v，回車輸出cnpm版本號，表示安裝成功。之後安裝就使用cnpm命令。

2.安裝gulp

命令行輸入cnpm install gulp -g,等待安裝，輸入gulp -v 回車輸出gulp版本號，表示安裝成功。

3.生成package.json文件

在本地新建一個文件夾，命令行切換到當前文件夾，我是在D盤下新建一個名爲gulptest的文件夾。

命令行輸入cnpm init,回車回車回車，生成package.json文件，內容以下：

4.本地安裝gulp以及咱們須要gulp的插件

如今開始步入正軌，本地安裝gulp以及咱們須要gulp的插件：
4.1本地安裝gulp
命令行輸入cnpm install gulp --save-dev
安裝完成後咱們能夠查看package.json的變化

package.json文件多出了

"devDependencies": {
        "gulp": "^3.9.1"
      }

"gulp": "^3.9.1"就是咱們剛本地安裝的gulp及版本號
可能有的人會問：爲何gulp安裝了兩次？
答：全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能。

繼續安裝咱們須要gulp的插件吧！

cnpm install gulp-less gulp-watch gulp-concat gulp-minify-css --save-dev

安裝完成後咱們能夠查看package.json的變化,又多出了幾個插件，暫時先安裝這幾個gulp插件。

5.配置gulpfile.js文件

在項目根目錄下建立gulpfile.js文件，記住必須名字必須是gulpfile。

• gulp-less 編譯less

將gulpfile.js配置成以下圖，再在命令行輸入gulp便可編譯less文件。

• gulp-watch 自動編譯less（監聽事件）

編譯less生成css文件算是完成了，但每次修改less以後都要手動執行一遍gulp命令，很明顯這是不科學的，因而須要一個監聽事件的插件，那就是gulp-watch，配置以下圖，命令行執行gulp-watch,當less發生改變時，一按下保存將自動執行gulp-watch命令進行編譯。咱們也能夠將testWatch任務放到默認任務裏執行gulp.task("default",["testLess","testWatch"]);命令行執行gulp便可。

但當less文件出現語法錯誤的時候，咱們習慣性的按下保存或是編譯器帶有自動保存功能時，watch可能會中斷，再次編譯時須要咱們再次輸入命令。解決的辦法是：引入gulp-plumber模塊（本地已安裝直接引入便可，如未安裝需cnpm install gulp-plumber --save-dev安裝到當前項目下），這樣就能處理出現異常並且不終止watch事件。

到這裏咱們已經完成了less的自動編譯，當咱們想在編碼時查看出現了什麼異常而又不想每次出現異常就去查看命令時，咱們能夠用到gulp-notify。先是安裝，引入，再在plumber()括號內加入{errorHandler: notify.onError('Error: <%= error.message %>')}，當出現異常時屏幕右下角就會彈出一個異常信息的窗口。

• 合併css文件
  在工做中，咱們可能會編譯出多個css文件，這就須要咱們進行合併處理。gulp-concat

能夠幫咱們作這件事，在gulpfile引入gulp-concat(確保已安裝);

less()執行完將編譯後的css文件進行合併，從新命名爲stylesheet.css，再將其輸出到css文件夾下。
咱們也許須要進行壓縮處理，並重命名爲-min.，引入gulp-rename和gulp-minify-css(確保已安裝);

這時會輸出兩個多輸出一個-min的文件。less自動編譯css已經完成了。