将 Grunt newer 与自定义任务一起使用答案

【问题标题】：Use Grunt newer with custom task将 Grunt newer 与自定义任务一起使用
【发布时间】：2015-09-17 11:25:01
【问题描述】：

我正在尝试使用 grunt-newer 来查看文件夹中的文件，如果有任何更改，请触发自定义任务。

我的 Gruntfile.js 中有这样的内容：

grunt.initConfig({
   watch: {
      widgets: {
         files: "/somepath/*.js",
         tasks: ['newer:mycustomtask']
      }
   }
});

grunt.registerTask("mycustomtask", ["description of my task"], function() {
  console.log("me has been triggered");
});

每当我运行“grunt watch”时，我都会得到以下输出：

Running "watch" task
Waiting...
File "/somepath/WidgetA.js" changed.
Running "newer:mycustomtask" (newer) task
Fatal error: The "newer" prefix is not supported for aliases

我用谷歌搜索，但没有找到任何关于此的信息。任何人都知道我怎么能实现这个？我现在需要在我的“customtask”中更改哪些文件

【问题讨论】：

标签： javascript gruntjs grunt-contrib-watch

【解决方案1】：

如果您引用了未安装或未配置的任务（例如在监视内或并发），您会收到此错误输出。

当您从其他项目复制粘贴手表配置时，经常会发生这种情况。

【讨论】：

【解决方案2】：

我遇到了类似的要求，我最终得到的解决方案大致如下。我们假设项目结构是：

Gruntfile.js
package.json
src/
    config.js
    data.js
tasks/
    customtask.js

这里，src 目录包含将由watch 监控的数据，而自定义任务的定义存储在tasks/customtask.js 中。出于本示例的目的，此任务将仅打印更改文件的文件名：

var fs = require('fs');
var path = require('path');

module.exports = function(grunt) {
    grunt.registerMultiTask('customtask', function() {
        var done = this.async();

        if(!this.files){ done(); return; }

        this.files[0].src.forEach(file_name => {
            console.log(file_name);
        });

        done();
    });
};

现在，Gruntfile.js 看起来像：

module.exports = function(grunt) {

    const files = ['src/config.js', 'src/data.js'];

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        customtask: {
            release: {
                src: files
            }
        },

        watch: {
            data: {
                files: files,
                tasks: ['customtask:release']
            },
            options: {
                spawn: false
            }
        }

    });

    grunt.loadTasks('tasks');
    grunt.loadNpmTasks('grunt-contrib-watch');

    var changedFiles = Object.create(null);
    var onChange = grunt.util._.debounce(function() {
        grunt.config('customtask.release.src', Object.keys(changedFiles));
        changedFiles = Object.create(null);
    }, 200);
    grunt.event.on('watch', function(action, filepath) {
        changedFiles[filepath] = action;
        onChange();
    });

    grunt.registerTask('build', ['watch:data']);
};

这里，它指定：

感兴趣的文件是['src/config.js', 'src/data.js']
我们的customtask 原则上对这些文件进行操作（以防被直接调用）
watch 应该观察这些文件并在发生变化时启动 customtask:release
grunt.loadTasks('tasks') 从目录tasks 加载所有“任务定义”，即这里只有customtask
grunt.registerTask('build', ['watch:data']) 为 watch:data 定义了一个“快捷方式”

最后，为了只为更改的文件调用customtask，此示例使用“按需编译文件”部分中documentation 中采用的策略。简而言之，它将所有更改的文件组装在一个对象中，然后使用其键来即时修改customtask 的src 属性。

运行grunt build 然后启动“监视”。如果在另一个终端窗口中运行，例如touch src/*.js，则输出为：

Running "watch:data" (watch) task
Waiting...
>> File "src/config.js" changed.
>> File "src/data.js" changed.

Running "customtask:release" (customtask) task
src/config.js
src/data.js

最后两行来自customtask...

【讨论】：

【解决方案3】：

您只需要为您的任务提供一个配置条目（甚至是一个空条目）：

grunt.initConfig({

  mycustomtask: {
  },

  watch: {
    widgets: {
      files: "/somepath/*.js",
      tasks: ['newer:mycustomtask']
    }
  }
});

【讨论】：