問題描述
我遇到了 gulp-usemin 插件的問題.當(dāng) usemin 任務(wù)正在運行時，它正在連接和 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 轉(zhuǎn)換前
<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 轉(zhuǎn)換后
//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 調(diào)用中缺少 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的最后一個參數(shù)代表file的路徑.您應(yīng)該精確擴展名，以免與目錄混淆
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 -->
為清楚起見，您還應(yīng)該在兩個不同的塊之間放置一個換行符.
For clarity, you should also put a line break between the two different blocks.
這篇關(guān)于使用 gulp-usemin 不會在 html 文件中重寫 uglified 文件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！