Файлы не были переписаны в html-файл с помощью gulp-usemin

У меня проблема с gulp-usemin плагин. когда usemin задание выполняется, оно завершает и унизительно css а также js файлы, но файлы uglified js не переписываются в html-файл, хотя он генерируется. Я делюсь своим кодом gulpfile.js и index.html.

index.html до преобразования

<html>
    <head>
        <!-- build:css build/css -->
        <link rel="stylesheet" href="css/blue.css">
        <link rel="stylesheet" href="css/green.css">
        <link rel="stylesheet" href="css/orange.css">
        <!-- endbuild -->
        <!-- build:js build/js1 -->
        <script src="js/add.js"></script>
        <script src="js/sub.js"></script>
        <script src="js/mul.js"></script>
        <!-- endbuild -->
    </head>
    <body>

        <p class="blue" id="sum"></p>
        <p class="green" id="diff"></p>
        <p class="orange" id="mul"></p>
        <img src="images/1.jpg" width="304" height="228">
        <img src="images/2.jpg" width="304" height="228">

        <script>
        document.getElementById('sum').innerHTML=add(4,4);
        document.getElementById('diff').innerHTML=sub(4,4);
        document.getElementById('mul').innerHTML=mul(4,4);

        </script>
    </body>
</html>

gulpfile.js

var usemin = require('gulp-usemin');
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minifyHtml = require('gulp-minify-html');
var minifyCss = require('gulp-minify-css');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rev = require('gulp-rev'),
    notify = require('gulp-notify');

gulp.task('usemin', function() {
  gulp.src('./*.html')
    .pipe(usemin({
      css: [minifyCss(), 'concat'],
      html: [minifyHtml({empty: true})],
      js: [uglify()]
    }))
    .pipe(gulp.dest('build/'));
});

index.html после преобразования

//you can see that build/css is generated but build/js is not generated
<html>
    <head>
    <link rel="stylesheet" href="build/css"/>

    </head>
    <body>

    <p class="blue" id="sum"></p>
    <p class="green" id="diff"></p>
    <p class="orange" id="mul"></p>
    <img src="images/1.jpg" width="304" height="228">
    <img src="images/2.jpg" width="304" height="228">

    <script>
    document.getElementById('sum').innerHTML=add(4,4);
    document.getElementById('diff').innerHTML=sub(4,4);
    document.getElementById('mul').innerHTML=mul(4,4);

    </script>
    </body>
</html>

Помогите мне в решении этой проблемы. Заранее спасибо.

Источник

1 ответ

Решение

Во-первых, вам не хватает rev в вашем jsusemin позвони, поменяй task чтобы:

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

  gulp.src('./*.html')
    .pipe(usemin({
      css: [minifyCss(), 'concat'],
      html: [minifyHtml({empty: true})],
      js: [uglify(), rev()]
    }))
    .pipe(gulp.dest('build/'));

  });

Кроме того, последний параметр blocks в gulp-usemin представляют путь file, Вы должны уточнить расширение, чтобы не перепутать с каталогом

<!-- build:css build/style.css -->

<!-- build:js build/js1.js -->

Для ясности, вы также должны поставить разрыв строки между двумя разными блоками.

Источник
Другие вопросы по тегам