Question

我尝试简单地使用 - grunt-include-source，但我没有成功 -

我的Gruntfile是 -

module.exports = function (grunt) { 
    grunt.initConfig({
      includeSource: {
        options: {
          basePath: 'app/file1.js'
        },
        myTarget: {
          files: {
            'dist/index.html': 'app/index.html'
          }
        }
      }
    });
    grunt.loadNpmTasks('grunt-include-source');
    grunt.registerTask('serve', function (target) {
        grunt.task.run('includeSource');
    });
}

index.html是 -

<html>
<head>
</head>
<body>
    <!-- include: "type": "js", "files": "scripts/*.js" -->
</body>
</html>

我的文件夹层次结构是 -

Gruntfile.js
app >
    file1.js
    index.html
dist >
    index.html

我运行grunt serve并进入dist>index.html文件夹输出 -

<html>
<head>
</head>
<body>

</body>
</html>

没有预期的 - <script src="scripts/file1.js"></script>

我一直按照documentation和question，

进行操作

为什么我没有得到预期的输出？

Answer 1

你的代码有两个问题，首先在gruntfile中你指定了一个错误的路径，第二个在你的html上你指定了一个错误的来源。

让我们按照你的grunt文件中的部分进行操作：

...
  includeSource: {
    options: {
      basePath: 'app/file1.js'
    },
...

文档上的basepath选项说：

类型：字符串或数组[字符串]默认值：''

扩展文件时使用的基本路径。可以是一个支持的数组   从多个路径扩展文件。

这使我们能够做的是将一个或多个路径作为我们脚本的基本路径。所以我们将basePath更改为basePath: 'app'，我们的 Gruntfile.js 将如下所示：

module.exports = function (grunt) {
  grunt.initConfig({
    includeSource: {
      options: {
        basePath: 'app'
      },
      myTarget: {
        files: {
          'dist/index.html': 'app/index.html'
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-include-source');
  grunt.registerTask('serve', function (target) {
    grunt.task.run('includeSource');
  });
};

现在，如果我们运行grunt serve它将无效，为什么？好吧，因为在index.html上你有这个：

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

这意味着，在脚本文件夹中插入所有javascript文件的脚本标记，但我们没有任何脚本文件夹，因此这就是您的dist/index.html为空的原因。让我们将index.html更改为：

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

运行grunt serveetvoilà您的index.html已更改为：

<html>
<head>
</head>
<body>
    <script src="file1.js"></script>
</body>
</html>

现在您只需将file1.js从app/复制到dist/

grunt-include-source不起作用

1 个答案: