여러 파일을 하나의 파일로 연결하고 하나의 링크가있는 경우

Question

예를 들어 , file2.js 및 file3.js을 하나의 파일 filesaltogether.js에 연결하면이 새 파일이 프로젝트의 dev에서 dist로 복사됩니다.

이제 세 파일에 대한 세 가지 링크가 어떻게되어야합니까? 즉 <scipt src="file1.js">...<script src="file3.js"> 프로젝트의 dist 폴더에 index.html 파일에 손이 새 파일 filesaltogether.js하지 않도록 하나 개의 링크로 변환됩니다

Answer 1

방법이 세 가지 파일에 세 개의 링크해야한다; 즉 <link href="file1.js">...<link href-"file3.js"

첫째, <link href="file1.js">는 HTML 문서에 자바 스크립트 파일을 연결하는 유효한 방법이 아니다 ...이 새 파일 filesaltogether.js에 하나 개의 링크로 변환됩니다.

<link> 태그의 사용 방법에 대한 자세한 내용은 here을 참조하십시오.

아래의 예는 HTML 문서에 스크립트 파일을 링크에 대한 올바른 신택스를 보여

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

... 또는 type 속성없이 type가 HTML5에 정의되지 않은 경우, 자바 스크립트 인 것으로 가정한다.

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

그러므로, 내 다음 대답은 세 가지 <script> 태그 한 <script> 태그로 변환 얻을 수있는 방법 당신이 정말로 의미하는 것으로 가정합니다.

이이 플러그인을 사용하면 다음 그런트에 의해 처리 얻을 귀하의 HTML 마크 업에 특별한 주석을 추가 할 수 있습니다 grunt-processhtml

라는 플러그인이 유용한 불평 소리가 달성합니다. 귀하의 요구에 대한 당신의 소스 .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 경로를 정의 할 수 있습니다. 예 : 당신의 HTML 마크 업에 특별한 주석을 추가하는 것 외에도

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

당신은 또한 당신의 Gruntfile.js 과정에서 processhtml 작업을 추가해야합니다

<!--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--> 

이 될 것입니다.

예 아래의 것 :

1. 연결할 dist 폴더
2. 내부의 js 폴더에 filesaltogether.js라는 이름의 세 JavaScript 파일과 출력 파일 하나 <script> 태그로 HTML 파일 내부에 특별한 코멘트를 교체 연결된 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' 
    ]); 

}; 

희망이 있습니다.