node.js - 如何设置 grunt 文件来监视和编译 less 文件

Question

我正在尝试使用 grunt 在开发过程中将我的 less 文件编译成 css。同时，观看并重新加载。我写的文件是这样的:

module.exports = function(grunt) {
grunt.initConfig({
    less: {
        development: {
            options: {
                compress: true,
                yuicompress: true,
                optimization: 2
            },
            files: {
                // target.css file: source.less file
                "public/css/bootstrap.css": "./public/less/bootstrap.less"
            }
        }
    },
    watch: {
        styles: {
            // Which files to watch (all .less files recursively in the less directory)
            files: ["public/less/*"],
            tasks: ['less'],
            options: {
                livereload: true,
            }
        }
    }
});

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

grunt.registerTask('default', ['watch']);
};

我将其保存为 gruntfile.js 在我的项目根目录中。我做错了什么？

PS:我使用forever来启动我的应用程序，并在同一个终端窗口中使用命令grunt watch，但是当我更改我的less文件时，什么也没有发生。

PPS:我的文件结构如下:

root
  -- public
    -- less
    -- css

正如你在上面看到的，我的主要 less 文件位于 root/public/less/bootstrap.less，我希望 css 在 root/public/css/bootstrap.css 进行编译

非常感谢

Answer 1

您的设置似乎不错，但我在这里发现了一个问题...也许它可以解决您的问题

"public/css/bootstrap.css": "./public/less/bootstrap.less"
                             ^^

你的网址是相同的，但在第二次出现时你添加了额外的“./”我想如果你删除它它会起作用。

这是我自己的代码，运行良好。

module.exports = function(grunt){
    grunt.initConfig({
        //pkg:grunt.file.readJSON('package.json'),
        less:{
              development:{
                  options:{
                      compress: true,
                      yuicompress: true,
                      optimization: 2
                  },
                files:{
                    'webroot/css/meer/index/index2.css' : 'webroot/css/meer/index/index2.less'
                }
              }
        },
        watch: {
            styles:{
                options:{
                    livereload: true,
                    spawn: false,
                    event: ['added','deleted','changed']
                },
                files:['webroot/css/meer/index/*.less'],
                tasks:['less']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}