如何在Grunt

时间:2016-04-19 13:54:07

标签: gruntjs grunt-contrib-watch grunt-contrib-compass grunt-concurrent

我们在调整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监视任务之外别无选择吗?

感谢。

1 个答案:

答案 0 :(得分: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
  }
});