gulp如何压缩html当中的js和css代码？

发布于 2022-09-01 23:07:36 字数 500 浏览 12 评论 0

<style>
    body{
        margin:0;
        padding:0;
    }
</style>

<body>
    <ul>
        <li>list-1</li>
    </ul>
</body>
<script>
    $("ul li").on("click",function(){
        console.log($(this).html())
    })
</script>

使用gulp 的gulp-htmlmin插件对上边的html进行压缩，得到的结果只是对body里面的html代码进行了压缩；
但是理想的情况是将上边代码的css，html，js一起压缩。有什么方法吗？是需要在HTML中再进行css压缩一次还是有其他的插件？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谜兔 2022-09-08 23:07:36

请使用gulp-useref: https://github.com/jonkemp/gulp-useref

<html>
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script>
    <script type="text/javascript" src="scripts/two.js"></script>
    <!-- endbuild -->
</body>
</html>

var gulp = require('gulp'),
    useref = require('gulp-useref'),
    gulpif = require('gulp-if'),
    uglify = require('gulp-uglify'),
    minifyCss = require('gulp-minify-css');

gulp.task('html', function () {
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.css', minifyCss()))
        .pipe(gulp.dest('dist'));
});

对于页面内的CSS或JS代码（建议将代码提出来放入单独的文件）当然如果你一定要这么干，方法也是有的，https://github.com/knpwrs/gulp-cheerio 这个插件可以搞定，它可以帮助你解析html页面，然后你拿到script或者style标签里的内容用node中uglify和minifyCSS进行压缩就OK啦！

更多内容参考这个 https://github.com/Platform-CUF/use-gulp

回复收藏 0

瞳孔里扚悲伤 2022-09-08 23:07:36

gulp-htmlmin本身就有对页面上js、css的压缩支持，配置参数即可，无需再使用其他插件

常用配置：

var gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin');
 
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,  //清除HTML注释
        collapseWhitespace: true,  //压缩HTML
        collapseBooleanAttributes: true,  //省略布尔属性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,  //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,  //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,  //删除<style>和<link>的type="text/css"
        minifyJS: true,  //压缩页面JS
        minifyCSS: true  //压缩页面CSS
    };
    gulp.src('src/html/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/html'));
});

更多gulp-htmlmin配置参数>>

回复收藏 0

南…巷孤猫 2022-09-08 23:07:36

你的答案才是这个题主要的哈哈哈感谢我也得到了解答

回复收藏 0

笑叹一世浮沉 2022-09-08 23:07:36

gulp-htmlmin这个插件就可以的，加点配置参数而已

minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS

回复收藏 0

~没有更多了~

关于作者

机场等船

暂无简介

0 文章

0 评论

21 人气

关注发私信

友情链接

文江博客

gulp如何压缩html当中的js和css代码？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

gulp如何压缩html当中的js和css代码？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。