我可以使用什么正则表达式来匹配 HTML 文档中的 CSS 和 JavaScript 链接?

Question

我正在使用一个简单的gulp任务来"缩小"我的CSS和JS文件。该任务会向缩小文件的名称添加一个.min后缀。我想更新 HTML 以指向新的压缩文件，例如：

更改此设置：

<link ...  href="...some_name.css ..." ...>

对此：

<link ...  href="...some_name.min.css ..." ...>

我使用 gulp-string-replace 插件，但我无法找出针对 JS 和 CSS 链接的正确正则表达式。我不想对文件名进行硬编码，我显然不能只匹配字符串.css或.js。

示例任务：

var replace = require('gulp-string-replace');
gulp.task('replace_1', function() {
gulp.src(["./config.js"]) // Any file globs are supported
.pipe(replace(new RegExp('@env@', 'g'), 'production'))
.pipe(gulp.dest('./build/config.js'))
});
gulp.task('replace_2', function() {
gulp.src(["./index.html"])
.pipe(replace(/version(={1})/g, '$1v0.2.2'))
.pipe(gulp.dest('./build/index.html'))
});
gulp.task('replace_3', function() {
gulp.src(["./config.js"])
.pipe(replace(/foo/g, function () {
return 'bar';
}))
.pipe(gulp.dest('./build/config.js'))
});

Answer 1

这将解决您的问题，但将包括所有 css 文件链接。

replace(/href="(S*).css"/gi, 'href="$1.min.css"')

Answer 2

通常的方法是合并类似gulp-processhtml的东西。 工作流程中的插件。 它旨在完全完成您正在做的事情。

<!-- build:css style.min.css -->
<link rel="stylesheet" href="css/style.css">
<!-- /build -->

变得简单

<link rel="stylesheet" href="style.min.css">

以下是我将 html 的开发版本移动到部署目录时使用的 gulp 4.0 任务：

var stripComments = require("gulp-strip-comments");
var modifyHTMLlinks = require("gulp-processhtml");
var addVersionString = require("gulp-version-number");
var print = require('gulp-print').default;
function processHTML() {
return gulp.src(paths.html.src)
.pipe(print())
// modifyHTMLlinks: remove browserSync script link
// update css/js links to .min.css or .min.js
.pipe(modifyHTMLlinks())
.pipe(stripComments.html(stripOptions))
// add ?v=dateTime stamp to css and js links
.pipe(addVersionString(versionConfig))
.pipe(gulp.dest(paths.html.deploy));
}

这似乎比弄乱正则表达式更万无一失，但也许您有一些理由避免使用这样的插件？