gulp 安裝與使用

1、Gulp 是基於node.js 流（stream）的一個前端自動化構建工具，能夠使用它構建自動化工做流程，簡化咱們工做量，讓咱們把重點放在功能的開發上，從而提升咱們的開發效率和工做質量

 咱們能夠用gulp自動刷新網頁，對sass進行預處理、代碼檢測、圖片優化壓縮、這一切，只須要一個簡單的指令就能所有完成。

 

2、開始安裝

 

一、全局安裝

cnpm install gulp -g

二、檢查版本

gulp -v

三、本地安裝gulp， 做爲開發依賴

cnpm install gulp -D

 

2、使用

一、建立配置文件 (根目錄下新建 gulpfile.js 文件)

 

console.log('gulp啓動成功!');   //測試gulp是否啓動成功

 

二、命令行執行gulp

 

3、使用實例

1、下載醜化工具（壓縮）

【注意：gulp壓縮時不支持es6語法，若是你有es6以上的語法，請先轉譯爲es6在進行壓縮】

cnpm i gulp-uglify --save-D

 

 2、構建第一個 gulp 流程

- 命令行執行 gulp js 

 

 

三、建立index.js         

命令行執行 gulp js  後自動構建dist/index.js   (index.js  -  ./dist/js/index.js)

 

 

 4、任務演示 - 同時執行多個任務

命令行執行 glup some

 

 

4、監聽

一、同時監聽 less 和 js

 

二、任務演示 - 監聽 js 改變，自動執行 js 壓縮任務

命令行執行 glup watchjs

 

3、壓縮成功