node.js - 是否可以使用 grunt js 和/或 less css 将所有 css 放在一行中？

Question

所有 .js 和 .less 文件都是在我的项目中使用 gruntjs(内置 .js 支持)和 grunt-less-contrib 插件构建的，用于处理 .less 文件的任务。

现在 lesscss 以每行一个定义的方式压缩 css，例如以下 .less 文件:

div,span,textarea,input {
  margin:0;
}

它将输出:

div,
span,
textarea,
input {
  margin:0;
}

我想将所有 css 压缩到一行中，对于本示例，它应该如下所示:

div,span,textarea,input{margin:0;}...other styles...

这可能吗？任何建议都会有帮助，我不确定这是一个直接关于 lesscss 或 grunt 的问题。

也许可以在构建build.css后添加一个任务，然后执行串联？

Answer 1

grunt-contrib-less 插件也足以缩小编译后的 CSS。您不需要其他插件来缩小代码。

它有两个特定于此用例的选项:

• 压缩(将删除一些空格):

  less: {
      compile: {
          options: {
              paths: ["foo/bar/css"],
              compress: true
          },
          files: {
              "path/to/result.css": "path/to/source.less"
          }
      }
  }
  

  https://github.com/gruntjs/grunt-contrib-less/#compress

• yuicompress(将通过 css-min 在内部运行您的 CSS):

  less: {
      compile: {
          options: {
              paths: ["foo/bar/css"],
              yuicompress: true
          },
          files: {
              "path/to/result.css": "path/to/source.less"
          }
      }
  }
  

  https://github.com/gruntjs/grunt-contrib-less/#yuicompress

因此，在您的情况下，“yuicompress”是添加到您的 gruntfile 中的正确选择。