Gulp一般用于处理自动化任务。默认情况下，它不能处理模块化，不会用于大型项目，但它可以使用各种插件来编译html、css和js等资源。不知道如何使用gulp启动任务的朋友可以参考gulp使用指南处理html。处理html资源，使用gulp-htmlmin插件，类似于webpack中使用的html-webpack-plugin。//gulpfile.jsconst{src,dest}=require('gulp');consthtmlMin=require('gulp-htmlmin');consthtmlTask??=()=>{//base表示基础目录，编译后保持不变文件结构returnsrc('./src/*.html',{base:'./src'}).pipe(htmlMin({collapseWhitespace:true,})).pipe(dest('./dist'));};module.exports={htmlTask??,};执行npxgulphtmlTask??，此时将html资源编译输出到dist文件夹中进行less处理。要处理布局，样式文件是不可避免的。需要Gulp-less来处理更少的文件。如果需要处理css兼容性，则需要使用postcss及其需要的插件postcss-preset-env。webpack处理css资源那篇文章有详细介绍。const{src,dest}=require('gulp');constless=require('gulp-less');constpostcss=require('gulp-postcss');constpostCssPresetEnv=require('postcss-preset-env');constlessTask=()=>{returnsrc('./src/css/*.less',{base:'./src'}).pipe(less()).pipe(postcss([postcssPresetEnv()])).pipe(dest('./dist'));};module.exports={lessTask,};执行npxgulplessTask，将less文件处理成css文件处理jsgulp-babel用于转换代码等兼容处理，用法类似于webpack中的babel-loader，gulp-terser用于压缩文件，用法类似terser-webpack-pluginconst{src,dest}=require('gulp');constterser=require('gulp-terser');constbabel=require('gulp-babel');constjsTask=()=>{returnsrc('./src/js/*.js',{base:'./src'}).pipe(babel({presets:['@babel/preset-env']})).pipe(terser({mangle:{toplevel:true}})).pipe(dest('./dist'));};module.exports={htmlTask??,lessTask,jsTask,};执行npxgulpjsTask，编译文件可以看到es6转es5压缩后的代码。html资源注入编译后的css和js资源默认不会添加到html页面中。我们需要使用插件`gulp-inject`来帮助编译，并在模板html文件中添加魔法注释，告知资源导入地址。const{src,dest}=require('gulp');constinject=require('gulp-inject');constinjectHtml=()=>{returnsrc('./dist/*.html').pipe(//使用相对路径导入js和css资源inject(src(['./dist/js/*.js','./dist/css/*.css']),{relative:true,})).pipe(dest('./dist'));};module.exports={injectHtml,};在html文件中添加了魔术注释，因此需要重新编译html文件，然后在html页面中引入js和css。依次执行npxgulphtmlTask??和npxgulpinjectHtml格式化编译好的html文件，可以看到指定位置已经导入了js和css文件。开启自动服务在开发的时候，通常会想要开启一个服务。当文件内容发生变化时，编译后的代码也会同步变化，这样可以更好的查看代码执行的效果。这时候就需要使用browser-sync来操作了。const{src,dest,watch}=require('gulp');constbrowserSync=require('浏览器同步');constbs=browserSync.create();constserve=()=>{//当文件发生变化时，重新编译文件并注入到html文件中watch('./src/*.html',series(htmlTask??,injectHtml));watch('./src/js/*.js',series(jsTask,injectHtml));watch('./src/css/*.less',series(lessTask,injectHtml));//自动服务配置bs.init({port:8808,open:true,files:'./dist',server:{baseDir:'./dist',},});};module.exports={serve,};此时服务不会中断，代码更新会重新编译文件组合任务上面的各个任务，它们都是独立的。每种类型的文件编译都需要执行一条命令。要启用自动服务，必须先将html、css、js编译到dist文件夹中。执行命令的次数会太繁琐。进行整合。const{series,parallel}=require('gulp');//series表示串行，parallel表示并行constbuildTask=series(parallel(htmlTask??,lessTask,jsTask),injectHtml);constserveTask=series(buildTask,serve);module.exports={buildTask,serveTask,};这样只需要导出两个任务就可以覆盖编译和开启自动化服务两个场景。也可以在package.json中配置脚本命令直接通过npmTask执行，执行npxgulpserveTasksummarizehtml文件使用插件gulp-htmlmin压缩codeless文件使用插件gulp-less分析css文件兼容性使用gulp-postcsspostcss-preset-env处理js文件使用gulp-babel进行代码转换，gulp-terser压缩代码gulp-inject给html页面添加资源，带有魔法注释browser-syncandwatch启用编译系列自动服务并行串行和并行组合任务以上就是gulp处理html、css、js资源的介绍，更多关于前端和工程的内容可以参考我的其他博文，持续更新中~
