我有一个带有backbonejs,jquery和requirejs的项目文件夹,在使用requirejs优化器调用我的gruntfile脚本之后,它创建了我的优化文件,就像浏览器中的charme一样。但我希望缩小我的HTML文件,以便在应用程序加载时保存一些字节。
我尝试在r.js优化之后使用grunt-contrib-htmlmin,但是这个插件需要我定义每个HTML文件,但是我有很多文件,很好定义HTML文件夹来缩小。
这可能是使用requirejs优化器或任何其他方式(可能是一些grunt插件)吗?
答案 0 :(得分:1)
expandMapping会很有用。整个目录可以缩小,其结构保持不变,无需列出目录中的每个html
文件。像这样:
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: grunt.file.expandMapping(['path/**/*.html', 'path2/**/*.html'], 'destination/', {
rename: function(destBase, destPath) {
return destBase+destPath;
}
})
}
}
输出结果为:
path/test.html => destination/path/test.html
path/subpath1/abc.html => destination/path/subpath1/abc.html
path/subpath2/yey.html => destination/path/subpath2/yey.html
path2/foo.html => destination/path2/foo.html
任何插件都可以使用相同的原则,但有些插件可能需要更多配置才能执行与文件有关的操作。
答案 1 :(得分:1)
我会采用其他方法并在Jade中开发您的HTML代码。 Jade有一个干净的语法,使你的html代码编写错误更少(例如input
标签没有结束标记)。
示例代码:
html
head
body
//- this comment won't be shown in the html output
.someClass.secondClass
p Hello world
使用grunt-contrib-jade,您可以将jade文件编译为html文件。
您需要的只是Gruntfile.js中的配置:
jade: {
staging: {
options: {
pretty: true
},
files: [
{
expand: true,
src: '**/*.jade',
dest: 'target/staging/',
cwd: 'src/',
ext: '.html'
}
]
}
},
对于开发版本,您可以使用pretty
选项。对于生产(缩小),你忽略了漂亮的选择。
以上示例的输出结果为:
<html>
<head></head>
<body>
<div class="someClass secondClass">
<p>Hello world</p>
</div>
</body>
</html>
没有它是:
<html><head></head><body><div class="someClass secondClass"><p>Hello world</p></div></body></html>
答案 2 :(得分:0)
哟不能缩小HTML,因为你无法缩小CSS。缩小的概念在某种程度上与编程语言有关,HTML是描述性语言而不是编程语言。
您想要的是一种将文件更好地传输到浏览器的方法。您可以通过两种标准方式实现这一点,这两种方式都与Web服务器和HTTP协议相关:
答案 3 :(得分:0)
您可以动态构建文件对象(检查http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically)
您可以在gruntfile.js中使用的代码段就像
htmlmin: {
build: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: [{
expand: true,
src: ['*.html'],
dest: 'html/',
ext: '.min.html'
}]
}
}