丑化的文件不会使用gulp usemin在html文件中重写。
丑化的文件不会使用gulp usemin在html文件中重写。
提问于 2014-07-25 08:46:06
我正面临一个gulp-usemin插件的问题。当usemin任务运行时，它正在连接和丑化css和js文件，但是即使生成丑陋的js文件，也不会将其重写到html文件中。我正在分享我的gulpfile.js和index.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>帮我解决这个问题。提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-07-25 11:41:25
首先，您在js usemin调用中缺少了usemin，将task更改为：
gulp.task('usemin', function() {
gulp.src('./*.html')
.pipe(usemin({
css: [minifyCss(), 'concat'],
html: [minifyHtml({empty: true})],
js: [uglify(), rev()]
}))
.pipe(gulp.dest('build/'));
});另外，blocks在gulp-usemin中的最后一个参数表示file的路径。您应该精确定义扩展名以避免与目录混淆。
<!-- build:css build/style.css -->
<!-- build:js build/js1.js -->为了清晰起见，您还应该在这两个不同的块之间放置一个行间隔。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24951637
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号