gulp 前端項目構建工具，用來處理css，js，圖片壓縮等，編譯less和scss以及coffeeScript等，提高開發效率。gulp是基于NodeJs而NodeJs又是基于CommonJs的，所以我們要想使用gulp需要先安裝NodeJs。運行如下兩條命令來查看是否安裝成功。如果在安裝過程中發生錯誤或者很慢，可以采用淘寶鏡像【點擊鏈接】里面有使用說明

npm是node包管理工具，隨著node自動安裝

gulp安裝

1.全局安裝gulp

npm install --global gulp

2.局部安裝gulp

創建一個項目，我這里叫gulp，然后cmd命令進入到此目錄文件夾，輸入

npm init

此時會發現項目目錄下多了一個package.json文件和一個node_modules文件夾，這個不用管【這個過程中如果出現錯誤，可以直接把package.json和node_modules文件夾刪除重新創建】

npm install --save-dev gulp

cmd命令行工具

之后執行以下命令來初始化我們剛創建好的項目

在項目根目錄創建gulpfile.js文件，先創建一個任務，看能否運行成功

gulpfile.js

然后在cmd命令行輸入

gulp task1

看到運行結果如下：

cmd顯示

看到有task1輸出，證明一切ok

執行多了個任務

gulp.task('default',['task1','task2']);

gulp常用功能使用

1.移動文件

現在我們要把index.html文件放入到app文件夾下，我們可以制定以下任務

項目結構

gulpfile.js

gulpfile.js

然后執行

gulp task2

看到執行后的的結果

2.多任務執行 gulp.task('default',['task1','task2']);
3.監聽文件 watch（監聽誰，[監聽完成后執行的任務]）；
gulpfile.js


但是當我們有多個任務需要監聽時怎么辦呢？解決方式如下 4.創建webServer

• 下載gulp-webServer

npm install - -save-dev gulp-webserver

在node_modules文件夾中有gulp-webserver文件夾證明已經安裝成功

• 在gulpfile.js中引入gulp-webServer

var server = require("gulp-webServer");

gulpfile.js

放到瀏覽器里效果圖： 瀏覽器顯示界面

而且保存的時候可以實現同步刷新

5.合并和壓縮js文件

npm install - -save-dev gulp-concat

npm install - -save-dev gulp-uglify

package.json

如上圖，package.json里面有這個文件，證明已經安裝成功

然后在gulpfile.js里面輸入如下代碼，來合并多個js文件

var concat = require("gulp-concat");

之后運行此任務，我們就能看到js里面把a.js和b.js合并了并且有了新的script.js文件

我們再來壓縮js文件

修改剛才的合并代碼如下，其中pipe叫做管道符：

然后我們看下script.js里面的效果：

6.編譯sass到css

less

sass? ?box color:red 不是咱們平常寫css的習慣，所以scss就應運而生

scss box{color:red;}

npm install - -save-dev gulp-sass

安裝時可能會報的錯誤如下：【參考文章】

缺少python環境 【點擊下載】找到下面的的這一款下載：

安裝的時候要特別注意把最后一項給勾選上（允許寫入path）

在安裝python的時候我的電腦提示安裝不成功，看別人的解決方案【鏈接】原因就是C:\Windows\Temp文件夾NTFS權限錯誤，將它的user權限改為完全控制

這個時候你的電腦應該已經安裝成功了，但是當我繼續進行npm install 的時候又出現了新的問題，截圖如下：

安裝過程真是一波三折，配置這些環境都要花費很多時間，媽麥屁，解決方式，需要安裝.NET Framework 和 Visual studio

第一步：通過你的電腦：控制面板\所有控制面板項\程序和功能，打開windwos功能：

這個時候又報了如下錯誤（組件存儲損壞，錯誤代碼：0x80073712”），看來我真夠倒霉的啊，裝個環境跟抽獎一樣，我還就不信了啊

我的電腦是windows10必須是未過渡精簡的ghost系統，如果是過渡精簡的，本身系統已經沒有這個功能，無法再啟動

重新安裝.NET Framework 4 的時候又提示如下問題：

這將是一個無底洞，或許我需要轉換下思路，才能走通，電腦裝系統的時候一定不要偷懶，先假裝我們安裝成功了，接下來需要安裝

Visual Studio Express 2015 for window desktop

就是這貨，安裝需要很長的時間，我就放棄了，這里假裝安裝成功了，接下來需要以下幾步：

更改npm中使用vs配置? 在cmd中輸入 npm config set msvs_version 2015

然后安裝gulp-sass就好 在充滿cmd中輸入 npm install gulp-sass - -save-dev

換個思路解決gulp-sass安裝不成功的問題，利用淘寶鏡像，可以解決國內網絡以及各種報錯的依賴問題，剛才的時候gulp-sass是基于node-sass，正好node-sass在國內不能正常訪問，而且還需要依賴Python，Windows下還需要安裝vs（可以安裝vs2015社區版），現在我們利用淘寶鏡像來做，只需在cmd先輸入如下命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org替換掉node自帶的包管理器npm，所以以后我的電腦記得用cnpm來下載各種依賴

然后再輸入以下命令

cnpm install - -save-dev gulp-sass

這個時候我們再看，package.json文件下是否安裝成功，可以看到，已經正常安裝成功了，哎，看來問題解決不了可以換個思路，而不是一條道走到黑啊

然后我們再scss里面新建一個a.scss文件，在gulpfile.js里面編寫如下任務

這是我們看到項目里自動生成了一個新的css文件夾里面有了新的a.css文件

7.css的合并和壓縮

合并gulp-concat

壓縮 gulp-minifiy-css

cnpm install gulp-minify-css --save-dev 也可以用npm install gulp-minify-css --save-dev 哪個能用就用哪個

之后我們來合并以及壓縮css文件夾里的a.css和b.css

別忘記先引入gulp-minify-css

var cssmin = require('gulp-minify-css');

gulpfile.js文件

壓縮后的css如下

style.css文件

關于監聽html，css，還有js要分別設置

8.壓縮圖片

在cmd中運行 cnpm install gulp-imagemin --save-dev因為我們已經采用淘寶鏡像替換掉了npm，所以以后的安裝都可以采用cnpm來安裝

如果想深度壓縮圖片還需要在cmd中運行 cnpm install imagemin-pngquant --save-dev

這個時候我們看package.json文件，發現都已經安裝成功

package.json文件

然后我們在項目里新建一個image文件夾，里面放上一張圖片，然后再gulpfile.js里面進行配置如下：

別忘了先引入：var imagemin = require('gulp-imagemin');

gulpfile.js文件

之后我們看到項目里自動生成了img文件夾，并且里面有壓縮好的圖片

我的項目結構

但是我壓縮完之后，兩張圖片的大小并沒有多大的改變，可能是因為我本來的圖片就很小吧

現在我們可以進行深度壓縮

還是 別忘了先引入var pngquant = require('imagemin-pngquant');

然后配置任務如下：

gulpfile.js

這個時候我們發現gulp項目生成了一個新的文件夾dist/img下有剛剛壓縮過的圖片

我的項目結構

總結

以上是生活随笔為你收集整理的gulp在工作中的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。