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

Question

I'm using a simple gulp task for "minifying" my CSS and JS files. The task adds a .min suffix to the name of the minified files. I'd like to update the HTML to point to the new, compressed files eg:

Change this:

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

To this:

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

I use gulp-string-replace plugin , but I can't figure out the right regex to target JS and CSS links. I don't want to hardcode filenames and I obviously can't just match for the strings .css or .js .

Sample tasks:

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

The usual way to do this would be to incorporate something like the gulp-processhtml plugin in your workflow. It is designed to do exactly what you are doing.

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

becomes simply

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

Here is a gulp 4.0 task I use when moving a development version of the html to a deployment directory:

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));
}

This seems much more foolproof than messing with regex's but perhaps you have some reason to avoid such a plugin?