一、gulp-htmlmin:html文件压缩
1.下载插件npm install gulp-htmlmin
npm install gulp-file-include
2.gulpfile.js中引用插件const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
3.编写任务，调用插件//html任务
//1.html文件中代码的压缩操作
//2.抽取html文件中的公共代码
gulp.task('htmlmin',(done) => {
gulp.src('./src/*.html')//*代表src下所有的HTML文件
.pipe(fileinclude())//抽离公共代码
//压缩HTML文件中的代码
.pipe(htmlmin({ collapseWhitespace: true }))//collapseWhitespace：代表压缩html代码是否压缩空格
.pipe(gulp.dest('dist'))
done()
})
注意：虽然任务是压缩文件代码和抽离公共代码的顺序，但是我们做任务是要先抽离公共代码，再去压缩文件代码
我们把公共代码放在src目录下的common目录中
公共代码抽离出来后，在原本的HTML文件中引入公共代码@@include('./common/header.html')
这样执行了htmlmin这个任务后就会看到，压缩后的文件中也有了公共的头部
二、gulp-csso:压缩css
1.下载插件npm install gulp-csso
npm install gulp-less
2.gulpfile.js中引用插件const less = require('gulp-less');
const csso = require('gulp-csso');
3.编写任务，调用插件//css任务
//1.less语法转换
//2.css代码压缩
gulp.task('cssmin',(done) => {
//选择css目录下的所有less文件以及css文件
gulp.src(['./src/css/*.less','./src/css/*.css'])
.pipe(less())//将less语法转换为css语法
.pipe(csso())//将css代码进行压缩
.pipe(gulp.dest('dist/css'));//将处理的结果进行输出
done();
})
结果：
三、gulp-babel:JavaScript语法转化,es6转成es5
1.下载babel插件 https://www.npmjs.com/package/gulp-babel
通过bebel插件，转化成es5，通过gulp-uglify来压缩代码npm install gulp-babel @babel/core @babel/preset-env
2.在gulpfile.js文件中引入插件：const babel = require('gulp-babel');
3.编写任务//js任务
//1.es6代码转换
//2.代码压缩
gulp.task('jsmin',(done) => {
gulp.src('./src/js/*.js')
.pipe(babel({
//它可以判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
presets: ['@babel/env']
}))
.pipe(gulp.dest('dist/js'))
done();
})
4.调用插件gulp jsmin
结果：
压缩js文件：
通过bebel插件，转化成es5，通过gulp-uglify来压缩代码npm install gulp-uglify
2.在gulpfile.js文件中引入插件：const uglify = require('gulp-uglify');
3.编写任务//js任务
//1.es6代码转换
//2.代码压缩
gulp.task('jsmin',(done) => {
gulp.src('./src/js/*.js')
.pipe(babel({
//它可以判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
presets: ['@babel/env']
}))
.pipe(gulp.dest('dist/js'))
done();
})
4.调用插件gulp jsmin
结果：
四、复制文件夹
一般src文件夹中还会有image文件夹和lib文件夹，需要把他们也复制到dist目录下，只要编写下面任务，执行就好了
//复制文件夹
gulp.task('copy',(done) => {
gulp.src('./src/image/*')
.pipe(gulp.dest('dist/image'));
gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'));
done();
})
执行：gulp copy
结果：
注意：如果image文件夹或者lib文件夹里面没有文件，是空的文件夹，就不会复制到dist文件夹中，就像上图中lib文件夹里面什么都没有，所以dist文件夹中也没有lib文件夹
现在这些任务都知道怎么执行了，因为是分别编写的，如果想要执行也要分别去执行他们，怎样才能执行一个任务，其他任务都能跟着执行呢？
接下来我们就来创建一个构建任务
//构建任务
gulp.task('default',['htmlmin','cssmin','jsmin','copy']);
执行：gulp default
这个原因是：运行gulp项目报错：AssertionError: Task function must be specified，那是因为你安装了gulp4.0.0，gulpfile.js用的是gulp3.9.1的语法。
AssertionError: Task function must be specified错误解决方案npm i gulp@3.9.1重新安装gulp到3.91版
按gulp4.0.0重写gulpfile.js任务列表
把代码改成如下的样子就好了：//构建任务
gulp.task('default',gulp.series('htmlmin','cssmin','jsmin','copy'));
执行结果：
如果任务的名字是“default”，执行时可以省略default
打开App，阅读手记
