gulp是什么？

? ? 1.gulp是一個(gè)開源的Javascript自動(dòng)化工具

? ? 2.gulp應(yīng)用于前后端代碼管理的一種工具

? ? 3.gulp是基于Node.js和NPM應(yīng)用的構(gòu)建工具

? ? 4.gulp主要用于處理耗時(shí)及重復(fù)的任務(wù)

? ? 5.gulp可以解決上百種任務(wù)，例如：壓縮代碼，合并代碼，壓縮圖片，Sass轉(zhuǎn)換

原理：

? ? 1.gulp是基于Node.js中的數(shù)據(jù)流

? ? 2.gulp主要使用pipe事件輸入及輸出

? ? 3.插件獨(dú)立使用

優(yōu)勢(shì)：

? ? 1.gulp是基于代碼進(jìn)行配置

? ? 2.gulp可讀性更高

? ? 3.gulp基于數(shù)據(jù)流，所以可以操作pipe（）事件

安裝步驟：

? ? 1.安裝node環(huán)境

? ? 2.安裝gulp npm install -g gulp? 全局安裝

? ? 3.初始化package.json

? ? 4.在項(xiàng)目文件中安裝gulp

新建文件夾gulp，打開cmd終端，對(duì)當(dāng)前文件進(jìn)行初始化，執(zhí)行npm init

配置package.json

此時(shí)當(dāng)前文件夾下已經(jīng)有package.json文件。

安裝全局gulp：npm install -g gulp

在當(dāng)前項(xiàng)目中安裝：npm install gulp --save-dev

在目錄下建文件gulpfile.js（必須是這個(gè)文件名）

????1.引入模塊 var?gulp?=?require('gulp');

????2.定義任務(wù) gulp.task(name,?function?()?{})

????3.終端執(zhí)行 gulp name

????注意：名字隨便起，定義的和執(zhí)行的名字必須一樣。默認(rèn)任務(wù)名字必須叫default，執(zhí)行直接gulp即可。

????4.常用方法

????????gulp.task?--定義任務(wù)

????????gulp.src?--?找到需要執(zhí)行任務(wù)的文件

????????gulp.dest?--?執(zhí)行任務(wù)的文件的去處

????????gulp.watch?--?監(jiān)聽文件是否發(fā)生變化

gulpfile.js

執(zhí)行：