什么是gulp
gulp:前端自动化项目管理工具
功能： 自动化压缩js、css文件，自动压缩图片文件，自动合并文件，编译less,sass,es6转es5等
要使用gulp，需要安装node环境
- 安装：
$ npm install gulp -g
$ npm install gulp -D
- API:
gulp.src() --全局匹配一个或多个文件
gulp.dest() --将文件写入目录
gulp.symlink() --与dest相似，但是使用软连接形式
gulp.task() --定义任务
gulp.parallel() --并行运行任务
gulp.series() --运行任务序列
gulp.watch() --当文件发生变化时做某些操作
gulp.lastRun() --获得上次成功运行的时间戳
gulp.tree() --获得任务书树
gulp.registry() --获得或注册任务
发布任务
- 安装好gulp后，可以在当前文件夹下开启命令行工具，然后输入gulp,结果如下
[19:48:29] No gulpfile found
结果告诉我们，在目录下找不到gulpfile。
注：gulpfile是一个js文件，我们需要在目录下创建一个gulpfile.js文件，将来的任务都在gulfile.js中执行。
- 目录下创建gulpfile.js文件,再次输入命令gulp,结果如下 ：
[19:59:54] Using gulpfile D:\个人\nodelearn\gulpDemo\gulpfile.js
[19:59:54] Task never defined: default
[19:59:54] To list available tasks, try running: gulp --tasks
结果提示，default任务没有定义，可以尝试运行gulp --tasks
- gulpfile.js中使用task定义的default任务
const gulp = require("gulp");
gulp.task("default",function(){
console.log("default任务执行了");
});
结果如下：
[20:11:00] Using gulpfile D:\个人\nodelearn\gulpDemo\gulpfile.js
[20:11:00] Starting 'default'...
default任务执行了
[20:11:00] The following tasks did not complete: default
[20:11:00] Did you forget to signal async completion?
说明：执行了default任务，但是并没有结束任务（如果结束？往下看）。
gulp.task("default",function(done){
console.log("default任务执行了");
done();
});
done();//结束任务
- 创建并行任务（多个任务同时执行）
const gulp = require("gulp");
//创建并行任务
gulp.task("default",gulp.parallel(taskA,taskB));
function taskA(){
console.log("执行了A");
}
function taskB(){
console.log("执行了B");
}
taskA,taskB任务同时执行
- 创建序列任务(任务执行完一个再一个)
gulp.task("default",gulp.series(taskA,taskB));
function taskA(){
console.log("执行了A");
}
function taskB(){
console.log("执行了B");
}
没有调用done(),taskA没有执行完，则taskB不会执行
- 给任务添加别名，执行命令时需要使用： gulp+任务名
gulp.task("taskA",taskA);
function taskA(){
console.log("执行了A");
}
输入命令：gulp taskA;
布置一个任务：将src目录下的index.html文件复制到dest目录下
//布置一个任务：将src目录下的index.html文件复制到dest目录下
gulp.task("copyHtml",copyHtml);
function copyHtml(){
return gulp.src("src/index.html").pipe(gulp.dest("dest"));
}
dest目录会自动生成
src()源文件路径 读取文件 是一个输出流
pipe()管道输送 处理文件 是一个输出流
dest()目标目录 输入文件 是一个输入流
return:结束任务，相当于done()。
布置一个任务：将lib目录下的所有js文件复制到js目录下
gulp.src("lib/*.js").pipe( gulp.dest("js") );
- gulp.src("lib/*")与gulp.src("lib/*/**的区别")
lib/*：代表src下的所有一级目录的文件,不包含二级目录文件
lib/**：代表src下的所有文件，包含所有二级目录文件和多级目录文件
lib/*/**:代表src下的二级目录下的所有文件
匹配模式
- 单匹配模式
1.png - 多匹配模式
1.类正则：
2.png
2.数组匹配：
布置一个任务：将不同目录下的文件复制到dest目录下
src参数可以是一个数组
gulp.task("copyCss",function(){
return gulp.src(["src/*.css","lib/*.css"]).pipe( gulp.dest("dest") );
});
gulp.watch()监听
gulp.task("watchCss",function(){
return gulp.watch(["src/*.css","lib/*.css"],()=>{
return gulp.src(["src/*.css","lib/*.css"]).pipe( gulp.dest("dest") );
});
})
ctrl+c结束监听
文件合并：npm install gulp-concat --save-dev
css文件压缩：npm install gulp-cssmin --save-dev
文件重命名：npm install gulp-rename --save-dev
task("concatCss",function(done){
return src(["src/*.css","lib/*.css"])
.pipe(concat("concat.css"))
.pipe(cssmin())
.pipe(rename("concat.min.css"))
.pipe(dest("dest"));
})
js文件压缩：npm install gulp-uglify --save-dev
task("uglifyJs",function(done){
return src("lib/*.js")
.pipe(concat("concatJs.js"))
.pipe(uglify())
.pipe(rename("concatJs.min.js"))
.pipe(dest("dest/js"))
})
图片压缩：npm install gulp-imagemin@4 --save-dev
//写法一
task("minImg",function(done){
return src("images/*.{png,jpg,gif,ico}")
.pipe(imagemin())
.pipe(dest("dest/photo"));
})
//写法二
task("minImg",function(done){
return src("images/*.{png,jpg,gif,ico}")
.pipe(imagemin({
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化
}))
.pipe(dest("dest/photo"));
})
//写法三
task("minImg",function(done){
pump([
src("images/*.{png,jpg,gif,ico}"),
imagemin({
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化
}),
dest("dest/images")
],done)
})
//写法四
task("minImg",function(done){
pump([
src("images/*.{png,jpg,gif,ico}"),
imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
}),
]),
dest("dest/images")
],done)
})
es6转es5 ：npm install gulp-babel @babel/core @babel/preset-env --save-dev
task("ES6ToES5",function(done){
return src("lib/*.js")
.pipe(babel({
"presets":["@babel/env"] //es6转es5 这里需要设置presets
}))
.pipe(dest("dest/e6te5"))
})