css - 如何使用 grunt 和 grunt-contrib-less 将编译后的 CSS 文件输出到不同的生产文件夹

Question

我找到了使用 grunt-contrib-less 包构建 less 的解决方案，但我无法弄清楚如何使用 grunts 配置任务 ( http://gruntjs.com/configuring-tasks ) 将 *.css 文件输出到特定目的地。我试过 dest: "C:/my_folder/"。有什么建议吗？

less: {
    options: {
        paths: ['css/base']
    },
    // target name
    src: {
        // no need for files, the config below should work
        expand: true,
        cwd:    "css/base",
        src:    "*.less",
        ext:    ".css"
    }
}

我也尝试过使用 grunt-contrib-less 中的示例，但我不知道如何获取它 a) 只需选择所有文件并将它们构建到具有不同扩展名的相同文件名中(即..less to .css) 就像上面那样 b) 我不理解选项 JSON 属性(甚至阅读文档)

less: {
  development: {
    options: {
      paths: ["assets/css"]
    },
    files: {
      "dev/css/*.css": "dev/less/*.less"
    }
  },
  production: {
    options: {
      paths: ["assets/css"],
      cleancss: true
    },
    files: {
      "prod/css/*.css": "dev/less/*.less"
    }
  }
}

在所有这一切结束时，我真的很想将这两者结合起来，将我所有的 less 编译成 css 用于开发，最后编译成用于生产的 css，它被缩小了。

我已经翻阅了http://net.tutsplus.com/tutorials/javascript-ajax/meeting-grunt-the-build-tool-for-javascript/和 http://www.integralist.co.uk/Grunt-Boilerplate.html不太了解 Grunt。

Answer 1

您需要指定 dest 属性。指定 less 文件来源的最好方法是使用相对路径。(相对 Gruntfile.js )

less: {
  options: {
    paths: ['css/base']
  },
  // target name
  src: {        
    expand: true,
    cwd:    "css/base",
    src:    "*.less",
    ext:    ".css"
    dest:   "build/"   // Destination for your compiled css files.
  }
}