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

2022-01-12 00:00:00 node.js javascript gruntjs gulp grunt-usemin

我遇到了 gulp-usemin 插件的问题.当 usemin 任务正在运行时，它正在连接和 uglifying css 和 js 文件，但是 uglified 的 js 文件不会在 html 文件中重写，尽管它是生成.我正在分享我的 gulpfile.js 和 index.html 代码.

I am facing a problem with gulp-usemin plugin. when usemin task is running it is concating and uglifying css and js files, but the uglified js files are not rewritten in html file though it is generated. I am sharing my gulpfile.js and index.html code .

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>

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

Help me in fixing this issue. Thanks in advance .

推荐答案

首先，您在 js usemin 调用中缺少 rev，将你的 task 更改为:

First, you are missing the rev in your js usemin call, change your task to:

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的路径.您应该精确扩展名，以免与目录混淆

Also, the last parameter of the blocks in gulp-usemin represent the path of a file. You should precise the extension to not confuse with a directory

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

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

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

For clarity, you should also put a line break between the two different blocks.

相关文章