Grunt的watch和Stylus

Question

我无法理解如何嵌套使用grunt的watch和stylus编译器（后面会加入livereload）。

我也尝试过使用“新”的grunt new，但我的代码肯定出了问题。

有什么建议吗？

grunt.initConfig({

  stylus: {
    compile: {
      options: {
        paths: ['stylus'],

        import: [      
          'nib/*'
        ]
      },
      files: {
        'css/style.css': 'stylus/style.styl', 
      },
    },

  },
  watch: {
    stylus: {
      files: ['*/*.*'],
      task: ['newer:stylus:compile'],
      options : { livereload: true },
    },
  },

});


grunt.loadNpmTasks('grunt-contrib-stylus');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-newer');

grunt.registerTask('compile', ['newer:stylus:all']);

此外，如果我运行grunt watch，它可以正常工作但不执行任何操作。而且，如果我运行grunt stylus，它会完美地编译我的CSS。

- Nottenga

Answer 1

嗯，在你的原始代码中，当应该使用选项tasks（复数形式）时，你正在使用task选项。这可能是我的第一个猜测。

watch: {
  stylus: {
    files: ['*/*.*'],
    tasks: ['stylus:compile'],   // This needs to be "tasks" (not "task")
    options : { livereload: true },
  },
},

我认为你不需要在前面加上newer这个词。

- Jordan Kasper

Answer 2

我自己解决了，但是我还是不知道错误在哪里。

pkg: grunt.file.readJSON('package.json'),

        stylus: {
            all: {
                options: {
                      paths: ['stylus'],

                      import: [      //  @import 'foo', 'bar/moo', etc. into every .styl file
                        'nib/*'
                      ]
                    },
                    files: {
                      'css/style.css': 'stylus/style.styl', // 1:1 compile
                    },
            },
        },

        watch: {
            files: [
                'stylus/*.styl',
            ],
            tasks: ['stylus:all'],
        }
      });

- Nottenga