①html任务：
1.html文件中代码的压缩操作 gulp-htmlmin
2.抽取html文件中的公共代码 gulp-file-include
开始：
命令行工具：gulp-demo> npm install gulp-htmlmin // 下载插件gulp-htmlmin
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
gulp.task('htmlmin',()=>{
gulp.src('./src/*.html') // 获取文件路径
.pipe(htmlmin({collapseWhitespace:true})) //调用htmlminc插件
.pipe(gulp.dest('dist')) // 输出
});
命令行工具 ：gulp-demo>gulp htmlmin
ps:这样就压缩好了html文件，在dist目录下
命令行工具：gulp-demo> npm install gulp-file-include // 下载插件gulp-file-include
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
gulp.task('htmlmin',()=>{
gulp.src('./src/*.html') // 获取文件路径
.pipe(fileinclude ())
.pipe(htmlmin({collapseWhitespace:true})) //调用htmlminc插件
.pipe(gulp.dest('dist')) // 输出
});
抽取html中公共代码：在src目录中，新建文件夹common（存放公共代码片段）
找html公共代码：头部，尾部
在common文件夹下新建一个目录header.html;将头部公共代码粘贴至header.html中，
将所有包含公共头部代码的HTML文件去除，并在去除位置引入以下代码：@@include('./common/header.html')
命令行工具 ：gulp-demo>gulp htmlmin
②css任务
1.less代码转为CSS代码
2.css代码压缩
开始：
命令行工具：gulp-demo> npm install gulp-less // 下载插件gulp-less
gulp-demo> npm install gulp-csso // 下载插件gulp-csso (--save-dev)
const gulp = require('gulp');
const less = require('gulp-less');
const csso = require('gulp-csso');
gulp.task('cssmin',()=>{
// gulp.src('./src/css/*.less')
gulp.src(['./src/css/*.less','./src/css/*.css']) // 选择css目录下的所有less文件以及css文件
.pipe(less())
.pipe(csso())
.pipe(gulp.dest('dist/css')) // 输出
});
命令行工具 ：gulp-demo>gulp cssmin
③JS任务
1.实现es6代码转换
2.实现代码的压缩
开始：
命令行工具：gulp-demo> npm install (--save-dev) gulp-babel @babel/core @babel/preset-env // 下载插件 gulp-babel
gulp-demo> npm install (--save-dev) gulp-uglify // 下载插件gulp-uglify
const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
gulp.task('jsmin',()=>{
gulp.src('./src/js/*.js')
.pipe(babel({
presets:['@babel/env'] // 判断当前代码运行环境，将代码转换为当前代码坏境所支持的代码
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
命令行工具 ：gulp-demo>gulp jsmin
④复制文件夹图片...
gulp.task('copy',()=>{
gulp.src('./src/images/*')
.pipe(gulp.dest('dist/images'));
gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'))
});
命令行工具 ：gulp-demo>gulp copy
⑤构建任务
gulp.task('default',['htmlmin','cssmin','jsmin','copy']);
命令行工具 ：gulp-demo>gulp default 或者 gulp-demo>gulp