Question

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

现在，这三个文件应该如何链接到这三个文件;即<scipt src="file1.js">...<script src="file3.js">在项目的dist文件夹中的filesaltogether.js文件中不能手动转换为此新文件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属性，因为如果未在HTML5中定义，type被假定为JavaScript。

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

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

为实现这一目标，有一个名为grunt-processhtml

的有用的grunt插件

此插件允许您向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标记中添加特殊注释之外，您还需要在processhtml中添加Gruntfile.js任务。

以下示例：

连接三个JavaScript文件并将名为filesaltogether.js的文件输出到js文件夹中的dist文件夹
使用链接到连接的<script>文件的单个JavaScript标记替换html文件中的特殊注释。

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

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

};

希望这有帮助！

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

1 个答案: