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

我正在努力用grunt包含我的js文件。因为我使用Angularjs，所以我需要grunt来导入我拥有的这么多js文件。这是我的/公用目录结构：

grunfile.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'
    ]);
};

module.exports=函数（grunt）{
grunt.loadNpmTasks（'grunt-include-source'）；
grunt.initConfig({
包括来源：{
选项：{
基本路径：“public/js”，
模板：{
html:{
js:“，
js:“，
js:“，
js:“，
}
}
},
我的目标：{
档案：{
“public/views/layouts/master_layout.html”：“public/views/layouts/master_layout.html”
}
}
}
});
grunt.registerTask（'build'[
“includeSource”
]);
};

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

/公共事务/js

/public/js/controllers

/public/js/services

/public/js/filters

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

public/views/layouts/master_layout.html

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

我将此评论放在master_layout.html中

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

然后运行命令

grunt build

。没有警告之类的。但grunt所做的只是用/code>/public/js文件夹中的js文件替换该注释。

---

请帮忙。谢谢。

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

---

自动包含带有grunt的Javascript文件

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

grunfile.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'
    ]);
};

将应用程序变量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.registerTask('serve', [
    'clean:server',
    'wiredep',
    'includeSource',
    'ngconstant:dev',
    'concurrent:server',
    'browserSync',
    'watch'
]);

在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

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