gpt4 book ai didi

javascript - 丑化文件不会使用 gulp-usemin 在 html 文件中重写

转载 作者:行者123 更新时间:2023-11-29 21:58:52 26 4
gpt4 key购买 nike

我遇到了 gulp-usemin 插件的问题。当 usemin 任务运行时,它正在合并和丑化 cssjs 文件,但是丑化后的 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>

帮我解决这个问题。提前致谢。

最佳答案

首先,您在 js usemin 调用中缺少 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-useminblocks 的最后一个参数表示文件 的路径。您应该精确扩展名,以免与目录混淆

<!-- build:css build/style.css -->

<!-- build:js build/js1.js -->

为了清楚起见,您还应该在两个不同的 block 之间放置一个换行符。

关于javascript - 丑化文件不会使用 gulp-usemin 在 html 文件中重写,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24951637/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com