конкатенация несколько файлов в один файл и имеющие одну ссылки

Question

Скажут, я конкатенация file1.js, file2.js и file3.js в один файл filesaltogether.js, и этот новый файл будет скопирован из разработчика в дист проекта.

Теперь, как должны три ссылки на эти три файла; т.е. <scipt src="file1.js">...<script src="file3.js"> преобразуются в одну ссылку на этот новый файл filesaltogether.js не вручную в файле index.html в DIST папке проекта

Answer 1

, как следует из трех ссылок на эти три файла; т.е. <link href="file1.js">...<link href-"file3.js" преобразуются в одну ссылку на этот новый файл filesaltogether.js ...

Во-первых, <link href="file1.js"> не является допустимым способом связать файлы JavaScript для ваших HTML документов.

См. Ответ here для получения дополнительной информации о том, как используется тег <link>.

Приведенные ниже примеры показывают правильный синтаксис для связывания файлов JavaScript в HTML-документ:

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

... или без атрибута type, как type считается JavaScript, если не определено в HTML5.

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

Поэтому мой следующий ответ предполагает, что вы на самом деле имеете в виду, как можно три <script> тегов преобразуются в один <script> тег.

Для достижения этой цели есть полезный хрюкать плагин называется 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--> 

Комментарий <!--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> 

В дополнение к добавлению специальных комментариев в HTML разметке вам необходимо будет также добавить processhtml задачу в вашем Gruntfile.js конечно.

В приведенном ниже примере будет:

1. Объединить три JavaScript файлов и выводить файл с именем filesaltogether.js в папку js внутри dist папки
2. Replace специальных комментариев внутри HTML-файл с одним <script> теге ссылка на файл конкатенированного 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' 
    ]); 

}; 

Надеюсь, это поможет!