针对CSS文件的压缩，可以使用Gulp插件`gulp-clean-css`。安装命令为`npm install gulp-clean-css --save-dev`。对于JS文件的压缩，则推荐使用`gulp-terser`插件，安装命令为`npm install gulp-terser --save-dev`。HTML文件的压缩可以通过`gulp-htmlmin`插件完成，安装命令是`npm install gulp-htmlmin ...
Gulp 压缩 CSS 和 JS，并添加 hash， 解决文件缓存问题
在进行项目打包时，压缩CSS、JS以及HTML文件，并为文件添加哈希值，以解决服务器文件缓存问题，这可以通过使用Gulp打包工具实现。以下是实现这一目标的步骤。
针对CSS文件的压缩，可以使用Gulp插件`gulp-clean-css`。安装命令为`npm install gulp-clean-css --save-dev`。
对于JS文件的压缩，则推荐使用`gulp-terser`插件，安装命令为`npm install gulp-terser --save-dev`。
HTML文件的压缩可以通过`gulp-htmlmin`插件完成，安装命令是`npm install gulp-htmlmin --save-dev`。
为了在CSS和JS文件名后缀生成哈希值，可以引入Gulp插件`gulp-rev`。安装命令为`npm install gulp-rev --save-dev`。生成的`rev-mainifest.json`文件将存储修改前后的文件映射关系，例如：`fileBeforeHash -> fileAfterHash`。
为了在HTML中将哈希文件名写入，可以使用`gulp-rev-collector`插件，安装命令为`npm install gulp-rev-collector --save-dev`。该插件会读取所有的HTML文件，并将`rev-mainifest.json`中对应文件替换为添加哈希后的文件名。
在每次修改文件后，应先删除旧版文件以避免内存浪费和文件混淆。这可以通过Gulp插件`gulp-clean`实现，安装命令为`npm install gulp-clean --save-dev`。在每次打包文件前，应先执行删除操作。
最后，创建Gulp任务，执行命令`gulp packCSSJS`，即可查看HTML文件中的CSS和JS引用已经更新为含有哈希值的文件名。
在使用`import ** from "plugin_name"`的ES6模块语法时，需要在`package.json`文件中添加`"type": "module"`，以避免出现错误"Cannot use import statement outside a module"。2024-10-24
