目录正文使用gulp.task 建立任务任务的名称任务的回调函数html任务html文件中的代码压缩操作抽取html文件的公共代码CSS任务less语法转换抽取html文件中的公共代
const gulp = require('gulp');
// 引用插件
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// 执行的是下面的代码,而不是整个文件
gulp.task('first', async () => {
await console.log("人生中的第一个gulp任务执行完毕");
// 1.使用gulp.src获取要处理的文件
gulp.src('./src/css/style.css', {
allowEmpty: true
})
// 通过pipe方法处理base.css文件
// pipe方法里面写的是 如何处理代码
.pipe(gulp.dest('dist/css')); // 让base.css在dist/css文件夹中输出
});
gulp.task('htmlmin', async () => {
gulp.src('./src/*.html', {
allowEmpty: true
})
.pipe(fileinclude())
.pipe(htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest('./dist'));
});
gulp.task('cSSMin', async () => {
// 选择css目录下的less和css文件
gulp.src(['./src/css/*.less', './src/css/*.css'])
// 将less语法转换为css语法
.pipe(less())
// 将css代码进行压缩
.pipe(csso())
// 将处理的结果进行输出
.pipe(gulp.dest('dist/css'));
})
gulp.task('jsmin', async () => {
gulp.src('./src/js/*.js')
// 将es5代码转换为es6代码
.pipe(babel({
// 可以判断当前代码的运行环境,将代码转换为当前运行环境所支持的代码
presets: ['@babel/env']
}))
// 把转换的结果进行压缩
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
})
// 复制文件夹
gulp.task('copy', async () => {
gulp.src('./src/img.*')
.pipe(gulp.dest('dist/img'));
gulp.src('./src/*.md')
.pipe(gulp.dest('dist'));
});
// 构建任务
gulp.task('default', gulp.series("htmlmin", "jsmin", "cssmin", "copy"));
// 错误代码
// gulp.task('default', ["htmlmin", "jsmin", "cssmin", "copy"]);
以上就是gulp模块使用方法示例详解的详细内容,更多关于gulp模块使用方法的资料请关注编程网其它相关文章!
--结束END--
本文标题: gulp模块使用方法示例详解
本文链接: https://www.lsjlt.com/news/168646.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0