使用Gulp压缩静态资源
如果希望对在静态页面中引入的相关资源进行压缩（比如：CSS，JavaScript，图片等），可以使用Gulp实现。 当然，还可以其他其他打包工具，比如：Grunt，Webpack等等。
Gulp是什么
Gulp是一个用于对静态Web资源进行打包的工具，可以实现对静态资源的压缩，本质上是一个npm模块。 在正式使用Gulp之前，需要先安装并配置好Node.js环境。
# 查看node.js版本
node --version
v16.15.1
# 查看npm版本
npm --version
8.11.0
# 全局安装gulp和gulp-cli命令行工具
npm install --global gulp
npm install --global gulp-cli
# 查看gulp版本
gulp -version
CLI version: 2.3.0
Local version: 4.0.2如何使用Gulp
Gulp是一个流式构建工具，具体要执行的任务可以在项目根目录下新建一个名叫“gulpfile.js”的文件，并在其中进行配置。
// 引入gulp模块
var gulp = require('gulp');
gulp.task('task1', function() {
// 这里是任务代码
});然后执行：gulp task1即可。
实际上，Gulp是一个插件化的工具，配置文件中的各个任务都是通过指定的插件实现的，当需要使用某个插件时需要先安装该插件。 可以在这里搜索指定的Gulp插件。
应用实践
如下示例将实现对静态网站中使用CSS，JavaScript和图片资源进行压缩，并最终打包到指定目录。
在项目根目录下安装对应插件：
# 使用gulp-uglify压缩js
npm install --save-dev gulp-uglify
# 使用gulp-clean-css压缩css
npm install --save-dev gulp-clean-css
# 使用gulp-smushit压缩图片
npm install --save-dev gulp-smushit
# 使用gulp-htmlmin压缩html
npm install --save-dev gulp-htmlmin在项目根目录下编辑“gulpfile.js”配置文件：
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const cleancss = require('gulp-clean-css');
const smushit = require('gulp-smushit');
const htmlmin = require('gulp-htmlmin')
// 压缩js
gulp.task('minscript', function() {
return gulp.src('./assets/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('./dist/assets/js'));
})
// 压缩css
gulp.task('mincss', function() {
return gulp.src('./assets/css/*.css')
.pipe(cleancss())
.pipe(gulp.dest('./dist/assets/css'));
})
// 压缩html
gulp.task('minhtml', function() {
return gulp.src('./*.html')
.pipe(htmlmin({
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: false, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: false, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
}))
.pipe(gulp.dest('./dist'));
})
// 压缩图片
gulp.task('minimg', function () {
return gulp.src('./assets/img/*.{jpg,png}')
.pipe(smushit())
.pipe(gulp.dest('./dist/assets/img'));
});
// 批量复制文件
gulp.task('copy', async function() {
gulp.src('./assets/fonts/*.*').pipe(gulp.dest('./dist/assets/fonts'));
gulp.src('./assets/json/*.json').pipe(gulp.dest('./dist/assets/json'));
gulp.src('./*.{png,ico}').pipe(gulp.dest('./dist'));
})
// 明确指定默认构建操作包含的任务，如果不指定默认构建任务，则需要以参数形式指定任务，如：gulp minscript mincss minhtml copy
module.exports.default = gulp.series(gulp.parallel('minscript','mincss','minhtml','minimg','copy'))然后在项目根目录下执行：gulp即可完成打包动作，将相应资源打包到项目根目录下的dist目录中。
【参考】 https://blog.csdn.net/qq_43817164/article/details/118107169 Gulp入门 https://zhuanlan.zhihu.com/p/354233622 Gulp 使用gulp压缩JS https://blog.csdn.net/weixin_45195200/article/details/115323006 Gulp 使用gulp压缩CSS https://blog.csdn.net/weixin_45195200/article/details/115459128 Gulp 使用gulp压缩图片 https://www.cnblogs.com/zlf1914/p/13144381.html gulp压缩html，css，js文件流程、监听任务、使用gulp创建服务器、同时运行多个任务、反向代理