如何设置一个grunt文件来观察和编译较less的文件

我正在尝试使用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：我用永远启动我的应用程序，并在同一个terminal窗口中使用命令grunt手表，但是当我改变我的less文件没有任何反应。

PPS：我的文件结构如下：

 root -- public -- less -- css 

正如你在上面看到的，我的main文件位于root / public / less / bootstrap.less，我希望将css编译为root / public / css / bootstrap.css

非常感谢

Answer 1

你的设置似乎很好，但我发现这里有一个问题…可能是它解决了你的问题

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

你的url是相同的，但在第二次出现，你有额外的“./”我想如果你删除它，它将工作。

这是我自己的代码，它工作正常。

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