grunt-include-source不起作用

I try to make a simple using of - grunt-include-source but I don't success -

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

My Gruntfile is -

我的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');
    });
}

The index.html is -

index.html是 -

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

My folder hierarchy is -

我的文件夹层次是 -

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

I run grunt serve and get in the dist>index.html folder the output -

我运行grunt发送并在dist> index.html文件夹中输出 -

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

</body>
</html>

Without the expected - <script src="scripts/file1.js"></script>

没有预期的 -

I kept to follow as in the documentation and in this question ,

我一直遵循文件和这个问题,

Why I don't get the expected output ?

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

1 个解决方案

#1

You have two problems with your code, first in gruntfile you are specifying a wrong path, second on your html you are specifying a wrong source.

您的代码有两个问题,首先是在gruntfile中指定了错误的路径,第二个在您的html上指定了错误的源代码。

Let's go by parts, on your gruntfile you have this:

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

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

The basepath option on the docs says:

docs上的basepath选项说:

Type: String or Array[String] Default value: ''

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

The base path to use when expanding files. Can be an array to support expanding files from multiple paths.

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

What this allows us to do is including one or more paths as our base path for our scripts. So let's change our basePath to basePath: 'app', our Gruntfile.js will look like this:

这允许我们做的是将一个或多个路径作为我们脚本的基本路径。所以让我们将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');
  });
};

Now if we run grunt serve it won't work, why? Well because on your index.html you have this:

现在如果我们运行grunt服务它将无法工作,为什么?好吧因为你的index.html上有这个:

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

Which means, insert script tags for all the javascript files, inside the scripts folder, but we don't have any scripts folder, so that's why your dist/index.html is empty. Let's change our index.html to this:

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

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

Run grunt serve et voilà your index.html has changed to:

运行grunt serveetvoilà你的index.html已更改为:

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

Now you just have to copy file1.js from app/ to dist/

现在你只需要将app1.js从app /复制到dist /

#1