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

我正面臨gulp-usemin插件的問題。當usemin任務正在運行時，它正在拼接和醜化css和js文件，但是，在生成HTML文件後，不會重新格式化js文件。我分享我的gulpfile.js和index.html代碼。uglified文件不使用gulp-usemin重寫在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>

幫我解決這個問題。提前致謝。

來源

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

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

回答

相關問題