【问题标题】:Grunt.js - Running watch two watch tasks together at the same time?Grunt.js - 同时运行监视两个监视任务?
【发布时间】:2014-03-02 22:42:07
【问题描述】:

好的,我已经将 Grunt 设置为 concat 并最小化我的所有 JS 文件,我还设置了它来运行我的 sass 文件。这工作正常,我设置了监视调用来监视所有 .js 和 .scss 文件,然后它运行为每个文件设置的任务。

我正在玩backbone.js,因此每次我对其中一个文件进行更改时都有很多库文件要联系,这本身不是问题,但是当任何sass文件发生更改时,它将同时运行我的闭包编译器,即使我的任何 js 文件都没有更改。

所以我做了一些研究,从这里找到的一些问题/答案中,看起来我可以设置两个监视功能来监视不同的文件夹并在每个监视文件夹上的文件发生更改时运行设置任务。简单吧?如果是这样我不确定出了什么问题,但它只会看第一个任务,第二个它不会同时看?

我知道 JavaScript 是非阻塞的,但监视任务是阻塞任务,根据我的理解(如果我错了,请纠正我)当我的第一个监视调用开始时,它会停止 grunt 运行第二个看电话?

然后我发现了并发,我认为这可以解决我的问题。但它只是做同样的事情,第一个 watch 调用似乎停止了第二个调用,而 grunt 正在监视我的第一组文件夹。

这是当前的 grunt 文件代码:

 module.exports = function(grunt) {

 // Project configuration.
 grunt.initConfig({
   pkg: grunt.file.readJSON('package.json'),

concurrent: {
    options: {
                logConcurrentOutput: true
            },
    target1: ['watch:ScssFiles'],
    target2: ['watch:JSFiles']
}, //End of Concurrent

'closure-compiler': {
    frontend: {
      closurePath: '/usr/lib',
      cwd: 'raw_assets/javascript/',
      js: ['jquery-2.1.0.js','underscore.js','backbone.js','vars.js','bb_models.js','bb_collections.js','bb_views.js','master.js'],
      jsOutputFile: 'assets/js/showcase_master.js',
      options: {
        compilation_level: 'SIMPLE_OPTIMIZATIONS',
        language_in: 'ECMASCRIPT5_STRICT',
      }//End of Options 
    } //End of frontend
}, //End of Closure Compiler

sass: {                             
    dist: {   
      options: {                    
        style: 'compressed'
      }, //End of Options
      files: {                        
        'assets/css/Master.css': 'raw_assets/sass/main.scss'    
      } //End of Files
    } //End of Dist.
}, //End of SASS

watch: {
  'JSFiles': {
    files: [ 'raw_assets/javascript/*.js' ],
    tasks: ['closure-compiler'],
    options: {
      spawn: false,
    },
  }, //End of Watch call for JS Files
 'ScssFiles': {
    files: ['raw_assets/sass/*.scss'],
    tasks: ['sass'],
    options: {
      spawn: false,
    }, 
  } //End of Watch SCSS Files
} //End of Watch


});

// Load the plugins
grunt.loadNpmTasks('grunt-closure-compiler');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-concurrent');

//When 'Grunt' is run perform watch function
grunt.registerTask('default', ['concurrent:target2', 'concurrent:target1']);#

}; //End of GruntFile

所以我真正想要的是,这个 grunt 文件是否可以同时监视两个文件夹,并且只在该组中的文件发生更改时执行我需要的操作/任务,这可行吗?

我确实有(或至少认为我有)有一个解决方法,我正在 Windows 上开发,但有一个运行 Ubuntu 服务器的虚拟机。我在腻子终端内运行我的 grunt 文件。在这种情况下,我可以有两个腻子终端,一个设置为一个监视 js 文件的调用,另一个用于监视我的 scss 文件。这种设置会是更简单的方法吗?

欢迎大家帮忙。

格伦。

PS。抱歉,如果我的拼写错误,我有阅读障碍,也可能没有正确解释,所以请告诉我,我会改进我的措辞,谢谢。

【问题讨论】:

    标签: gruntjs grunt-contrib-watch


    【解决方案1】:

    grunt-concurrent 不是必需的,grunt-contrib-watch 可以按照您定义的方式查看多个目录。我把你的文件删了试试,发现了两个问题

    1. Grunt 任务名称中似乎不允许使用连字符。
    2. 如果目录为空,grunt watch 不会挂起。一旦里面有东西,它就会暂停。

    这是简化版:

    module.exports = function(grunt) {
    
     // Project configuration.
     grunt.initConfig({
    
    watch: {
      'JSFiles': {
        files: [ 'raw_assets/javascript/*.js' ],
        tasks: ['closure_compiler'],
        options: {
          spawn: true,
        },
      }, //End of Watch call for JS Files
     'ScssFiles': {
        files: ['raw_assets/sass/*.scss'],
        tasks: ['sass'],
        options: {
          spawn: true,
        }, 
      } //End of Watch SCSS Files
    } //End of Watch
    
    
    });
    
    // Load the plugins
    grunt.loadNpmTasks('grunt-contrib-watch');
    
    //When 'Grunt' is run perform watch function
    grunt.registerTask('closure_compiler', function() {
       grunt.log.writeln("in closure_compiler");
    });
    
    grunt.registerTask('sass', function() {
       grunt.log.writeln("in sass");
    });
    
    }; //End of GruntFile
    

    然后我运行npm install grunt grunt-cli grunt-contrib-watch,并创建了raw_assets 目录和javascriptsass 子目录。然后我创建了一个空的 JS 文件和 SCSS 文件,然后运行 ​​grunt watch

    两个子目录中的任何一个中的任何修改都会运行正确的任务。

    $ grunt watch
    Running "watch" task
    Waiting...OK
    >> File "raw_assets/sass/foo2.scss" added.
    
    Running "sass" task
    in sass
    
    Done, without errors.
    Completed in 0.381s at Mon Mar 03 2014 00:21:46 GMT+0100 (CET) - Waiting...
    OK
    >> File "raw_assets/javascript/new.js" added.
    
    Running "closure_compiler" task
    in closure_compiler
    
    Done, without errors.
    Completed in 0.381s at Mon Mar 03 2014 00:27:50 GMT+0100 (CET) - Waiting...
    

    【讨论】:

    • 非常感谢,这似乎对我有用 :) - 我没有太多使用 Grunt。我一直认为您必须在要执行的操作上调用 registerTask 。这里只注册我要运行的两个任务。那么,当我使用 JQuery / JavaScript(现在正在学习 Backbone)时,使用 JSHint 或 JsLint 之类的东西不会成为问题吗?我是否将其注册为新任务?在我关闭之前或之后运行?另外你会推荐什么?当他们在我看来彼此非常接近时?
    • 没问题。通常,您可以定义新任务或使用插件中的任务。如果您调用grunt.loadNpmTasks('grunt-contrib-jshint');,您将加载jshint 任务。要使用它,请将jshint 部分添加到您的initConfig 以配置任务,并将jshint 添加到JS tasks 数组中。我对 jshint 与 jslint 不太熟悉,无法建议使用哪个,我个人只是经常遇到 jshint。
    • 非常感谢 - 我也看到 JSHint 比 jslint 更多。 - 谢谢格伦。
    猜你喜欢
    • 1970-01-01
    • 2016-07-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多