Grunt 监视文件夹中的 LESS 文件并在更改较少文件时创建 css答案

【问题标题】：Grunt Watch LESS files in folder and create css when less file is changedGrunt 监视文件夹中的 LESS 文件并在更改较少文件时创建 css
【发布时间】：2015-05-12 11:30:36
【问题描述】：

我正在寻找 GRUNT 自动化任务，它监视根目录中的 less 文件，并为我们提供与同一目录中的 less 文件同名的 css 文件，例如

Root Folder

    package.json
    Gruntfile.js
    Folder1
        file1.less
        file2.less
    Folder2
        file3.less
        file4.less

我的 Gruntfile.js

module.exports = function(grunt) {

    grunt.initConfig({
        //our LESS options
        less: {
          development: {
            files: {
              "": "" //not able to write this line, how can i mention which file to compile as i am watching the entire folder
            }
          }

        },

      watch: {
          css: {
            files: '**/*.less',
            tasks: ['less']

          }
      }


    });

    //load our tasks
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');

    //default tasks to run
    grunt.registerTask('default', ['less']);



}

无法在less任务配置中提及源less文件名和结果css文件名，因为我正在查看整个文件夹，我想在与less相同的路径中为相应的less文件创建css文件，无论何时特定的 CSS 已更改。想要编译被改变的less文件，不是所有的less文件都被编译，如果一个less被改变了。

提前感谢您的帮助。

【问题讨论】：

你能写出文件夹结构来确保理解预期的内容吗？

标签： node.js gruntjs grunt-contrib-watch

【解决方案1】：

您可以使用grunt-newer 配置较少的任务以仅使用较新的文件运行。

npm install grunt-newer --save-dev

安装插件后，添加

grunt.loadNpmTasks('grunt-newer');

编辑监视任务：

watch: {
    css: {
      files: '**/*.less',
      tasks: ['newer:less']
    }
}

【讨论】：

【解决方案2】：

查看grunt.js docu 并了解如何动态构建文件对象。

【讨论】：