gulp 作用壓縮、合并js和css 文件

文件的壓縮合并可以減少緩存 減少文件的網(wǎng)絡(luò)請(qǐng)求可以提高網(wǎng)頁速度，所以gulp是非常不錯(cuò)的工具

以下是如何安裝和使用gulp
聲明：主要針對(duì)Mac端

1、全局安裝

$ npm install --global gulp 全局安裝

注意 這里是初始化(如果不想初始化請(qǐng)?zhí)^) $ npm init 
 

初始化后文件夾為空的 如下圖 

下面是對(duì)比照為未初始化 多出了好多插件

$ npm install gulp 安裝在當(dāng)前命令所在文件的目錄下

2、作為項(xiàng)目的開發(fā)依賴(devDependencies)安裝

$ npm install --save-dev gulp

npm install --save 模塊名 ：將模塊下載到當(dāng)前目錄的node_modules中并將依賴

寫入 package.json中的dependencies中

npm install --save-dev 模塊名 ： 將模塊下載到當(dāng)前目錄

的node_modules中并將依賴寫入 package.json中的devDependencies中

安裝后顯示如下

3. 在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {

 // 將你的默認(rèn)的任務(wù)代碼放在這

});

4、運(yùn)行gulp

在命令行中輸入$ gulp

顯示如下：

因?yàn)榛卣{(diào)函數(shù)中什么都沒有

具體用法：

首先安裝插件

gulp-concat 文件合并

gulp-jsmin 壓縮js文件

安裝好了 下面我們就來試一下效果

這里就拿合并js文件來講 其余原理一樣：

兩個(gè)單獨(dú)的js文件（下圖紅框）

Mou icon

運(yùn)行一下 $ gulp default

新生成的js文件 （下圖綠框）

好了，， 到這里 js文件的壓縮，合并就完成了