nodejs - 以编程方式运行grunt任务

时间:2018-03-09 17:13:49

标签: javascript node.js gruntjs frontend grunt-contrib-watch

我使用grunt任务观看连接某些js文件。

我的第一个配置工作正常:

grunt.initConfig({
    watch: {
      js: {
        files: ['web/**/*.js'], 
        tasks: ['concat:JS'] 
      }
    },
    concat: { 
      JS: {
        files: {
          "index.js": [
            "test-1.js",
            "test-2.js",
          ],
          "about_us.js": [
            "test-3.js",
            "test-4.js",
          ],
          "store.js": [
            "test-5.js",
            "test-6.js",
          ]
        }
      }
    }
  });

我的问题是,每当我更改文件时,使用此配置它会连接所有内容。

我可以仅连接特定文件(根据更改的文件)。

e.g。如果我改变test-1.js我想只连接index.js文件(..所以要运行的任务应该是'concat:JS:index.js'

因此我尝试添加观看活动

 grunt.event.on('watch', function(action, filepath, target) {
        var taskName = "concat:JS"; //here i calculate dinamically the specific task name to be run
        grunt.task.run(taskName);
    });

但没有任何反应......任何想法?感谢

1 个答案:

答案 0 :(得分:1)

新答案帖子编辑问题

使用grunt.event.on('watch', ...)侦听器是这种要求的错误工具。相反,您应该对watchconcat任务使用多个Targets,如下面Gruntfile.js摘录中所示。

<强> Gruntfile.js

grunt.initConfig({
  watch: {
    'JS-index': {
      files: ['web/js/test-1.js', 'web/js/test-2.js'], 
      tasks: ['concat:JS-index']
    },
    'JS-about-us': {
      files: ['web/js/test-3.js', 'web/js/test-4.js'], 
      tasks: ['concat:JS-about-us']
    },
    'JS-store': {
      files: ['web/js/test-5.js', 'web/js/test-6.js'], 
      tasks: ['concat:JS-store']
    }
  },
  concat: { 
    'JS-index': {
      files: {
        'dist/js/index.js': [
          "web/js/test-1.js",
          "web/js/test-2.js",
        ]
      }
    },
    'JS-about-us': {
      files: {
        "dist/js/about_us.js": [
          "web/js/test-3.js",
          "web/js/test-4.js",
        ]
      }
    },
    'JS-store': {
      files: {
        'dist/js/store.js': [
          "web/js/test-5.js",
          "web/js/test-6.js",
        ]
      }
    }
  }
});

备注

根据上面显示的配置,通过CLI运行grunt watch后会发生以下情况:

  1. 更改test-1.jstest-2.js会将两个文件连接到dist/js/index.js

  2. 更改test-3.jstest-4.js会将两个文件连接到dist/js/about_us.js

  3. 更改test-5.jstest-6.js会将两个文件连接到dist/js/store.js

  4. 您的路径需要根据需要进行配置

    编辑前的原始答案

      

    如何使用grunt执行任务?

    使用grunt.task.run是以编程方式运行任务的正确方法。

    但是,请参阅grunt-contrib-watch github repo中的comment。摘录如下:

      

    &#34;请勿使用grunt.event.on('watch')来执行您的任务。&#34;

    和...

      

    &#34;观看活动不适合运行任务。&#34;

    以下解决方案假设您的要求是在更改/编辑其中一个文件时连接某些.js个文件。在这种情况下,您需要利用tasks任务的watch属性来定义要运行的任务(即'concat:JS'

    <强> Gruntfile

    module.exports = function(grunt) {
    
      grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.loadNpmTasks('grunt-contrib-concat');
    
      grunt.initConfig({
        watch: {
          js: {
            files: ['path/to/js/**/*.js'], // <-- 1. Glob pattern to .js files
            tasks: ['concat:JS'] // <-- 2. Task to run when .js file changes.
          }
        },
        concat: {  // <-- 3. Configure your `concat` task as necessary.
          JS: {
            src: [
              'path/to/js/foo.js',
              'path/to/js/bar.js',
              'path/to/js/quux.js'
            ],
            dest: 'path/to/output/combined.js'
          }
        }
      });
    
      grunt.registerTask('default', ['watch']);
    
      grunt.event.on('watch', function(action, filepath, target) {
        console.log("yep, this code is being executed");
        // 4. <-- Do not run task from 'on' listener event.
      });
    }
    

    备注

    1. watch任务中,定义源.js文件的glob模式以观察更改。
    2. 指定.js文件更改时要运行的任务;即'concat:JS'
    3. 根据需要配置concat任务。
    4. grunt.task.run('concat:JS');听众中删除grunt.event.on('watch', ...)
    5. 使用上面的要点并通过cli运行grunt会在对combined.js目录中存储的.js文件进行任何更改时创建新的path/to/js/文件。 (您需要根据您的要求配置路径)
    6. 虽然不应该使用grunt.event.on('watch', ...)侦听器来运行任务,但可以使用它来配置其他任务。