使用 grunt 包含位于不同文件夹中的 js 文件

Question

我正在努力将我的 js 文件包含在 grunt 中。由于我使用 Angularjs，我需要 grunt 来导入我拥有的这么多 js 文件。这是我的 /public 目录结构：

gruntfile.js

module.exports = function (grunt) {
    grunt.loadNpmTasks('grunt-include-source');
    grunt.initConfig({
        includeSource: {
            options: {
              basePath: 'public/js',
              templates: {
                html: {
                  js: '<script src="{filePath}"></script>',
                  js: '<script src="/controllers/{filePath}"></script>',
                  js: '<script src="/services/{filePath}"></script>',
                  js: '<script src="/filters/{filePath}"></script>',
                }
              }
            },
            myTarget: {
              files: {
                'public/views/layouts/master_layout.html': 'public/views/layouts/master_layout.html'
              }
            }
          }
    });
    grunt.registerTask('build',[
        'includeSource'
    ]);
};

我要导入里面的所有js文件

1. /public/js
2. /public/js/controllers
3. /public/js/services
4. /public/js/filters

我想将这些 js 文件导入到我的主布局中，该布局位于：

public/views/layouts/master_layout.html

我将此评论放在 master_layout.html 中

<!-- include: "type": "css", "files": "*.css" -->
<!-- include: "type": "js", "files": "*.js" -->

然后运行命令grunt build。没有警告或类似的东西。但是 grunt 只做的是用 /public/js 文件夹中的 js 文件替换该注释。 请帮忙。谢谢。

Answer 1

使用 grunt 自动包含 Javascript 文件

要在 Grunt 构建或 Grunt 服务期间自动将 JavaScript 文件包含在 main_layout.html 中，首先通过运行 npm install grunt-include-source --save-dev 安装“grunt-include-source”插件，然后添加在文件下面：

Gruntfile.js

将应用变量配置添加到 grunt.initConfig

app: {
    // Application variables
    scripts: [
           // JS files to be included by includeSource task into index.html
           'scripts/app/app.js',
           'scripts/app/app.constants.js',
           'scripts/components/**/*.js',
           'scripts/app/**/*.js'
         ]
}

在 grunt.initConfig 的 watch 任务下最后添加 includeSource 配置：

includeSource: {
    // Task to include files into index.html
    options: {
        basePath: 'src/main/webapp',
        baseUrl: '',
        ordering: 'top-down'
    },
    app: {
        files: {
            'src/main/webapp/index.html': 'src/main/webapp/index.html'
            // you can add karma config as well here if want inject to karma as well
        }
    }
}

将 includeSource 任务添加到 grunt.initConfig

grunt.registerTask('serve', [
    'clean:server',
    'wiredep',
    'includeSource',
    'ngconstant:dev',
    'concurrent:server',
    'browserSync',
    'watch'
]);

将 includeSource 任务添加到服务和构建任务中，使其包含在工作流中

grunt.registerTask('build', [
    'clean:dist',
    'wiredep:app',
    'includeSource',
    'ngconstant:prod',
    'useminPrepare',
    'ngtemplates',
    'concurrent:dist',
    'concat',
    'copy:dist',
    'ngAnnotate',
    'cssmin',
    'newer:autoprefixer',
    'uglify',
    'rev',
    'usemin',
    'htmlmin'
]);

将指针添加到 main_layout.html 文件中，以便 includeSource 可以在其中注入 JS 文件

<!-- build:js({.tmp,src/main/webapp}) scripts/app.js -->
<!-- !DO NOT EDIT! autogenerated includes, see Gruntfile.js -->
<!-- include: "type": "js", "files": "<%= app.scripts %>" -->
    <!-- Files willbe added here by includeSource-->
<!-- /include -->
<!-- endbuild -->

Answer 2

您可以连接所有 js 文件并将每个相关集分组到一个 js 文件中，并使用 concat 任务将其放在 /public/js 文件夹中，这将帮助您避免来回触发资产文件的请求。此外，它还可以监视这些文件中的任何变化。

您可以使用以下代码示例将所有 js 文件连接到一个主文件中，也可以在 concat 任务下定义子对象，将每组相关的 js 文件组合在一起。

    concat: {
        js: {
            src: [
                //----------------------------Angular Services----------------------------//
                'wwwroot/js/angular/modules/vendors/services/VendorsService.js',
                'wwwroot/js/angular/modules/shared/services/SharedService.js',
                //----------------------------Angular Controllers----------------------------//
                'wwwroot/js/angular/modules/vendors/controllers/VendorsController.js',
                //----------------------------Application JS Files----------------------------//
            ],
            dest: 'wwwroot/public/js/site.js'
        }
    },