如何设置一个 grunt 文件来监视和编译更少的文件答案

【问题标题】：How to setup a grunt file to watch and compile less files如何设置一个 grunt 文件来监视和编译更少的文件
【发布时间】：2013-12-10 14:21:42
【问题描述】：

我正在尝试在开发过程中使用 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：我永远使用它来启动我的应用程序，并且在同一个终端窗口中我使用命令 grunt watch，但是当我更改我的 less 文件时没有任何反应。

PPS：我的文件结构如下：

root
  -- public
    -- less
    -- css

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

非常感谢

【问题讨论】：

嗨波格丹。有几件事：我的文件没有导致上述问题中问题的行，其次，上面的代码甚至没有编译 css。说清楚，什么都没有发生。我的 less 没有被编译，也没有重新加载浏览器。
试试grunt --verbose。它应该列出它正在观看的文件，并提供有关问题可能是什么的更多信息。我在您的配置中看不到问题。
为了将来参考，当我尝试使用 --verbose 时，我可以看到 grunt 正在工作，但是它没有在 public/less 目录及其子目录中查看更少的文件。我正在编辑的文件位于 public/less/something/myfile.less 因此 Grunt 更改它不会触发任何操作。一旦我意识到我已经将配置更改为 public/less/*/* 这十个有效。
@WagnerMatosUK 您也可以在解决问题时发布自己的答案并将其标记为正确。它将帮助将来遇到相同问题的用户快速找到解决方案。

标签： node.js gruntjs

【解决方案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']);
}

【讨论】：