requireJS Optimizer:也可以缩小HTML文件?

时间:2014-02-26 12:16:51

标签: requirejs gruntjs r.js

我有一个带有backbonejs,jquery和requirejs的项目文件夹,在使用requirejs优化器调用我的gruntfile脚本之后,它创建了我的优化文件,就像浏览器中的charme一样。但我希望缩小我的HTML文件,以便在应用程序加载时保存一些字节。

我尝试在r.js优化之后使用grunt-contrib-htmlmin,但是这个插件需要我定义每个HTML文件,但是我有很多文件,很好定义HTML文件夹来缩小。

这可能是使用requirejs优化器或任何其他方式(可能是一些grunt插件)吗?

4 个答案:

答案 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协议相关:

  1. 启用gzip压缩:enable GZIP compression
  2. 在浏览器中缓存:How to set HTTP headers (for cache-control)?

答案 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'
     }]
 }
}