1.gulp是什么？
gulp是用自动化构建工具增强你的工作流程，gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。 gulp有如下几个特点：任务化，基于流，I/O 输入与输出，异步任务和同步任务
gulp有自己的内存，当你用gulp构建项目时；首先gulp会先读取文件到gulp的内存，然后接下来所有的操作都是在gulp的内存中操作的；比如你要合并文件，压缩文件...,等你操作完再从gulp的内存中输出； 输入流：就是读取文件到gulp内存 输出流：就是在gulp的内存中操作完后，将文件从gulp内存中输出
gulp能自动化的完成js/less/css/html/image等文件的合并，压缩，检查，监听文件变化，浏览器的自动刷新，测试等任务 gulp更高效的异步多任务，更易于使用，插件高质量
2.接下来我们使用gulp来构建项目
1.创建项目目录
新建gulp-study文件夹，用vscode打开，然后在终端执行npm init -y,生成项目的配置文件package.json；然后再新建如下文件目录：
2.安装gulp，需要注意的一点是：必须全部安装gulp,不然执行命令会找不到gulp
全局安装 npm i gulp -g
项目本地安装 npm i gulp -D(--save-dev) 开发依赖
3.常用到的插件以及重要的API
相关插件：
- gulp-concat:合并文件(js/css)
- gulp-uglify:压缩js文件
- gulp-rename:文件重命名
- gulp-less：编译less
- gulp-clean-css:压缩css
- gulp-livereload:实时自动编译刷新
重要API： gulp.src():指向源文件的目录路径，用于读取文件 gulp.dest():指向指定的文件夹，用于向文件夹中输出文件 gulp.task():定义一个任务 gulp.watch():监视文件的变化
3.配置gulp的配置文件 gulpfile.js
//引入gulp
const gulp=require('gulp')
//注册任务
gulp.task('任务名',function(){
//具体的操作
})
//注册默认任务
gulp.task('default',['任务名']) //异步执行
4.注册合并js并压缩
在src目录下js的文件夹中新建test1.js,test2.js;代码如下：
src/js/test1.js
//立即执行函数
(function(){
function add(num1,num2){
return num1+num2
}
console.log(add(12,13))
})()
src/js/test2.js
const test2=function(){
const arr=[1,2,3,4].map(item=>item*3)
console.log(arr);
}
test2()
gulpfile.js中配置代码如下： 需要安装插件如下：
npm i gulp-concat gulp-rename gulp-uglify -D
//注册合并并压缩js任务
//引入gulp
const gulp=require('gulp')
//引入插件
const concat=require('gulp-concat') //合并文件的
const rename=require('gulp-rename') //重新命名的
const uglify=require('gulp-uglify') //压缩js
// gulp 3中的写法中是不需要 gulp.series的
// gulp.task('js',function(){
// return gulp.src('src/**/*.js') //寻找目标源文件，并且将文件保存到gulp内存中
// .pipe(concat('build.js')) //临时合并文件 可以传入一个参数表示合并的文件名
// .pipe(gulp.dest('dist/js')) //输出文件到本地
// })
//gulp 4的写法
gulp.task('js',gulp.series(()=>{
return gulp.src('src/**/*.js') //寻找目标源文件，并且将文件保存到gulp内存中
.pipe(concat('build.js')) //临时合并文件 可以传入一个参数表示合并的文件名
.pipe(gulp.dest('dist/js')) //输出文件到本地
.pipe(uglify()) //压缩js代码
// .pipe(rename('build.main.js')) //重新命名输出的文件名
.pipe(rename({suffix:".main"})) //重新命名输出的文件名,对象的写法
.pipe(gulp.dest('dist/js')) //再次输出文件 只要是操作了文件，必须要输出不然是看不到文件的
}))
终端执行gulp.js命令，可以看到dist目录生成了build.js与build.main.js两个文件。一个是压缩的，一个是没有压缩的
//build.js的代码
//立即执行函数
(function(){
function add(num1,num2){
return num1+num2
}
console.log(add(12,13));
})()
const test2=function(){
const arr=[1,2,3,4].map(item=>item*3)
console.log(arr);
}
test2()
//build.main.js的代码：
console.log(25);const test2=function(){var o=[1,2,3,4].map(o=>3*o);console.log(o)};test2();
我们上面看到用到了gulp.series(),这是gulp4 新增的用来处理任务的执行顺序，还有一个是gulp.parallel()
两者的区别是是：
-
gulp.series 用于串行（顺序）执行 -
gulp.parallel 用于并行执行
上面的两个函数接受两个参数：
-
要执行的任务的名字 -
需要执行的函数
如果你想并行执行scripts和styles，你可以这么写：
gulp.task('default', gulp.parallel('scripts', 'styles'));
5.合并压缩css文件
在css文件夹下新建test1.css与test2.css文件，在less文件夹下新建test.less，代码如下：
src/css/test1.css
#box1{
width:100px;
height:100px;
background-color:blue;
}
src/css/test2.css
#box2{
width:100px;
height:100px;
background-color: aqua;
}
src/less/test.less
@btncolor:green;
.btn{color:@btncolor}
需要安装的插件是：
npm i gulp-less gulp-clean-css -D
首先是注册转化less为css的任务
//引入插件
const less=require('gulp-less')
//首先是注册转化less的任务
gulp.task('less',gulp.series(()=>{
return gulp.src('src/less/*.less') //获取到源文件
.pipe(less()) //编译less文件为css文件
.pipe(gulp.dest('src/css')) //输出的目录
}))
在css文件下会生成一个test.css文件代码如下：
src/css/test.css
.btn {
color: green;
}
然后是合并压缩css的配置
//引入插件
const cleanCss=require('gulp-clean-css')
// 合并压缩css
gulp.task('css',gulp.series(()=>{
return gulp.src('src/css/*.css') //获取源文件，保存到gulp内存中
.pipe(concat('build.css')) //合并文件为build.css
.pipe(rename({suffix:'.main'})) //重新命名文件
.pipe(cleanCss()) //压缩css代码
.pipe(gulp.dest('dist/css')) //输出的文件的目录
}))
我们可以看到在dist文件夹下的css文件夹下生成了build.main.css文件，代码如下：
//dist/css/build.main.css
.btn{color:green}#box1{width:100px;height:100px;background-color:#00f}#box2{width:100px;height:100px;background-color:#0ff}
6.默认任务的提交
//引入gulp
const gulp=require('gulp')
//引入插件
const concat=require('gulp-concat')
const rename=require('gulp-rename')
const uglify=require('gulp-uglify')
const less=require('gulp-less')
const cleanCss=require('gulp-clean-css')
//js任务
gulp.task('js',gulp.series(()=>{
return gulp.src('src/**/*.js') //寻找目标源文件，并且将文件保存到gulp内存中
.pipe(concat('build.js')) //临时合并文件 可以传入一个参数表示合并的文件名
.pipe(gulp.dest('dist/js')) //输出文件到本地
.pipe(uglify()) //压缩js代码
// .pipe(rename('build.main.js')) //重新命名输出的文件名
.pipe(rename({suffix:".main"})) //重新命名输出的文件名,对象的写法
.pipe(gulp.dest('dist/js')) //再次输出文件 只要是操作了文件，必须要输出不然是看不到文件的
}))
//首先是注册转化less的任务
gulp.task('less',gulp.series(()=>{
return gulp.src('src/less/*.less') //获取到源文件
.pipe(less()) //编译less文件为css文件
.pipe(gulp.dest('src/css')) //输出的目录
}))
// 合并压缩css
gulp.task('css',gulp.series(()=>{
return gulp.src('src/css/*.css')
.pipe(concat('build.css'))
.pipe(rename({suffix:'.main'}))
.pipe(cleanCss())
.pipe(gulp.dest('dist/css'))
}))
//注册默认任务
gulp.task('default',gulp.series('js','less','css')) //顺序执行，同步执行
终端执行gulp命令就会执行default默认任务的；可以看下终端的命令输出，按照顺序执行的任务，上一个任务执行完才会执行下一个任务的
那么我们用gulp.parallel来实现并行执行呢？修改注册默认任务的代码
//注册默认任务
gulp.task('default',gulp.parallel('js','less','css')) //异步执行
可以看到任务同时执行，这种适合各个任务之间没有互相依赖的情况，可以异步执行，提高效率；但是如果有相互依赖的任务就要同步执行，例如：less任务必须在css任务前面执行，不然最后合并生成的css文件是不完整的。
我们还可以多次使用来控制任务的执行顺序，请看如下代码：
//注册默认任务
gulp.task('default',gulp.parallel('js',gulp.series('less','css'))) //整体异步执行，部分同步
7.处理压缩html文件
安装插件 npm i gulp-htmlmin -D
html感觉压缩不压缩问题不大，因为html文件本身就不会太大的
//引入插件
const htmlmin=require('gulp-htmlmin')
//注册并压缩html文件任务
gulp.task('html',gulp.series(()=>{
return gulp.src('./index.html')
.pipe(htmlmin({collapseWhitespace:true})) //销毁空格
.pipe(gulp.dest('dist'))
}))
8.自动构建项目 gulp-livereload插件的使用
安装 npm i gulp-livereload -D
//引入插件
const livereload=require('gulp-livereload')
//js任务
gulp.task('js',gulp.series(()=>{
return gulp.src('src/**/*.js') //寻找目标源文件，并且将文件保存到gulp内存中
.pipe(concat('build.js')) //临时合并文件 可以传入一个参数表示合并的文件名
.pipe(gulp.dest('dist/js')) //输出文件到本地
.pipe(uglify()) //压缩js代码
// .pipe(rename('build.main.js')) //重新命名输出的文件名
.pipe(rename({suffix:".main"})) //重新命名输出的文件名,对象的写法
.pipe(gulp.dest('dist/js')) //再次输出文件 只要是操作了文件，必须要输出不然是看不到文件的
.pipe(livereload()) //还要加上这个自动编译的方法，实时刷新，在每个任务下加上这个
}))
//注册监视任务来监视文件的变化
gulp.task('watch',function(){
//开启监听
livereload.listen()
//确认监听目标以及相应的绑定任务
gulp.watch('src/js/*.js',gulp.series('js'))
gulp.watch(['src/css/*.css','src/less/*.less'],gulp.series('css'))
})
指向gulp watch命令：然后修改css文件中的一个背景颜色，可以看到已经监听文件成功
9.热更新实时刷新的实现 gulp-connect
安装 npm i gulp-connect -D
gulp-connect内置了一个微型服务器，能够读取我们gulpfile.js配置文件中的所有配置
//引入插件
const connect=require('gulp-connect')
//js任务
gulp.task('js',gulp.series(()=>{
return gulp.src('src/**/*.js') //寻找目标源文件，并且将文件保存到gulp内存中
.pipe(concat('build.js')) //临时合并文件 可以传入一个参数表示合并的文件名
.pipe(gulp.dest('dist/js')) //输出文件到本地
.pipe(uglify()) //压缩js代码
// .pipe(rename('build.main.js')) //重新命名输出的文件名
.pipe(rename({suffix:".main"})) //重新命名输出的文件名,对象的写法
.pipe(gulp.dest('dist/js')) //再次输出文件 只要是操作了文件，必须要输出不然是看不到文件的
.pipe(livereload()) //还要加上这个自动编译的方法，实时刷新
.pipe(connect.reload()); //和上面那个配置是一样的，实时刷新
}))
//注册热更新启动任务
gulp.task('connect', function() {
//配置服务器的选项
connect.server({
root:'dist/',
livereload:true, //实时刷新
port:8000 //启动端口号
});
gulp.watch('src/js/*.js',gulp.series('js'))
gulp.watch(['src/css/*.css','src/less/*.less'],gulp.series('css'))
});
执行gulp connect命令
