grunt watch编译较少，但不生成css

Question

Grunt watch编译了我的LESS文件，但没有生成CSS文件。我不知道问题出在哪里。外面有人能帮上忙吗？

这是我的原创代码：

module.exports = function(grunt) {

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

grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'), 
    less: {
        options: {
            paths: 'less',
            yuicompress: true
        },
        files: {
            'styles.css': 'less/button.less'
        }
    },

    watch: {
        less: {
            files: 'less/*.less',
            tasks: 'less'
        }
    }
});
}

下面是我的package.json代码：

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "Awesome project",
  "devDependencies": {
    "grunt-contrib-less": "^1.4.1",
    "grunt-contrib-watch": "^1.0.0"
  }
}

请参阅下面的我的文件夹结构：

​

​

Grunt Watch工作正常：

​

​

Answer 1

Grunt要求您的less任务配置具有一个或多个_targets。每个可以任意命名的目标都有一个files对象。

在您的配置中，Grunt认为files是目标，因此控制台输出显示为Running less:files。当Grunt在files目标中找不到files对象时，它将继续前进。

为了修复您的配置，必须添加一个包装files对象的目标对象。例如,

less: {
    options: {
        paths: 'less',
        yuicompress: true
    },
    dev: {
        files: {
            'styles.css': 'less/button.less'
        }
    }
},

有关Grunt任务配置和目标的更多信息，请参阅documentation。