简体   繁体   English

grunt-include-source不起作用

[英]grunt-include-source doesn't work

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 serve并在dist>index.html文件夹中获取输出-

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

</body>
</html>

Without the expected - <script src="scripts/file1.js"></script> 没有预期的结果- <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 ? 为什么我没有得到预期的输出?

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: 让我们按部就班,在gruntfile上有以下内容:

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

The basepath option on the docs says: 文档上的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: 'app'更改为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? 现在,如果我们grunt serve那为什么呢? Well because on your index.html you have this: 好吧,因为在您的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. 这意味着,在scripts文件夹内为所有javascript文件插入脚本标签,但是我们没有任何scripts文件夹,因此这就是dist/index.html为空的原因。 Let's change our index.html to this: 让我们将index.html更改为:

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

Run grunt serve et voilà your index.html has changed to: 运行grunt serve etvoilà,您的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/ 现在,您只需要将file1.jsapp/复制到dist/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM