将多个文件连接成一个文件并具有一个链接

Question

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

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

Answer 1

这三个文件应该怎么链接到这三个文件；即<link href="file1.js">...<link href-"file3.js" 转换为指向此新文件filesaltogether.js 的一个链接...

首先，<link href="file1.js"> 不是将 JavaScript 文件链接到 html 文档的有效方法。

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

以下示例显示了将 JavaScript 文件链接到 html 文档的正确语法：

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

...或者没有type 属性，因为type 如果未在 HTML5 中定义，则假定为 JavaScript。

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

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

为了实现这一点，有一个有用的 grunt 插件，名为 grunt-processhtml

此插件允许您将特殊的 cmets 添加到您的 html 标记中，然后由 Grunt 处理。根据您的要求，您可以将以下 cmets 添加到您的源 .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-->

评论<!--build:js filesaltogether.js--> 基本上说用一个替换所有进行中的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>

除了将特殊的 cmets 添加到您的 html 标记之外，您当然还需要在您的 Gruntfile.js 中添加一个 processhtml 任务。

下面的例子是：

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

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

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'
    ]);

};

希望这会有所帮助！