使用grunt watch编译从LESS到CSS的多个文件夹?

时间:2014-10-05 10:47:13

标签: javascript json gruntjs grunt-contrib-watch

我正在尝试使用grunt watch编译Less文件,我有2个包含较少文件和2个目标文件夹的文件夹,但它显示错误:

  

对象没有方法' indexOf;

gruntfile.js代码:

module.exports = function(grunt) {
  grunt.initConfig({
    less: {
      options: {
        paths: ["./less"],
        yuicompress: true
      },
      files: [{
        expand: true,
        cwd: './less',
        src: ['*.less', '!{fonts, variable, mixins}*.less'],
        dest: './css',
        ext: '.css'
      }, {
        expand: true,
        cwd: './less',
        src: '*.less/themes',
        dest: './css/themes',
        ext: '.css'
      }],
    },
    watch: {
      files: "./less/*",
      tasks: ["less"]
    }
  });
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-watch');

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

你可以看到;文件:'选项包括2个不同的文件夹。

2 个答案:

答案 0 :(得分:1)

你可以尝试创建2个目标(如果这是正确的术语,那就不知道了),并将你的顾虑分开。然后为watch运行它们。还调整了您的监视任务,以使用深度监视器通配符

监视themes
less : {
  options : {...},
  styles : {...},
  themes : {...},
},
watch : {
  files : './less/**/*.less',
  tasks : ['less:styles','less:themes'],
}

答案 1 :(得分:1)

我认为你应该把它放在"模式"变量,例如" development"或"生产"。 像这样:

less: {
   development: {
      options: {
        paths: ["./less"],
        yuicompress: true
      },
      files: [{
        expand: true,
        cwd: './less',
        src: ['*.less', '!{fonts, variable, mixins}*.less'],
        dest: './css',
        ext: '.css'
      }, {
        expand: true,
        cwd: './less',
        src: '*.less/themes',
        dest: './css/themes',
        ext: '.css'
      }]
    }
  }

此外,在"文件"之后数组,还有一个额外不必要的逗号,在我的例子中删除了......

之后将手表更新为:

watch: {
      files: "./less/*",
      tasks: ["less:development"]
    }