Как заменить имена файлов, перечисленные в index.html, на вывод gulp -rev?

Я использую gulp-rev для создания статических файлов, которые я могу установить для никогда не истекает. Я хотел бы заменить все ссылки на сгенерированные файлы в index.html на эти переименованные файлы, но я не могу найти ничего, что делает Grunt с помощью usemin.

Насколько я могу судить сейчас, у меня есть несколько вариантов.

Используйте gulp-usemin2, который зависит от gulp -rev. Когда я иду искать Gulp плагины, он говорит, что gulp -usemin2 делает слишком много, поэтому я должен использовать gulp-useref, но я не могу настроить gulp -ref для использования вывода gulp -rev.
Создайте собственный плагин, замените блоки (скрипты и стили) в index.html(и в CSS) сгенерированными файлами.

Любые идеи? Я не понимаю, почему этот небольшой случай использования должен быть единственным, что может заменить мой Grunt.

Ответ 1

Вместо того, чтобы пытаться решить эту проблему, несколько шагов gulp (которые gulp -rev, похоже, хотят, чтобы вы это делали), я расколол gulp -rev на gulp-rev-all, чтобы решить эту проблему в одном плагине gulp.

Для моего личного использования я хотел полностью пересмотреть все, но как кто-то еще поднял запрос функции, должна быть возможность исключать определенные файлы, такие как index.html. Это будет реализовано в ближайшее время.

Ответ 2

Я только что написал gulp плагин для этого, он отлично работает с gulp -rev и gulp -useref.

Использование будет зависеть от того, как вы это настроили, но должно выглядеть примерно так:

gulp.task("index", function() {
  var jsFilter = filter("**/*.js");
  var cssFilter = filter("**/*.css");

  return gulp.src("src/index.html")
    .pipe(useref.assets())
    .pipe(jsFilter)
    .pipe(uglify())             // Process your javascripts
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe(csso())               // Process your CSS
    .pipe(cssFilter.restore())
    .pipe(rev())                // Rename *only* the concatenated files
    .pipe(useref.restore())
    .pipe(useref())
    .pipe(revReplace())         // Substitute in new filenames
    .pipe(gulp.dest('public'));
});

Ответ 3

Я столкнулся с одной и той же проблемой, я попробовал gulp -rev-all, но у нее есть некоторая проблема пути, не очень свободная в использовании.

Итак, я выясню решение, используйте gulp -rev и gulp-replace:

Сначала у меня есть символ замены в моих html (js, css) файлах

<link rel="stylesheet" href="{{{css/common.css}}}" />

<script src="{{{js/lib/jquery.js}}}"></script>

в css файлах

background: url({{{img/logo.png}}})

После второй задачи компиляции используйте gulp -replace, чтобы заменить все ссылки на статические файлы:

взять stylus в качестве примера:

gulp.task('dev-stylus', function() {
   return gulp.src(['./fe/css/**/*.styl', '!./fe/css/**/_*.styl'])
             .pipe(stylus({
               use: nib()
             }))
             .pipe(replace(/\{\{\{(\S*)\}\}\}/g, '/static/build/$1'))
             .pipe(gulp.dest('./static/build/css'))
             .pipe(refresh());
});

В рабочей среде используйте gulp -rev для создания rev-manifest.json

gulp.task('release-build', ['release-stylus', 'release-js', 'release-img'], function() {
  return gulp.src(['./static/build/**/*.css',
                   './static/build/**/*.js',
                   './static/build/**/*.png',
                   './static/build/**/*.gif',
                   './static/build/**/*.jpg'],
                   {base: './static/build'})
             .pipe(gulp.dest('./static/tmp'))
             .pipe(rev())
             .pipe(gulp.dest('./static/tmp'))
             .pipe(rev.manifest())
             .pipe(gulp.dest('./static'));
});

Затем используйте gulp -replace, чтобы заменить refs в статических файлах rev-manifest.json:

gulp.task('css-js-replace', ['img-replace'], function() {
  return gulp.src(['./static/tmp/**/*.css', './static/tmp/**/*.js'])
             .pipe(replace(/\{\{\{(\S*)\}\}\}/g, function(match, p1) {
               var manifest = require('./static/rev-manifest.json');
               return '/static/dist/'+manifest[p1]
             }))
             .pipe(gulp.dest('./static/dist'));
});

Ответ 4

Это помогло мне gulp-html-replace.

 <!-- build:js -->
    <script src="js/player.js"></script> 
    <script src="js/monster.js"></script> 
    <script src="js/world.js"></script> 
<!-- endbuild -->
    var gulp = require('gulp');
    var htmlreplace = require('gulp-html-replace');

    gulp.task('default', function() {
      gulp.src('index.html')
        .pipe(htmlreplace({
            'css': 'styles.min.css',
            'js': 'js/bundle.min.js'
        }))
        .pipe(gulp.dest('build/'));
    });

Ответ 5

Вы можете сделать это с помощью gulp -useref, как это.

var gulp = require('gulp'),
    useref = require('gulp-useref'),
    filter = require('gulp-filter'),
    uglify = require('gulp-uglify'),
    minifyCss = require('gulp-minify-css'),
    rev = require('gulp-rev');

gulp.task('html', function () {
    var jsFilter = filter('**/*.js');
    var cssFilter = filter('**/*.css');

    return gulp.src('app/*.html')
        .pipe(useref.assets())
        .pipe(jsFilter)
        .pipe(uglify())
        .pipe(rev())
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(cssFilter.restore())
        .pipe(useref.restore())
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

или вы даже можете сделать это следующим образом:

gulp.task('html', function () {
    var jsFilter = filter('**/*.js');
    var cssFilter = filter('**/*.css');

    return gulp.src('app/*.html')
        .pipe(useref.assets())
        .pipe(rev())
        .pipe(jsFilter)
        .pipe(uglify())
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe(minifyCss())
        .pipe(cssFilter.restore())
        .pipe(useref.restore())
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

Проблема заключается в обновлении путей ресурсов в html с новыми путями файлов rev. gulp -useref этого не делает.