Grunt concat 和 css 文件的缩小答案

【问题标题】：Grunt concat and minification of css filesGrunt concat 和 css 文件的缩小
【发布时间】：2013-04-24 23:34:44
【问题描述】：

我目前正在使用 Yeoman 生成的 Gruntfile，并希望连接和缩小我的 CSS。我为我的 JavaScript 做的方式似乎工作正常，但是当我尝试将相同的方法应用于我的 css 文件时，我只是将它们连接在一起而没有缩小。

这是我在 index.html 文件中所做的：

    <!-- build:css styles/dist.bundle.css -->
    <link rel="stylesheet" href="styles/loader.css" />
    <link rel="stylesheet" href="styles/social.css" />
    <link rel="stylesheet" href="styles/main.css" />
    <!-- endbuild -->

请注意，如果我删除构建块 cmets，我会得到一个缩小版本，但只是在 3 个单独的文件中。

在我的 Gruntfile 配置中，我有以下内容：

    cssmin: {
        dist: {
            files: {
                '<%= yeoman.dist %>/styles/dist.bundle.css': [
                    '.tmp/styles/{,*/}*.css',
                    '<%= yeoman.app %>/styles/{,*/}*.css'
                ]
            }
        }
    }

而我的 usemin 配置只是默认配置：

    useminPrepare: {
        html: '<%= yeoman.app %>/index.html',
        options: {
            dest: '<%= yeoman.dist %>'
        }
    },
    usemin: {
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
        options: {
            dirs: ['<%= yeoman.dist %>']
        }
    }

任何人都可以建议我如何实现我想要做的事情吗？或者这对于 usemin 和 cssmin 是不可能的？

谢谢。

【问题讨论】：

标签： yeoman gruntjs

【解决方案1】：

你能粘贴你的 gruntfiles 吗？因为 usemin 本身不会连接/缩小/丑化，而是告诉将要使用的文件的任务，也许你并没有要求 grunt 在连接后缩小文件

【讨论】：

不，它不使用 min 只是在这里用你给 usemin 的那个替换多个文件的引用，然后触发 concat / css min，所以你需要把你的cssmin 部分也是您最小化 dest 文件的部分
但这不意味着我必须在 usemin 任务之后运行这个任务吗？这也意味着如果我运行“rev”任务，我将不知道文件名？
哇！我错过了 usemin 实际上并没有 concat 或 min。谢谢你说清楚:)