4

目前我们正在使用 grunt-contrib-less 将我们的 LESS 文件编译为 Grunt 任务。较少的文件存储在类似于以下的结构中：

assets/
    styles/
        base.less
        client/
            client.less
            device/
                tablet.less
                phone.less

我们的 Grunt 配置有以下内容：

less: {
    options: {
        paths: 'assets/',
        yuicompress: false,
        ieCompat: true,
        require: [
            'assets/styles/base.less'
        ]
    },
    src: {
        expand: true,
        cwd: 'assets/',
        src: [
            'styles/**/*.less'
        ],
        ext: '.css',
        dest: 'assets/'
    }
},

目前，这是将所有生成的 css 文件安装到与它来自的原始 less 文件相同的目录中。我们想要做的是将它们吐出到 /assets/css/ 目录中，但具有相同的相对结构。例如：

assets/
    css/
        base.css
        client/
            client.css
            device/
                tablet.css
                phone.css

是否有可以实现此目的的 grunt-contrib-less 配置？

4

2 回答 2

4

一种更简单的方法似乎是：

less: {
    options: {
        paths: 'assets/',
        ieCompat: true,
        require: [
            'assets/styles/base.less'
        ]
    },
    src: {
        expand: true,
        cwd: 'assets/styles/',
        src: [
            '**/*.less'
        ],
        ext: '.css',
        dest: 'assets/css'
    }
},
于 2014-03-18T18:07:08.290 回答
3

我能够通过以下方式达到预期的效果Gruntfile.js

var path = require('path');

module.exports = function(grunt) {

  grunt.initConfig({
    less: {
      options: {
        paths: 'assets/',
        yuicompress: false,
        ieCompat: true,
        require: [
          'assets/styles/base.less'
        ]
      },
      src: {
        expand: true,
        cwd: 'assets/',
        src: [
            'styles/**/*.less'
        ],
        ext: '.css',
        dest: 'assets',
        rename: function(dest, src) {
          return path.join(dest, src.replace(/^styles/, 'css'));
        }
      }
    },
  });

  grunt.loadNpmTasks('grunt-contrib-less');

}

解释

虽然它不在grunt-contrib-less文档中，但还有许多可用于文件对象的功能。在我努力回答这个问题之前，我没有意识到有这么多。他们的文档链接在资源下。

资源

配置任务 - 动态构建文件对象

于 2013-07-25T16:04:52.587 回答