yeoman webapp : 다중 HTML 페이지 용으로 축소 된 JS

Question

나는 yeoman webapp generator을 가지고 놀고 있으며 내 페이지의 개별 서브 페이지에 대해 여러 개의 축소 된 JavaScript 파일을 갖고 싶습니다. 그러나 웹 응용 프로그램은 모든 JavaScript 파일을 내 설정과 일치하지 않는 하나의 "큰"main.js으로 연결합니다.

제 설정에서 main.js은 모든 페이지에 공통되는 일종의 JavaScript 파일이지만 각 페이지에는이 페이지에만 관련된 내용의 추가 JavaScript 파일이 있어야합니다. 예 :

index.html -> 사용 main.js

subpage1.html -> 사용 main.js 및 subpage1.js

subpage2.html -> 사용 main.js 및 subpage2.js

gulp build의 결과가 main.js, subpage1.js 포함 큰 main.js이고 오류로 연결되는 subpage2.js : 내가 열면 , subpage2.js (큰 글꼴 main.js에 포함 된 글꼴)은 subpage2.html에만 있지만, subpage1.html에는없는 HTML 노드에 액세스하려고 할 수 있습니다.

예 :

subpage1.html 내가 할하지만 경우 subpage2.js에 따라 subpage1.js 및 subpage2.js을 포함 subpage2.js

<script src="scripts/main.js"></script> 

와 큰 main.js 포함

$('#IdThatOnlyExistsOnSubPage2').someMethod(...) 

물론 이것은 실패합니다.

어떻게이 문제를 해결하기 위해 Gulpfile을 조정해야합니까?

Answer 1

JS 및 CSS 빌드는 uglify (이전의 경우 usemin이라고 알려짐)로 생성되며 고급 옵션과 기능은 해당 설명서에서 찾을 수 있지만 필요에 따라 빌드 블록을 구분해야한다고 생각합니다.

모든 페이지에 공통된 JS 파일이있는 경우 각 페이지에 대해 함께 JS 파일을 만들고 페이지 별 파일에 대한 새 블록을 만들어야합니다.

다음은 예입니다.

<!-- build:js scripts/main.js --> 
<script src="config.js"></script> 
<script src="app.js"></script> 
<!-- endbuild --> 

<!-- build:js scripts/page-dashboard.js --> 
<script src="dashboard-charts.js"></script> 
<script src="dashboard-widgets.js"></script> 
<script src="dashboard-main.js"></script> 
<!-- endbuild --> 

또한 CSS 파일 빌드에 대해 동일한 작업을 수행 할 수 있습니다.

<!-- build:css styles/main.css --> 
<link rel="stylesheet" href="reset.css"> 
<link rel="stylesheet" href="app.css"> 
<!-- endbuild --> 

<!-- build:css style/page-dashboard.css --> 
<link rel="stylesheet" href="dashboard-charts.css"> 
<link rel="stylesheet" href="dashboard-widgets.css"> 
<link rel="stylesheet" href="dashboard-main.css"> 
<!-- endbuild -->