Question

我正在运行一个项目，在该项目中，我将React用于前端，将node用于简单的DB读取。我想学习如何使用Grunt，因此我创建了一个文件，该文件在编译时会较少地编译。现在，我希望能够在index.html页面中自动加载我的js模块。

这是我的Gruntfile.js文件。

module.exports = function (grunt) {

    'use strict';

    require('jit-grunt')(grunt);
    require('load-grunt-tasks')(grunt);
    require('time-grunt')(grunt);
    grunt.loadNpmTasks('grunt-include-source');

    var jsJsonFiles = grunt.file.readJSON('./public/js/js.json');
    var fixJsFilePath = function (f) {
        return './public/' + f;
    };
    var jsFiles = jsJsonFiles.modules.map(fixJsFilePath);

    grunt.initConfig({
        app: {
            scripts: jsFiles
        },
        less: {
            development: {
                options: {
                    compress: true,
                    yuicompress: true,
                    optimization: 2
                },
                files: {
                    './src/style/main.css': './src/style/main.less'
                }
            }
        },
        watch: {
            styles: {
                files: ['less/**/*.less'],
                tasks: ['less'],
                options: {
                    nospawn: true
                }
            },
            includeSource: {
                files: jsFiles,
                tasks: ['includeSource'],
                options: {
                    event: ['added', 'deleted']
                }
            }
        },
        includeSource: {
            options: {
                basePath: './public',
                baseUrl: '',
                ordering: 'top-down',
                templates: {
                    html: {
                        js: '<script src="{' + jsFiles + '}"></script>'
                    }
                }
            },
            target: {
                files: {
                    './public/index.html': './public/index.html'
                }
            }
        }
    });

    grunt.registerTask('build', [
        'less',
        'watch',
        'inludeSource'
    ]);
    };

这是我的html文件。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <title></title>
</head>

<body>
  <div id="root"></div>

  <!-- JSFiles -->
  <!-- include: "type": "js", "files": ["./js/modules/*.js"] -->
</body>

</html>

我希望文件会附加到页面上。我究竟做错了什么？我试图控制台记录我的jsFiles变量以检查它们是否全部存在。

React是否会干扰Gruntfile.js？

0 个答案: