<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压缩一次还是有其他的插件?
请使用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
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配置参数>>