gulp 个别用于解决自动化工作，默认状况无奈解决模块化，也不会用于大型项目，但它能够应用各种插件来编译 html、css、js 等资源。
不分明如何应用 gulp 开启工作的敌人能够参考 gulp使用指南
解决html
解决 html 资源应用到 gulp-htmlmin 这个插件，和 webpack中应用到的html-webpack-plugin 比拟类似。
// gulpfile.jsconst { src, dest } = require('gulp');const htmlMin = require('gulp-htmlmin');const htmlTask = () => { // base 示意根本目录，编译后会放弃原文件构造 return src('./src/*.html', { base: './src' }) .pipe( htmlMin({ collapseWhitespace: true, }) ) .pipe(dest('./dist'));};module.exports = { htmlTask,};执行 npx gulp htmlTask ，此时将 html 资源编译输入到 dist 文件夹下
解决less
要解决布局就免不了款式文件，解决 less 文件须要用到 gulp-less，如果对于 css 兼容性还要做解决的话，就须要用到 postcss 和它所须要的插件 postcss-preset-env，webpack解决css资源 文章中有具体介绍
const { src, dest } = require('gulp');const less = require('gulp-less');const postcss = require('gulp-postcss');const postCssPresetEnv = require('postcss-preset-env');const lessTask = () => { return src('./src/css/*.less', { base: './src' }) .pipe(less()) .pipe(postcss([postcssPresetEnv()])) .pipe(dest('./dist'));};module.exports = { lessTask,};执行 npx gulp lessTask，less 文件会被解决成 css 文件
解决js
gulp-babel 用于转化代码等兼容解决，用法和 webpack中babel-loader 类似，gulp-terser 用于压缩文件，用法和 terser-webpack-plugin 类似。
const { src, dest } = require('gulp');const terser = require('gulp-terser');const babel = require('gulp-babel');const jsTask = () => { return src('./src/js/*.js', { base: './src' }) .pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(terser({ mangle: { toplevel: true } })) .pipe(dest('./dist'));};module.exports = { htmlTask, lessTask, jsTask,};执行 npx gulp jsTask，编译后文件能看到es6转换es5和压缩的代码。
html资源注入
编译后的 css 和 js 资源不会被默认增加到 html 页面中，咱们须要借助插件 `
gulp-inject` 帮忙编译，并在模板 html 文件中增加魔法正文，告知资源引入的地址。
const { src, dest } = require('gulp');const inject = require('gulp-inject');const injectHtml = () => { return src('./dist/*.html') .pipe( // 应用相对路径将js和css资源引入 inject(src(['./dist/js/*.js', './dist/css/*.css']), { relative: true, }) ) .pipe(dest('./dist'));};module.exports = { injectHtml,};在 html 文件中增加了魔法正文，所以须要从新编译 html 文件，再将 js 和 css 引入到 html 页面中。顺次执行 npx gulp htmlTask 和 npx gulp injectHtml，将编译后的 html 文件格式化，能够看到曾经在指定地位引入了 js 和 css 文件。
开启主动服务
在开发的时候，通常心愿开启一个服务，当文件内容发生变化时，编译后的代码也同步发生变化，可能更好的查看代码执行的成果，这时候要用到 browser-sync 来操作。
const { src, dest, watch } = require('gulp');const browserSync = require('browser-sync');const bs = browserSync.create();const serve = () => { // 当文件变动时，从新编译文件，并注入到 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 示意并行const buildTask = series(parallel(htmlTask, lessTask, jsTask), injectHtml);const serveTask = series(buildTask, serve);module.exports = { buildTask, serveTask,};这样只须要导出两个工作，就能够笼罩 编译 和 开启主动服务 两个场景，还能够在 package.json 中配置 script 命令，就能够间接通过 npm 来执行工作，执行 npx gulp serveTask
总结
- html 文件通过插件
gulp-htmlmin对代码压缩 - less 文件应用插件
gulp-less解析， css 文件兼容性通过gulp-postcsspostcss-preset-env解决 - js 文件应用
gulp-babel进行代码转换，gulp-terser压缩代码 gulp-inject配合魔法正文将资源增加到 html 页面中browser-sync和watch为编译开启主动服务seriesparallel串行和并行组合工作
以上就是 gulp 解决html、css、js资源的介绍， 更多无关 前端、工程化 的内容能够参考我其它的博文，继续更新中~