Grunt在文件夹中查看LESS文件，并在更少文件更改时创建css

I am looking for GRUNT automation task which watches the less files in the root directory and gives us the css files of the same name as the less files in the same directory like

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

Root Folder

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

My 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']);



}

Not able to mention the source less file name and result css file name in less task config, as i am watching the entire folder, i want to create the css file for the corresponding less file in the same path as less, whenever particular css is changed. Want to compile the less file which is changed , not all the less files to be compiled, if one less is changed.

在较少的任务配置中无法提及源文件名和结果css文件名,因为我正在观看整个文件夹,我想在相同的路径中为相应的较少文件创建css文件,因为每当特定的css是改变。想要编译更改的文件,而不是编译所有较少的文件,如果更改少一个。

Thanks in advance for any help.

在此先感谢您的帮助。

2 个解决方案

#1

You can use grunt-newer to configure you less task to run with newer files only.

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

npm install grunt-newer --save-dev

npm install grunt-newer --save-dev

once the plugin is installed, add

安装插件后,添加

grunt.loadNpmTasks('grunt-newer');

edit the watch task:

编辑监视任务:

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

#2

Have a look at the grunt.js docu and see how to build files object dynamically.

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

#1