新版的gulp
- 可以使用gulp-cli工具
- 不再支持同步任务
- 处理异步队列series()方法
- 高并发任务使用parallel()
- Gulp 插件实质上是 Node 转换流（Transform Streams），它封装了通过管道（pipeline）转换文件的常见功能，通常是使用
.pipe()方法并放在src()和dest()之间。他们可以更改经过流（stream）的每个文件的文件名、元数据或文件内容。
gulp与grunt
- Grunt主要是以
文件为媒介来运行它的工作流，比如在Grunt中执行完一项任务后，会把结果写入到一个临时文件中，然后在这个临时文件内容的基础上执行其它任务，执行完成后又把结果写入到临时文件中，然后又以临时文件为基础继续执行其它任务，循环往复。 - Gulp中，使用的是（Node 流）stream，首先获取到需要的stream，然后可以通过stream的
pipe()方法把流导入到你想要的地方，比如Gulp的插件中，经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中。所以Gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是Gulp的速度比Grunt快的一个原因。
api及工作流程
工作流程
首先通过gulp.src()方法获取到要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中
api
gulp.src(src) 匹配文件，获取文件流，src为需要获取的文件类型
gulp.dest(path) 写入文件，用来指定要生成的文件的目录，path为路径
gulp.task(name, array,fn) 定义任务,name是任务名，array是前置任务名，fn是本任务的内容
gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务
插件
自动加载插件gulp-load-plugins
重命名gulp-rename
js文件压缩gulp-uglify
css文件压缩gulp-minify-css
html文件压缩gulp-minify-html
js代码检查gulp-jshint
文件合并gulp-concat
less使用gulp-less
sass使用gulp-sass
图片压缩gulp-imagemin
自动刷新gulp-livereload
开发
- 全局安装 gulp
npm i -g gulp - 在项目中局部安装 gulp
npm i gulp -D - 创建文件 gulpfile.js
- 编写符合 gulp 规则的代码
- 在cmd 中执行 gulp或者gulp + 任务名
gulp jsTask
gulp（gulp+default）
开发环境下的配置
var gulp = require("gulp");
var clean = require("gulp-clean");
var sass = require("gulp-sass");
// 使异步任务队列化
var runSequence = require("run-sequence");
var autoprefixer = require("gulp-autoprefixer");
var babel = require("gulp-babel");
var fileInclude = require("gulp-file-include");
// 浏览器同步测试工具，它会启动一个静态服务器。
var browserSync = require("browser-sync");
// 1 清空
/* 2 处理css sass
2.1 将scss编译成css sass
2.2 自动添加前缀 autoprefixer
*/
/* 3 处理js babel
3.1 将es6转为es5 babel
*/
/* 4 处理html fileInclude
4.1 公共模板 fileInclude
*/
/* 5 自动刷新 browserSync
5.1 一启动页面和文件有修改时,重新触发编译 和 刷新页面
*/
/* 辅助工具
a run-sequence 让任务按顺序执行
runSequence("第一个任务,["同时进行的任务1",""同时任务2]")
任务内都需要加 return
*/
// 01 清空
gulp.task("clean", function () {
return gulp.src("./dist")
.pipe(clean())
});
// 02 处理css
gulp.task("css", function () {
return gulp.src("./src/css/**")
.pipe(sass())
.pipe(autoprefixer({
// 主流浏览器的最新的两个版本
browsers: ['last 2 versions']
}))
.pipe(gulp.dest("./dist/css/"));
})
// 03 处理js
gulp.task("js", function () {
return gulp.src("./src/js/**")
.pipe(babel({
// 智能选择编译
presets: ['env']
}))
.pipe(gulp.dest("./dist/js/"))
})
// 04 处理html
gulp.task("html", function () {
return gulp.src("./src/pages/**")
.pipe(fileInclude({
// 预定义前缀
prefix: "@@",
// 组件的路径
basepath: "src/components"
}))
.pipe(gulp.dest("./dist/"));
})
// 05 复制第三方静态资源 如 jquery,图片,字体图标等
gulp.task("lib", function () {
return gulp.src(["./src/lib/**"])
.pipe(gulp.dest("./dist/lib"));
})
// 05 复制第三方静态资源 如 jquery,图片,字体图标等
gulp.task("static", function () {
return gulp.src(["./src/static/**"])
.pipe(gulp.dest("./dist/static"));
})
// 00 默认任务
gulp.task("default", function () {
runSequence("clean", ["css", "js", "html", "static", "lib"], function () {
browserSync.init({
// 服务器设置
server: {
// 网站根路径
baseDir: "./dist",
// 入口文件
index: "index.html"
},
// 端口号
port: "8888",
// 不出现页面提示
notify: false
});
// 以下内容如果有改变,自动触发对应的任务,再刷新页面
gulp.watch("./src/css/**", ["css"]).on("change", browserSync.reload);
gulp.watch("./src/js/**", ["js"]).on("change", browserSync.reload);
gulp.watch("./src/pages/**", ["html"]).on("change", browserSync.reload);
})
})
生产环境下的配置
var gulp = require("gulp");
var clean = require("gulp-clean");
var sass = require("gulp-sass");
var runSequence = require("run-sequence");
var autoprefixer = require("gulp-autoprefixer");
var babel = require("gulp-babel");
var fileInclude = require("gulp-file-include");
var browserSync = require("browser-sync");
var cssmin = require('gulp-cssmin');
var uglify = require('gulp-uglify');
const rev = require("gulp-rev");
const revCollector = require("gulp-rev-collector");
// 1 清空
/* 2 处理css sass
2.1 将scss编译成css sass
2.2 自动添加前缀 autoprefixer
++2.2 压缩css cssmin
*/
/* 3 处理js babel
3.1 将es6转为es5 babel
++3.2 压缩和混淆js
*/
/* 4 处理html fileInclude
4.1 公共模板 fileInclude
++4.2 压缩html
*/
/* ??5 自动刷新 browserSync
??5.1 一启动页面和文件有修改时,重新触发编译 和 刷新页面
*/
/* 辅助工具
a run-sequence 让任务按顺序执行
runSequence("第一个任务,["同时进行的任务1",""同时任务2]")
任务内都需要加 return
*/
/*
++6 添加指纹
++6.1 给css添加指纹 rev
++6.2 给js添加指纹 rev
++6.3 将html中的文件引用改成带有指纹的 revCollector
*/
// 01 清空
gulp.task("clean", function () {
return gulp.src("./dist")
.pipe(clean())
});
// 02 处理css
gulp.task("css", function () {
return gulp.src("./src/css/**")
.pipe(sass())
.pipe(autoprefixer({
// 主流浏览器的最新的两个版本
browsers: ['last 2 versions']
}))
// 压缩css
.pipe(cssmin())
// 6.1 添加css指纹
.pipe(rev())
.pipe(gulp.dest("./dist/css/"))
.pipe(rev.manifest({
path: "rev-css-mainfest.json"
}))
.pipe(gulp.dest("./src/rev/"));
})
// 03 处理js
gulp.task("js", function () {
return gulp.src("./src/js/**")
.pipe(babel({
// 智能选择编译
presets: ['env']
}))
.pipe(uglify({
// 混淆和压缩js
mangle: {
toplevel: true
}
}))
// 6.2 添加js指纹
.pipe(rev())
.pipe(gulp.dest("./dist/js/"))
.pipe(rev.manifest({
path: "rev-js-mainfest.json"
}))
.pipe(gulp.dest("./src/rev/"));
})
// 6.3 将html中的链接改成带有指纹的
gulp.task("revCollector", function () {
return gulp.src(["./src/rev/*.json", "./dist/*.html"])
.pipe(revCollector())
.pipe(gulp.dest("./dist/"));
})
// 04 处理html
gulp.task("html", function () {
return gulp.src("./src/pages/**")
.pipe(fileInclude({
// 预定义前缀
prefix: "@@",
// 组件的路径
basepath: "src/components"
}))
.pipe(gulp.dest("./dist/"));
})
// 05 复制第三方静态资源 如 jquery,图片,字体图标等
gulp.task("lib", function () {
return gulp.src(["./src/lib/**"])
.pipe(gulp.dest("./dist/lib"));
})
// 05 复制第三方静态资源 如 jquery,图片,字体图标等
gulp.task("static", function () {
return gulp.src(["./src/static/**"])
.pipe(gulp.dest("./dist/static"));
})
// 00 默认任务
gulp.task("default", function () {
runSequence("clean", ["css", "js", "html", "static", "lib"],"revCollector", function () {
browserSync.init({
// 服务器设置
server: {
// 网站根路径
baseDir: "./dist",
// 入口文件
index: "index.html"
},
// 端口号
port: "8888",
// 不出现页面提示
notify: false
});
// 以下内容如果有改变,自动触发对应的任务,再刷新页面
gulp.watch("./src/css/**", ["css"]).on("change", browserSync.reload);
gulp.watch("./src/js/**", ["js"]).on("change", browserSync.reload);
gulp.watch("./src/pages/**", ["html"]).on("change", browserSync.reload);
})
})