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

Question

我正在努力将我的 js 文件包含在 g运行t 中。由于我使用Angularjs，我需要g运行t来导入我有的这么多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文件

/public/js
/public/js/控制器
/public/js/服务
/public/js/过滤器

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

public/views/layouts/master_layout.html

我把这个评论放在里面 master_layout.html

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

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

Answer 1

您可以连接所有的 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'
        }
    },

Answer 2

使用 grunt

自动包含 Javascript 个文件

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

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 -->

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

Include js files which are located in different folders with grunt

javascript

angularjs

gruntjs