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

npm是node包管理工具，隨著node自動(dòng)安裝

gulp安裝

1.全局安裝gulp

npm install --global gulp

2.局部安裝gulp

創(chuàng)建一個(gè)項(xiàng)目，我這里叫g(shù)ulp，然后cmd命令進(jìn)入到此目錄文件夾，輸入

npm init

此時(shí)會(huì)發(fā)現(xiàn)項(xiàng)目目錄下多了一個(gè)package.json文件和一個(gè)node_modules文件夾，這個(gè)不用管【這個(gè)過程中如果出現(xiàn)錯(cuò)誤，可以直接把package.json和node_modules文件夾刪除重新創(chuàng)建】

npm install --save-dev gulp

cmd命令行工具

之后執(zhí)行以下命令來初始化我們剛創(chuàng)建好的項(xiàng)目

在項(xiàng)目根目錄創(chuàng)建gulpfile.js文件，先創(chuàng)建一個(gè)任務(wù)，看能否運(yùn)行成功

gulpfile.js

然后在cmd命令行輸入

gulp task1

看到運(yùn)行結(jié)果如下：

cmd顯示

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

執(zhí)行多了個(gè)任務(wù)

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

gulp常用功能使用

1.移動(dòng)文件

現(xiàn)在我們要把index.html文件放入到app文件夾下，我們可以制定以下任務(wù)

項(xiàng)目結(jié)構(gòu)

gulpfile.js

gulpfile.js

然后執(zhí)行

gulp task2

看到執(zhí)行后的的結(jié)果

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


但是當(dāng)我們有多個(gè)任務(wù)需要監(jiān)聽時(shí)怎么辦呢？解決方式如下 4.創(chuàng)建webServer

• 下載gulp-webServer

npm install - -save-dev gulp-webserver

在node_modules文件夾中有g(shù)ulp-webserver文件夾證明已經(jīng)安裝成功

• 在gulpfile.js中引入gulp-webServer

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

gulpfile.js

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

而且保存的時(shí)候可以實(shí)現(xiàn)同步刷新

5.合并和壓縮js文件

npm install - -save-dev gulp-concat

npm install - -save-dev gulp-uglify

package.json

如上圖，package.json里面有這個(gè)文件，證明已經(jīng)安裝成功

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

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

之后運(yùn)行此任務(wù)，我們就能看到j(luò)s里面把a(bǔ).js和b.js合并了并且有了新的script.js文件

我們?cè)賮?span style="background-color:rgb(255,204,51)">壓縮js文件

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

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

6.編譯sass到css

less

sass? ?box color:red 不是咱們平常寫css的習(xí)慣，所以scss就應(yīng)運(yùn)而生

scss box{color:red;}

npm install - -save-dev gulp-sass

安裝時(shí)可能會(huì)報(bào)的錯(cuò)誤如下：【參考文章】

缺少python環(huán)境 【點(diǎn)擊下載】找到下面的的這一款下載：

安裝的時(shí)候要特別注意把最后一項(xiàng)給勾選上（允許寫入path）

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

這個(gè)時(shí)候你的電腦應(yīng)該已經(jīng)安裝成功了，但是當(dāng)我繼續(xù)進(jìn)行npm install 的時(shí)候又出現(xiàn)了新的問題，截圖如下：

安裝過程真是一波三折，配置這些環(huán)境都要花費(fèi)很多時(shí)間，媽麥屁，解決方式，需要安裝.NET Framework 和 Visual studio

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

這個(gè)時(shí)候又報(bào)了如下錯(cuò)誤（組件存儲(chǔ)損壞，錯(cuò)誤代碼：0x80073712”），看來我真夠倒霉的啊，裝個(gè)環(huán)境跟抽獎(jiǎng)一樣，我還就不信了啊

我的電腦是windows10必須是未過渡精簡(jiǎn)的ghost系統(tǒng)，如果是過渡精簡(jiǎn)的，本身系統(tǒng)已經(jīng)沒有這個(gè)功能，無法再啟動(dòng)

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

這將是一個(gè)無底洞，或許我需要轉(zhuǎn)換下思路，才能走通，電腦裝系統(tǒng)的時(shí)候一定不要偷懶，先假裝我們安裝成功了，接下來需要安裝

Visual Studio Express 2015 for window desktop

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

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

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

換個(gè)思路解決gulp-sass安裝不成功的問題，利用淘寶鏡像，可以解決國(guó)內(nèi)網(wǎng)絡(luò)以及各種報(bào)錯(cuò)的依賴問題，剛才的時(shí)候gulp-sass是基于node-sass，正好node-sass在國(guó)內(nèi)不能正常訪問，而且還需要依賴Python，Windows下還需要安裝vs（可以安裝vs2015社區(qū)版），現(xiàn)在我們利用淘寶鏡像來做，只需在cmd先輸入如下命令：

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

然后再輸入以下命令

cnpm install - -save-dev gulp-sass

這個(gè)時(shí)候我們?cè)倏?#xff0c;package.json文件下是否安裝成功，可以看到，已經(jīng)正常安裝成功了，哎，看來問題解決不了可以換個(gè)思路，而不是一條道走到黑啊

然后我們?cè)賡css里面新建一個(gè)a.scss文件，在gulpfile.js里面編寫如下任務(wù)

這是我們看到項(xiàng)目里自動(dòng)生成了一個(gè)新的css文件夾里面有了新的a.css文件

7.css的合并和壓縮

合并gulp-concat

壓縮 gulp-minifiy-css

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

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

別忘記先引入gulp-minify-css

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

gulpfile.js文件

壓縮后的css如下

style.css文件

關(guān)于監(jiān)聽html，css，還有js要分別設(shè)置

8.壓縮圖片

在cmd中運(yùn)行 cnpm install gulp-imagemin --save-dev因?yàn)槲覀円呀?jīng)采用淘寶鏡像替換掉了npm，所以以后的安裝都可以采用cnpm來安裝

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

這個(gè)時(shí)候我們看package.json文件，發(fā)現(xiàn)都已經(jīng)安裝成功

package.json文件

然后我們?cè)陧?xiàng)目里新建一個(gè)image文件夾，里面放上一張圖片，然后再gulpfile.js里面進(jìn)行配置如下：

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

gulpfile.js文件

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

我的項(xiàng)目結(jié)構(gòu)

但是我壓縮完之后，兩張圖片的大小并沒有多大的改變，可能是因?yàn)槲冶緛淼膱D片就很小吧

現(xiàn)在我們可以進(jìn)行深度壓縮

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

然后配置任務(wù)如下：

gulpfile.js

這個(gè)時(shí)候我們發(fā)現(xiàn)gulp項(xiàng)目生成了一個(gè)新的文件夾dist/img下有剛剛壓縮過的圖片

我的項(xiàng)目結(jié)構(gòu)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。