将几个文件连接成一个文件并有一个 link

Question

比方说，我将 file1.js、file2.js 和 file3.js 连接到一个文件 filesaltogether.js 中，这个新文件将从 dev 复制到项目的 dist。

现在，三个 link 应该如何到这三个文件中；即 <scipt src="file1.js">...<script src="file3.js"> 转换为一个 link 到这个新文件 filesaltogether.js 而不是在项目的 dist 文件夹中的 index.html 文件中手动

Answer 1

how should the three links to these three files; ie <link href="file1.js">...<link href-"file3.js" get converted to one link to this new file filesaltogether.js...

首先，<link href="file1.js"> 不是将您的 JavaScript 文件 html 文件 link 的有效方式。

有关如何使用 <link> 标签的详细信息，请参阅答案 here。

下面的示例显示了 link 将 JavaScript 文件转换为 html 文档的正确语法：

<script type="text/javascript" src="file1.js"></script>

...或没有 type 属性，因为如果 HTML5.

中未定义，则假定 type 为 JavaScript

<script src="file1.js"></script>

因此，我的以下回答假定您的真正意思是如何将三个 <script> 标签转换为一个 <script> 标签。

要实现这一点，有一个有用的 grunt 插件，叫做 grunt-processhtml

此插件允许您向 html 标记添加特殊注释，然后由 Grunt 处理。根据您的要求，您可以将以下注释添加到源 .html 标记中：

<!--build:js filesaltogether.js-->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
<!--/build-->

评论基本上是说用一个替换所有script标签。结果输出将是：

<script type="text/javascript" src="filesaltogether.js"></script>

您还可以在评论中定义src 路径。例如。

<!--build:js path/to/file/filesaltogether.js-->
    <script type="text/javascript" src="file1.js"></script>
    <script type="text/javascript" src="file2.js"></script>
    <script type="text/javascript" src="file3.js"></script>
<!--/build-->

会导致：

<script type="text/javascript" src="path/to/file/filesaltogether.js"></script>

除了在 html 标记中添加特殊注释外，您当然还需要在 Gruntfile.js 中添加 processhtml 任务。

下面的例子是：

拼接三个JavaScript文件，输出一个名为filesaltogether.js的文件到dist文件夹js文件夹内
将 html 文件中的特殊注释替换为单个 <script> 标记 link 连接到串联的 JavaScript 文件。

注意：您需要根据项目目录设置编辑文件路径。

module.exports = function (grunt) {

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        /* CONCATENATE JAVASCRIPT*/
        concat: {
            js: {
                src: [
                    'dev/js/file1.js',
                    'dev/js/file2.js',
                    'dev/js/file3.js'
                ],
                dest: './dist/js/filesaltogether.js'
            }
        },

        /* PROCESS THE SPECIAL COMMENTS IN THE HTML */
        processhtml: {
            replaceScriptLinks: {
                files: {
                    './dist/index.html': ['./dev/index.html'] // destination : source
                }
            }
        }

    });


    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-processhtml');

    grunt.registerTask('default', [
        'concat:js',
        'processhtml:replaceScriptLinks'
    ]);

};

希望对您有所帮助！

将几个文件连接成一个文件并有一个 link

concatenating several files into single file and having one link

html

gruntjs

grunt-contrib-concat

grunt-contrib-watch