使用 gulp-usemin 不会在 html 文件中重写 uglified 文件答案

【问题标题】：uglified files are not rewritten in html file using gulp-usemin使用 gulp-usemin 不会在 html 文件中重写 uglified 文件
【发布时间】：2014-07-25 08:46:06
【问题描述】：

我遇到了gulp-usemin 插件的问题。当usemin 任务正在运行时，它正在连接和丑化css 和js 文件，但是虽然生成了丑化的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>

帮助我解决这个问题。提前致谢。

【问题讨论】：

标签： javascript node.js gruntjs gulp grunt-usemin

【解决方案1】：

首先，您在js usemin 通话中缺少rev，请将您的task 更改为：

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

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

  });

另外，gulp-usemin 中blocks 的最后一个参数代表file 的路径。您应该精确扩展名，以免与目录混淆

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

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

为清楚起见，您还应该在两个不同的块之间放置一个换行符。

【讨论】：