1

Использую для сборки gulp и плагины gulp-hash, gulp-useref.

gulpfile.js выглядит так:

    'use strict';

var gulp         = require('gulp'),
    useref       = require('gulp-useref'),
    hash         = require('gulp-hash');

// Пути
var path = {
  app : {          // Исходники
    html   : 'app/*.html',
    js     : 'app/js/**/*.js'
  },
  dist : {         // Релиз
    html   : 'dist/',
    js     : 'dist/js/'
  },
  watch : {        // Наблюдение
    html   : 'app/**/*.html',
    js     : 'app/js/**/*.js',
  }
};

// Работа с HTML
gulp.task('html', function(){
  gulp.src(path.app.html)   
    .pipe(useref())
    .pipe(gulp.dest(path.dist.html));
});

// Работа с JS
gulp.task('js', function(){
  gulp.src(path.app.js)
    .pipe(hash())
    .pipe(gulp.dest(path.dist.js));
});

// Наблюдение
gulp.task('watch', function () {    
  gulp.watch(path.watch.html, ['html']);
  gulp.watch(path.watch.js, ['js']); 
});

// Задачи по-умолчанию
gulp.task('default', [
  'html',
  'js'  
]);

В index.html:

  <!-- build:js js/main.js -->
    <script type="text/javascript" src="js/main.js"></script>   
  <!-- endbuild -->

userefом собираю main.js.

Структура:

-app
  |__ js
  |     |__ main.js
  |__ index.html

-dist
  |__ js
  |     |__ main.js
  |     |__ main-b5d60504.js
  |__ index.html

-gulpfile.js
-package.json

Вопрос:

Как можно поправить gulpfile.js, чтобы на выходе сборки в dist/index.html был подключен хэшированный файл main-b5d60504.js, а не main.js как сейчас? И чтобы в dist/js собирался только хэшированный файл скрипта?

2
  • непонятно для чего именно здесь useref используется 4 июл 2016 в 11:26
  • В данном примере можно и без него!
    – SVE
    4 июл 2016 в 11:51

1 ответ 1

1

Для простых случаев можно воспользоваться поиском/заменой, с помощью gulp-replace.

Для этого вам понадобится знать новое имя переименованного плагином gulp-hash файла. Это можно сделать сохранив список переименованных файлов с помощью hash.manifest('assets.json'), а затем прочитав его в задаче 'html', чтобы использовать для поиска/замены.

Также обратите внимание, что используется return в задачах (в вашем примере их нет), в противном случае зависимые задачи будут запускаться не дожидаясь завершения задач от которых они зависят.

В данном случае важно, что сначала будет отработана задача 'js', чтобы получить новое имя файла, а затем задача 'html', чтобы сделать замену в тексте.

Пример gulpfile.js

var gulp = require('gulp'),
  replace = require('gulp-replace'),
  hash = require('gulp-hash');

gulp.task('js', function() {
  return gulp.src('src/js/*')
    .pipe(hash())
    .pipe(gulp.dest('dist'))
    .pipe(hash.manifest('assets.json'))
    .pipe(gulp.dest('tmp'));
});

gulp.task('html', ['js'], function() {
  var assets = require('./tmp/assets.json');
  return gulp.src('src/index.html')
    .pipe(replace('main.js', assets['main.js']))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', ['html'], function() {

});
9
  • что-то не так ( Error: Cannot find module '../tmp/assets.json' путь и так как у вас и так ../tmp/assets.json и так tmp/assets.json прописываю и никак ))
    – SVE
    4 июл 2016 в 14:01
  • проверьте куда assets.json в вашем случае сохраняется 4 июл 2016 в 14:01
  • app, dist, tmp на одном уровне
    – SVE
    4 июл 2016 в 14:03
  • тогда наверное одна точка нужна в пути, вместо двух (./tmp/assets.json) 4 июл 2016 в 14:04
  • ага, поняла, беда в том, что tmp создается после [html] ... странно, ведь js отрабатывает , а потом уже html идет
    – SVE
    4 июл 2016 в 14:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.