模块化开发流程（gulp模块使用方法示例详解）
导读：正文 const gulp =...
正文
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 建立任务
任务的名称
任务的回调函数
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文件夹中输出
});
html任务
html文件中的代码压缩操作
抽取html文件的公共代码
gulp.task(htmlmin, async () => {
gulp.src(./src/*.html, {
allowEmpty: true
})
.pipe(fileinclude())
.pipe(htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest(./dist));
});
css任务
less语法转换
抽取html文件中的公共代码
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));
})
js任务
es6代码转化
代码压缩
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模块使用方法的资料请关注本站其它相关文章！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！