本文github地址
簡介：
gulp是前端開發(fā)過程中對代碼進(jìn)行構(gòu)建的工具，是自動(dòng)化項(xiàng)目的構(gòu)建利器花竞；gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器， 她能自動(dòng)化地完成 javascript/sass/less/html/image/css 等文件的的測試掸哑、檢查约急、合并零远、壓縮、格式化厌蔽、瀏覽器自動(dòng)刷新牵辣、部署文件生成，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟奴饮。在實(shí)現(xiàn)上纬向，它借鑒了Unix操作系統(tǒng)的管道（pipe）思想，前一級(jí)的輸出戴卜，直接變成后一級(jí)的輸入逾条，使得在操作上非常簡單。
gulp 和 grunt 非常類似叉瘩，但相比于 grunt 的頻繁 IO 操作膳帕，gulp 的流操作粘捎，能更快地更便捷地完成構(gòu)建工作薇缅。
一、簡要
步驟：全局安裝gulp -> 項(xiàng)目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運(yùn)行任務(wù)
二攒磨、具體操作
1. 全局安裝gulp
npm install gulp -g
2. 新建package.json文件
說明：package.json是基于nodejs項(xiàng)目必不可少的配置文件泳桦，它是存放在項(xiàng)目根目錄的普通json文件。方便自己也方便他人娩缰，這個(gè)工作中慢慢體會(huì)灸撰。
有兩種方法：其一利用webstrom編輯器新建一個(gè)package.json文件；其二在當(dāng)前目錄下輸入npm init 初始化拼坎，然后一路開車浮毯。
如下圖：
3. 本地安裝gulp插件
npm install --save-dev xxx //注意此處的xxx是你要用到的插件名稱。
ps：熟練的話可以連著寫泰鸡。
注意：安裝完成之后會(huì)有兩個(gè)變化债蓝，一個(gè)是在當(dāng)前目錄下多了一個(gè)node_modules文件夾，文件package.json下多兩行字
4. 新建gulpfile.js文件（重要）
說明：gulpfile.js是gulp項(xiàng)目的配置文件盛龄，用于編寫任務(wù)的饰迹，也就是讓gulp做什么怎么做！
大概分三步：
- 引入所需模塊（必須已經(jīng)用npm安裝過）
- 編寫任務(wù)
- 執(zhí)行任務(wù)
例1：看一個(gè)將項(xiàng)目文件（css余舶、html啊鸭、js、圖片）壓縮過程匿值。
注意：這里的js文件因?yàn)槭褂昧薳s6的語法赠制，所以必須將其轉(zhuǎn)為es5語法在進(jìn)行壓縮
//引入模塊
var gulp=require('gulp');
var uglify=require('gulp-uglify');
var htmlmin=require('gulp-htmlmin');
var cssmin=require('gulp-cssmin');
var imagemin=require('gulp-imagemin');
var concat=require('gulp-concat');
var babel = require('gulp-babel');//識(shí)別es6語法轉(zhuǎn)為es5
var es2015Preset = require('babel-preset-es2015');
//編寫任務(wù)
/* -------------------- 壓縮css文件 -------------------- */
gulp.task('compress:css',function(){
gulp.src('src/demo/css/*.css')//配置要壓縮的文件源路徑
.pipe(cssmin()) //該任務(wù)調(diào)用的模塊
.pipe(gulp.dest('build/demo_compress/css')) //生成文件保存的路徑
});
/* -------------------- 壓縮js文件（首先將es6語法轉(zhuǎn)化為es5語法） -------------------- */
gulp.task('es6to5', function() {
return gulp.src('src/demo/js/*.js') //配置要壓縮的文件源路徑
.pipe(babel({presets: [es2015Preset]}))
.pipe(gulp.dest('./res/js/'));
});
gulp.task('compress:js', ['es6to5'], function() {
return gulp.src('./res/js/app.js')
.pipe(uglify({
mangle: false,//類型：Boolean 默認(rèn)：true 是否修改變量名
compress: true,//類型：Boolean 默認(rèn)：true 是否完全壓縮
}))
.pipe(gulp.dest('build/demo_compress/js'));
});
/* -------------------- 壓縮img文件（可能會(huì)失真） -------------------- */
gulp.task('compress:img',function(){
gulp.src('src/demo/image/*.gif')
.pipe(imagemin())
.pipe(gulp.dest('build/demo_compress/image'))
});
/* -------------------- 壓縮html文件 -------------------- */
gulp.task('compress:html',function(){
gulp.src('src/demo/*.html')
.pipe(htmlmin({
removeComments: true, //刪除注釋
collapseWhitespace: true //刪除空格
}))
.pipe(gulp.dest('build/demo_compress/'))
});
//監(jiān)聽模塊 ---（就是監(jiān)聽某一個(gè)文件發(fā)生改變的時(shí)候知道自動(dòng)執(zhí)行相應(yīng)的壓縮任務(wù)）
//gulp.watch('src/demo/*.html',['compress:html']);
//注冊默認(rèn)任務(wù) --- （在當(dāng)前目錄下執(zhí)行“gulp”指令即可）
gulp.task('default',['compress:css','compress:js','compress:img','compress:html']);
5. 運(yùn)行g(shù)ulp
//輸入命令 gulp
gulp
6. 補(bǔ)充
一般工作過過程中我們拿到的文件，一般就是分兩步：
npm install- gulp
