首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >我可以使用什么正则表达式来匹配超文本标记语言文档中的CSS和JavaScript链接?

我可以使用什么正则表达式来匹配超文本标记语言文档中的CSS和JavaScript链接?
EN

Stack Overflow用户
提问于 2018-10-13 19:07:24
回答 2查看 753关注 0票数 0

我正在使用一个简单的吞咽任务来“缩小”我的CSS和JS文件。该任务会将.min后缀添加到精简文件的名称中。我想更新HTML以指向新的压缩文件,例如:

更改此设置:

代码语言:javascript
复制
<link ...  href="...some_name.css ..." ...>

To this:

代码语言:javascript
复制
<link ...  href="...some_name.min.css ..." ...>

我使用gulp-string-replace plugin,但是我找不到正确的正则表达式来定位JS和CSS链接。我不想硬编码文件名,而且我显然不能只匹配字符串.css.js

示例任务:

代码语言:javascript
复制
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'))
});
EN

回答 2

Stack Overflow用户

发布于 2018-10-13 19:54:36

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

代码语言:javascript
复制
replace(/href=\"(\S*)\.css\"/gi, 'href="$1.min.css"')
票数 0
EN

Stack Overflow用户

发布于 2018-10-17 03:52:35

通常的方法是在你的工作流程中加入像gulp-processhtml插件这样的东西。它的设计就是为了做你正在做的事情。

代码语言:javascript
复制
  <!-- build:css style.min.css -->
  <link rel="stylesheet" href="css/style.css">
  <!-- /build -->

变得简单

代码语言:javascript
复制
<link rel="stylesheet" href="style.min.css">

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

代码语言:javascript
复制
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));
}

这似乎比胡乱摆弄regex要简单得多,但也许你有理由避免这样的插件?

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52792269

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档