Javascript 未使用gulp usemin在html文件中重写丑陋文件_Javascript_Node.js_Gruntjs_Gulp_Grunt Usemin

Javascript 未使用gulp usemin在html文件中重写丑陋文件

javascript node.js gruntjs gulp

Javascript 未使用gulp usemin在html文件中重写丑陋文件,javascript,node.js,gruntjs,gulp,grunt-usemin,Javascript,Node.js,Gruntjs,Gulp,Grunt Usemin,我在使用gulpusemin插件时遇到了一个问题。当运行usemin任务时，它正在浓缩和丑化css和js文件，但是丑化的js文件不会在html文件中重写，尽管它是生成的。我正在分享我的gulpfile.js和index.html代码转换前index.html 转换后的index.html //您可以看到生成了build/css，但没有生成build/js document.getElementById（'sum'）.innerHTML=add（4,4）； document.getElem

我在使用

gulpusemin

插件时遇到了一个问题。当运行

usemin

任务时，它正在浓缩和丑化

css

和

js

文件，但是丑化的js文件不会在html文件中重写，尽管它是生成的。我正在分享我的gulpfile.js和index.html代码

转换前index.html

转换后的index.html

//您可以看到生成了build/css，但没有生成build/js



document.getElementById（'sum'）.innerHTML=add（4,4）；
document.getElementById（'diff'）.innerHTML=sub（4,4）；
document.getElementById（'mul'）.innerHTML=mul（4,4）；

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

首先，您的

js

usemin

呼叫中缺少

rev

，请将您的

任务更改为：
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
中块的最后一个参数表示文件的路径。您应该精确定义扩展名，以免与目录混淆
<!-- build:css build/style.css -->

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



为清晰起见，还应在两个不同的块之间放置一个换行符
//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>

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

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

  });

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

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