gruntjs - Grunt watch /Bower 链接 : What is the most appropriate way to use Grunt watch with Bower link when developing a bower component?

Question

问题

我目前正在开发一个项目，其中我们有一个父级 Web 应用程序(恰好是一个 AngularJS 应用程序)和多个子 Bower 模块(包含 Javascript、SASS、图像等)，这些模块包含在使用 Bower 的父级中.

例如，父 Bower.json 如下所示:

{
    "name": "parent-app",
    "version": "1.0.0",
    "dependencies": {
        "child-1-module": "1.0.0",
        "child-2-module": "1.0.0"
    }
}

在父模块上执行“bower install”时，子模块将安装到:

bower_components/child-1-module
bower_components/child-2-module

然后，我们为每个子模块使用“bower link”。

然后在父级上使用 'bower link child-1-module' 和 'bower link child-2-module' 创建本地软链接(soft link)，例如:

bower_components/child-1-module -> /some/where/else/child-1-module
bower_components/child-2-module -> /some/where/else/child-2-module

这使我们能够在本地对各个子模块进行更改，并在父应用程序中查看结果。

然后，我们还在父级中使用 Grunt 和 grunt-contrib-watch 来监视父级应用程序的更改，然后执行其他 Grunt 任务，或者执行“livereload”来刷新用于查看应用程序的浏览器。

下面是一个简化的 Gruntfile.js 示例，它监视 .js 文件，然后执行“jshint”任务和“livereload”:

grunt.initConfig({

    // Watches files for changes and runs tasks based on the changed files
    watch: {
        js: {
            files: [
                'scripts/{,*/}*.js', 
            ],
            tasks: ['newer:jshint:all'],
            options: {
                livereload: true
            }
        }
    }
}

这对于观察父应用程序的更改非常有效，但我们也想知道子模块中的文件何时发生更改。目前我已经想到/研究了许多解决方案，结果好坏参半。

可能的解决方案 1:将 Bower_components 添加到父级的 grunt watch

所以我可以修改 Gruntfile 以另外查看 Bower_components 文件夹中的 .js 文件，如下所示:

grunt.initConfig({

    // Watches files for changes and runs tasks based on the changed files
    watch: {
        js: {
            files: [
                'scripts/**/*.js', 
                'bower_components/**/*.js'
            ],
            tasks: ['newer:jshint:all'],
            options: {
                livereload: true
            }
        }
    }
}

然而，可能有许多子模块(包含许多 .js 文件)，因此性能会急剧下降，甚至经常由于“EMFILE:打开的文件太多”问题而无法运行(请参阅 here )。

此外，子模块是动态添加的，因此我们不能在 Gruntfile 中预先指定特定的模块，例如:

'bower_components/child-1-module/**/*.js'

潜在解决方案 2:在子模块和父模块中添加 grunt watch

我们可以在每个子模块中添加一个 Gruntfile.js，其中包含一个监视程序来监视自己的文件。

当子模块中的文件发生更改时，我们可以更新特定的“livereload”文件，然后在父模块中我们只能监视这些特定文件。

child-module-1 中的示例“Gruntfile.js”

grunt.initConfig({
    watch: {
        js: {
            files: ['scripts/**/*.js'],
            tasks: ['livereloadEvent:js', 'newer:jshint:all']
        }
    }
}
grunt.registerTask('livereloadEvent', function() {
    // create a 'livereload/livereload.{arg}' file for the event specified
    grunt.file.mkdir('livereload');
    for(var i = 0; i < this.args.length; i++) {
        // contents of the file is the current timestamp
        grunt.file.write('livereload/livereload.'+ this.args[i], new Date());
    }
});

然后在父级中我们可以将以下文件夹添加到我们的 watch 中:

'bower_components/**/livereload/livereload.js'

这工作正常。父级现在不必观看太多文件，现在由子级执行自己的观看并基本上通知父级。

缺点是每个 child 都必须意识到这一点并以相同的方式实现这一点。

其他潜在的解决方案...

其他人还如何处理这个问题？是否有公认且广泛使用的模式来处理此问题？

Answer 1

我们处理此问题的方式与您建议的解决方案 2 非常相似。

1. 当开发人员处理子组件时，他会设置从子组件到父 Angular 应用程序的 Bower 链接。

2. 他打开了两个终端窗口。一个在子级上运行 grunt watch 任务，另一个在父级上运行 grunt watch 任务。

3. 当他对子组件进行更改时，会触发 grunt 任务，将文件的串联版本构建到组件的 /dist 文件夹中。

4. 父组件正在监视 /dist 文件夹中的更改，当子组件中的构建任务完成时，它会触发其任务在父应用中构建。

为了最大限度地减少父应用程序正在监视的文件数量，我们在所有 Bower 组件中使用前缀，因此监视配置如下所示:

watch: {
    bower_components: {
        files: ['./bower_components/orgname-*/dist/*.js'],
        tasks: ['newer:copy']
    }
}

我不知道这是否是公认的“最佳实践”，但它确实有效。