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工程化所须要的包的运用方法和解释,喜好的朋侪愿望你珍藏!