- gulp 是一个构建工具，基于Node.js的平台运行，使用的是commonJs的模块化语法。
- 我们使用gulp需要用到的包
- 一个TASK任务，对应一个包，对应一个处理逻辑、
- gulp.series对应的是同步任务，从左到右，依次执行任务。时间长
- gulp.parallel对应的是异步任务，效率高，时间短。
- gulp.src 表明文件从哪里读取
- gulp.dest 表明文件输出到哪
const gulp = require('gulp'); //gulp的包
const eslint = require('gulp-eslint'); //eslint的包 语法检查
const babel = require('gulp-babel'); //编译ES语法的babel包
const browserify = require('gulp-browserify'); //编译commonJs语法的工具
const rename = require("gulp-rename"); //重命名文件的包
const less = require('gulp-less'); // 识别less文件的gulp的包
const livereload = require('gulp-livereload'); //监控文件的包
const connect = require('gulp-connect'); // 热更新的包
const open = require("open"); //打开网页的包
const uglify = require('gulp-uglify'); //压缩JS代码的包
const LessAutoprefix = require('less-plugin-autoprefix'); //将LESS文件混合的插件包
// https://github.com/browserslist/browserslist
const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] }); //拓展CSS识别的包
const cssmin = require('gulp-cssmin'); //压缩CSS的包
const concat = require('gulp-concat'); //合并文件的包
const htmlmin = require('gulp-htmlmin'); //压缩HTML的包
// 注册任务
/*
开发套路：
1. 去https://gulpjs.com/plugins/搜相关的插件 gulp-xxx
2. 打开插件的npm仓库 看文档使用
3. 下载并引入gulp插件
4. 配置插件任务
*/
// 语法检查 必须有一个eslint的配置文件
gulp.task('eslint', function () {
// 读取所有的js文件， 返回值就是一个可读流
return gulp.src(['src/js/*.js'])
// 对流中的文件/数据进行语法检查
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError())
.pipe(livereload());
})
// 语法转换
// babel能将es6模块化语法转换为commonjs模块化语法
// 能将es6及其以上的语法转换为es5及其以下的语法
gulp.task('babel', () =>
// 读取所有js文件
gulp.src('src/js/*.js')
// 进行语法转换
.pipe(babel({
presets: ['@babel/preset-env'] //此处需要修改，官网有误
}))
// 输出出去
.pipe(gulp.dest('build/js'))
.pipe(livereload())
);
// 将commonjs的模块化语法转换成浏览器能识别语法
gulp.task('browserify', function() {
// 只要放入口文件
return gulp.src('build/js/app.js')
.pipe(browserify())
// 重命名文件
.pipe(rename("built.js"))
.pipe(gulp.dest('build/js'))
.pipe(livereload());
});
// 压缩js代码
gulp.task('uglify', function () {
return gulp.src('./build/js/built.js')
.pipe(uglify())
.pipe(rename('dist.min.js'))
.pipe(gulp.dest('dist/js'))
})
// 将less编译成css
gulp.task('less', function () {
return gulp.src('./src/less/*.less')
.pipe(less())
.pipe(gulp.dest('./build/css'))
.pipe(livereload());
});
// 压缩css
gulp.task('css', function () {
return gulp.src('./src/less/*.less')
.pipe(concat('dist.min.css'))
.pipe(less({
plugins: [autoprefix]
}))
.pipe(cssmin())
.pipe(gulp.dest('./dist/css'))
});
// 压缩html
gulp.task('html', () => {
return gulp.src('src/*.html')
.pipe(htmlmin({
collapseWhitespace: true, // 去除空格
removeComments: true // 去掉注释
}))
.pipe(gulp.dest('dist'));
});
// 自动化 --> 自动编译 --> 自动刷新浏览器（热更新） --> 自动打开浏览器
gulp.task('watch', function() {
livereload.listen();
// 开启服务器
connect.server({
name: 'Dev App',
root: ['build'],
port: 3000,
livereload: true //热更新
});
// 打开浏览器
open('http://localhost:3000');
// 监视指定文件，一旦文件发生变化，就执行后面的任务
gulp.watch('src/less/*.less', gulp.series('less'));
gulp.watch('src/js/*.js', gulp.series('js-dev'));
});
// 配置默认任务 --> 执行以上多个任务
gulp.task('js-dev', gulp.series('eslint', 'babel', 'browserify')); // 同步顺序执行，同一时间只能执行一个任务 速度慢
gulp.task('js-prod', gulp.series('js-dev', 'uglify'));
// gulp.task('default', gulp.parallel('eslint', 'babel', 'browserify')); // 异步执行，同一时间执行多个任务 速度快
gulp.task('build', gulp.parallel('js-dev', 'less'));
// 生产环境的指令: gulp prod
gulp.task('prod', gulp.parallel('js-prod', 'css', 'html'));
// 开发环境的指令： gulp start
gulp.task('start', gulp.series('build', 'watch'));上面包括了基本上所有gulp工程化所需要的包的使用方法和注释，喜欢的朋友希望你收藏！
