gulp-usemin을 사용하여 uglified 파일을 html 파일로 다시 작성하지 않습니다.

gulp-usemin 플러그인에 문제가 있습니다. usemin 작업이 실행 중일 때 concierating이고 css 및 js 파일이 있지만 생성 된 uglified js 파일은 html 파일로 다시 작성되지 않습니다. 내 gulpfile.js 및 index.html 코드를 공유하고 있습니다. 변환 후의 변환 전의gulp-usemin을 사용하여 uglified 파일을 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

01,235,

//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>

이 문제를 해결할 수 있도록 도와주세요. 미리 감사드립니다.

출처

2014-07-25 Gopinath Shiva

첫째, 당신이 당신의 jsusemin 호출에서 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 -->

와 혼동하지 않도록해야합니다, 당신은 또한 두 개의 서로 다른 블록 사이에 줄 바꿈을 넣어해야합니다.

출처

2014-07-25 11:41:25

gulp-usemin을 사용하여 uglified 파일을 html 파일로 다시 작성하지 않습니다.

답변

관련 문제