gulp文件压缩，添加版本号，文件路径替换的实例

最新推荐文章于 2022-06-17 20:13:23 发布

Zac Kevin

最新推荐文章于 2022-06-17 20:13:23 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端自动构建工具文章标签： gulp gulp添加版本号 gulp路径替换 gulp基础 gulp学习

本文链接：https://blog.youkuaiyun.com/weixin_29276041/article/details/82893648

本文介绍了如何使用gulp进行文件压缩、合并，并添加版本号。内容包括gulp的配置设置，通过实例展示了gulpfile.js的编写，以及执行命令后的文件结构变化。作者强调在实际生产环境中，由于文件量大，采用一次性整体压缩打包的方式，而非实时监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于如何搭建gulp和准备工作请看上一篇文章
gulp从头到尾实现压缩，合并，加版本号以及部分问题解决(初版)（mac）

1- 我的文件结构如下：
在这里插入图片描述

2- gulpfile.js 文件配置如下：

var gulp = require('gulp'),
    rev = require('gulp-rev'), // 给静态资源文件名添加hash值:unicorn.css => unicorn-d41d8cd98f.css
	runSequence = require('run-sequence'),
	jshint = require('gulp-jshint'), // js文件压缩错误检查，具体用法可百度，很简单，这里不多说了
	uglify = require('gulp-uglify'), // js混淆压缩
	imgMin = require('gulp-imagemin'), // 图片压缩
	csso = require('gulp-csso'), // css压缩
	htmlmin = require('gulp-htmlmin'), // html压缩
	clean = require('gulp-clean'), // 清除文件、文件夹

// 定义css，js源文件路径
var cssSrc = ['css/*.css', '!./node_modules/**'];
var jsSrc = ['js/*.js', '!./node_modules/**'];
var imgSrc = ['img/**/*.{png,jpg,gif,ico,jpeg}', '!./node_modules/**'];

// 清空文件夹 (read: false:不读取文件，加快程序)
gulp.task('cle