gulp-rev с useref переименовывает также файл index.html

Question

Я новичок в использовании gulp и пытаюсь создать gulpfile для своего проекта.

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

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref()) 
    .pipe(gulp.dest(config.paths.dist.src))
});

Эта штука просто объединяет и минимизирует все мои файлы JS и CSS и создает для них единый скрипт и тег ссылки. Все хорошо, пока здесь.

Теперь я хочу реализовать хеширование для объединенных файлов JS и CSS. Для этого я использую плагин gulp-rev и gulp-rev-replace, как показано ниже.

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref())
    .pipe(rev())
    .pipe(revReplace()) 
    .pipe(gulp.dest(config.paths.dist.src))
});

Это также хорошо работает, но для одной маленькой вещи. Он создает хэшированные имена файлов не только для моих файлов JS и CSS, но и для моего файла index.html, а также ниже.

Есть ли способ избежать переименования файла index.html при сохранении хэшированных имен файлов JS и CSS, потому что мой сервер будет искать файл index.html в папке, а не index-*********. HTML?

Благодарю.

Answer 1

Я не уверен, что это идеальный способ решения проблемы, но мое решение было применить gulpif отфильтровать ресурсы CSS / JS, а затем вызвать rev(), revReplace все равно следует обновить индексный файл, чтобы использовать переименованные ресурсы css/js.

По сути, вы можете добавить следующий канал в ваш поток:

.pipe(gulpif(*.{js,css}, rev()))

Пример на основе вашего кода:

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref())
    .pipe(gulpif('*.{js,css}', rev()))
    .pipe(revReplace()) 
    .pipe(gulp.dest(config.paths.dist.src))
});

Answer 2

У меня была такая же проблема, но я использовал gulp-rev-all вместо gulp-rev как ты.

Мое решение (обходной путь) будет по-прежнему работать для вас и других заинтересованных лиц.

По сути, вам нужно запустить еще одно задание gulp после того, как вы "ревизуете" все свои файлы.

я использую gulp-inject чтобы захватить недавно пересмотренные файлы и вставить их в мой файл index.html.

Шаг 1: использовать gulp-rev или же gulp-rev-all в моем случае, чтобы пересмотреть ваши файлы и сохранить их на свой /dist папка.

Пример:

gulp.task('rev', function () {

   var css= gulp
      .src(styles)
        .pipe(concat('main.css'))
     .pipe(RevAll.revision())
      .pipe(gulp.dest('dist/css'));

    var js = gulp
        .src(scripts)
        .pipe(concat('scripts.js'))
        .pipe(RevAll.revision())
        .pipe(gulp.dest('dist/js'));

    return merge(css, js); //merge is from the gulp plugin merge-stream.  It allows me to manipulate multiple streams in 1 task instead of having separate tasks.

});

Шаг 2: Используйте gulp-inject внедрить вновь созданные ссылки на файлы CSS / JS в ваш index.html

Разметьте ваш index.html следующим образом:

  <!-- inject:css -->
  <!-- endinject -->

<!-- inject:js -->
<!-- endinject -->

Шаг 3: Используйте gulp-inject чтобы захватить недавно пересмотренные файлы и внедрить их в ваш index.html

gulp.task('inject',
    function() {
        var jsSource = gulp.src('./dist/js/*.js', { read: false });
        var cssSource = gulp.src('./dist/css/*.css', { read: false });
        return gulp.src('./index.html')
            .pipe(inject(merge(jsSource, cssSource)))
            .pipe(clean({force:true}))
        .pipe(gulp.dest('./'));
    });

В моем проекте я НЕ помещаю index.html в папку dist. Может быть, я должен, но в этом примере / проекте я не.

Структура моей папки

index.html
--/dist
---/js
---/css
---/views

---

глоток впрыскивать документацию

gulp-rev-all документация

Пожалуйста, дайте мне знать, если есть какие-либо дополнительные вопросы, я хотел бы ответить на них

Answer 3

Пытаться

var ignoreIndexHtml = gulpfilter(['**/*', '!**/index.html'], { restore: true });

return gulp
    .src('......')
    .pipe('......')
    .pipe('......')
    .pipe(ignoreIndexHtml)
    .pipe($.rev())    
    .pipe(ignoreIndexHtml.restore)    
    .pipe($.revReplace())
    .pipe(gulp.dest('......'));