javascript - 使用 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/ Controller
3. /public/js/services
4. /public/js/过滤器

我想将这些 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

将app变量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中的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可以在那里注入(inject)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 -->