Question

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

有一会儿，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。您不需要其他插件来缩小代码。

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

compress（将删除一些空格）：

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

使用grunt-css缩小CSS文件

使用npm install grunt-css --save-dev
将模块加载到grunt.js或Gruntfile.js（取决于使用的grunt版本） grunt.loadNpmTasks（ '咕噜-CSS'）;

在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构建任务注册任务，在较少的任务之后运行，
```
grunt.registerTask('default', ['less', 'cssmin'])
```
现在您可以运行grunt build或grunt cssmin来生成缩小的CSS文件。

grunt-css模块内置了csslint，因此您还可以添加任务来填充css文件。

可以在https://github.com/jzaefferer/grunt-css

找到更多配置/选项

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

2 个答案: