如何使用 grunt htmlmin 插件缩小 html？

Question

我已经使用 yeoman 生成了一个 angular 应用程序，现在正尝试使用 g运行t + htmlmin 缩小我的 html 文件。 htmlmin 位看起来像这样：

  htmlmin: {
            dist: {
                options: {
                    collapseWhitespace: true,
                    conservativeCollapse: true,
                    collapseBooleanAttributes: true,
                    removeCommentsFromCDATA: true
                },
                files: [{
                    expand: true,
                    cwd: '<%= yeoman.dist %>',
                    src: ['*.html'],
                    dest: '<%= yeoman.dist %>'
                }]
            }
        },

当我运行这个任务然后它回应说它缩小了 2 个文件但是我在 dist 文件夹中看不到它们？根本没有创建视图文件夹？

Answer 1

我不使用 yeoman，但我确实使用 G运行tjs。

假设这不是 yeoman 配置问题，您可以执行与我类似的操作。这是要点...

首先，我创建了一个开发过程，它不会丑化、缩小或其他任何东西......这有助于加快我的开发过程。

然后，当我准备发布时，我运行通过包括 uglify、concats、minify、imagemin 等的发布过程...

你真的只需要从构建（输出）目录中缩小 html...并且由于你正在发布，所以你最好覆盖构建目录中的 HTML 文件使用 htmlmin 版本（发布两个版本真的没有意义）。

这是我的任务...对于这种情况，我们假设您的输出目录名为“_build”。这实际上是一个非常简单和干净的任务。希望这有助于...

htmlmin: {
    site: {
        options: {
            removeComments: true,
            collapseWhitespace: true,
            removeEmptyAttributes: false,
            removeCommentsFromCDATA: false,
            removeRedundantAttributes: false,
            collapseBooleanAttributes: false
        },
        expand: true,
        src: './_build/**/*.html',
    }
}

您不能 htmlmin 尚不存在的东西。您必须先构建输出目录，然后在这些文件上构建运行 htmlmin...我认为您的 src 也将更像以下内容...

files: [{
    expand: true,
    src: '<%= yeoman.dist %>/**/*.html'
}]

如果这对您有用，请为我的答案投票并将其标记为正确答案。

Answer 2

使用 Yeoman，在“htmlmin”和 "copy" 部分中更改您的 grunt 文件。这将允许缩小，减少一个以上的子目录。

更改此行：

src: ['*.html', 'views/{,*/}*.html'],

对此：

src: ['*.html', 'views/**/*.html'],

*请务必在“htmlmin”中进行更改，并相应地在同一 grunt 文件的 "copy" 部分中进行更改。

如何使用 grunt htmlmin 插件缩小 html？

how to minify html with grunt htmlmin plugin?

angularjs

gruntjs

yeoman-generator