Question

我正在努力将我的js文件包含在内。由于我使用的是Angularjs，因此我需要花费很多精力才能导入这么多的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 / controllers
/ public / js / services
/ 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。没有警告或类似的东西。但是，咕unt的只是用 /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中，请首先通过运行npm install grunt-include-source --save-dev安装“ grunt-include-source”插件。在文件下面：

Gruntfile.js

将应用程序变量config添加到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的监视任务下，在最后添加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文件

2 个答案: