如何在Grunt

Question

我们在调整Grunt设置方面遇到了一些问题。我们目前的项目设置是这样的。我们有一个Themes文件夹，在该主题文件夹中有不同的主题，它们都拥有自己的SCSS文件和与该主题相关的其他位。

我们的grunt文件设置如此，大约有15个主题（省略了默认的Grunt设置和JSHint，因为最终Grunt正在运行）：

compass: {
    options: {
        ...
    }
    theme1: {
        src: ['App/Themes/theme1/scss/**/*.scss'],
        tasks: ['compass'],
        options: {
            sassDir: 'App/Themes/theme1/scss',
            cssDir: 'App/Themes/theme1'
        }
    },
    theme2: {
        src: ['App/Themes/theme2/scss/**/*.scss'],
        tasks: ['compass'],
        options: {
            sassDir: 'App/Themes/theme2/scss',
            cssDir: 'App/Themes/theme2'
        }
    },

    ...
}

concurrent: {
    watch: {
        tasks: ['compass:theme1', 'compass:theme2', ..., 'compass:themeXX'],
        options: {
            logConcurrentOutput: true,
            spawn: false
        }
    }
}

grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['concurrent']);

实际问题是，当我们启动默认任务时，也会启动x watch线程。这对于他们必须做的小型手表任务来说有很多开销。

我正在寻找的解决方案是一种设置单个监视任务的方法，可以触发特定的主题指南针编译。有没有办法做到这一点？或者当前设置是唯一的方法吗？除了拥有x监视任务之外别无选择吗？

感谢。

Answer 1

首先，在配置对象中构建一个监视文件但不执行任何任务的监视任务。使用glob模式，告诉观察者监视主题目录中的所有.scss文件：

grunt.initConfig({
  compress: {}, //your existing compress object goes here
  watch: {
    themes: {
      files: ['App/Themes/**/*.scss'],
      tasks: []
    },
  },
});

接下来，您将向gruntfile添加一个grunt.event侦听器。侦听器事件将公开更改的文件（例如：App/Themes/theme1/scss/foobar.scss）。这样，您现在可以确定要运行的压缩目标（theme1）：

grunt.event.on('watch', function(action, filepath, target) {
  if (target === 'themes') {
    var theme = filepath.split("/");
    grunt.task.run('compress.' + theme[2]); //tells grunt to run "compress.theme1" based on this example
  }
});