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

Question

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

片刻，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 中的正确内容。

Answer 2

grunt.js您可以使用该模块缩小 CSS 文件grunt-css

• 安装模块npm install grunt-css --save-dev

• 使用 grunt.loadNpmTasks('grunt-css');在你的grunt.js或Gruntfile.js（取决于使用的 grunt 版本）中加载模块；

• Gruntfile.js在as中配置任务，

  grunt.initConfig({
    less: {
      //YOUR LESS CONFIG
    },
    cssmin: {
      YOUR_TARGET: {
        src: 'SRC_PATH/input.css',
        dest: 'DEST_PATH/output.min.css'
      }
    }
  });
  

• 您可以使用以下配置组合和缩小多个 css 文件，

  grunt.initConfig({
    less: {
      //YOUR LESS CONFIG
    },
    cssmin: {
      YOUR_TARGET: {
        src: 'SRC_PATH/**/*.css',
        dest: 'DEST_PATH/output.min.css'
      }
    }
  });
  

• 用 grunt build task 注册你的任务，在 less 任务之后运行，

  grunt.registerTask('default', ['less', 'cssmin'])
  

• 现在您可以运行grunt build或grunt cssmin生成缩小的 CSS 文件。

这些grunt-css模块是csslint内置的，因此您还可以添加一个任务来检查您的 css 文件。

更多配置/选项可以在https://github.com/jzaefferer/grunt-css找到