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 you have read our privacy policy.

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