使用gulp-usemin不会在html文件中重写丑化的文件 [英] uglified files are not rewritten in html file using gulp-usemin
本文介绍了使用gulp-usemin不会在html文件中重写丑化的文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到 gulp-usemin 插件的问题。当> usemin 任务正在运行时，它正在拼接和丑化 css 和 js 文件，但是生成的jg文件不会在html文件中重写。我分享我的gulpfile.js和index.html代码。 转换前 >
< html>
< head>
<！ - build：css build / css - >
< link rel =stylesheethref =css / blue.css>
< link rel =stylesheethref =css / green.css>
< link rel =stylesheethref =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 =blueid =sum>< / p>
< p class =greenid =diff>< / p>
< p class =orangeid =mul>< / p>
< img src =images / 1.jpgwidth =304height =228>
< img src =images / 2.jpgwidth =304height =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
//你可以看到build / css已经生成，但build / js没有生成
< html>
< head>
< link rel =stylesheethref =build / css/>
< / head>
< body>
< p class =blueid =sum>< / p>
< p class =greenid =diff>< / p>
< p class =orangeid =mul>< / p>
< img src =images / 1.jpgwidth =304height =228>
< img src =images / 2.jpgwidth =304height =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>
帮助我解决这个问题。 您的 js usemin 调用，将您的任务更改为：
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 - >
为了清楚起见，您还应该在两个不同的块之间放置换行符。
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 before conversion
<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 after conversion
//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 .
解决方案
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/'));
});
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.
这篇关于使用gulp-usemin不会在html文件中重写丑化的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
