Какое регулярное выражение можно использовать для сопоставления ссылок CSS и JavaScript в документе HTML? - PullRequest
Новая
       23

Какое регулярное выражение можно использовать для сопоставления ссылок CSS и JavaScript в документе HTML?

0 голосов
/ 13 октября 2018

Я использую простую задачу 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'))
});

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

Обычный способ сделать это - включить в рабочий процесс что-то вроде плагина gulp-processhtml .Он предназначен для того, чтобы делать именно то, что вы делаете. 

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

становится просто 

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

Вот задача gulp 4.0, которую я использую при перемещении версии HTML для разработки в развертывание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));
}

Это кажется гораздо более надежным, чем возиться с регулярными выражениями, но, возможно, у вас есть причина, чтобы избежать такого плагина?

0 голосов
/ 13 октября 2018

Это решит ваш вопрос, но будет включать все ссылки на CSS-файлы. 

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