scripts/plugins.js와 scripts/modules.js의 차이점은 무엇입니까?

Question

Yeoman은 내 첫 번째 각형 응용 프로그램을 만들었고 index.html에서는 일부 빌드 프로세스에서 소비 될 것으로 추측되는 다음 코드를 배치했습니다. 아직 프로세스가 무엇인지 모릅니다.

그러나 index.html에서는이 3 개의 코멘트 그룹 사이에서 스크립트를 구분했습니다. 마지막 코드는 내 코드가있는 곳으로 보이지만, 처음 2 개는 다소 구별됩니다. 나는 그들이 무슨 뜻인지 알아 내려고 노력하고있어, 그래서 내가 사용할 수있는 응용 프로그램 만들기 위해 추가해야이 조각 삽입 할 위치를 알고

<script src="bower_components/angular-ui-calendar/calendar.js"></script> 
    <script src="bower_components/ng-grid/ng-grid-2.0.7.min.js"></script> 

들이 (첫 번째 그룹에 속하지 빌드 수행을 : JS 스크립트를 /plugins.js) 또는 두 번째 (빌드 : js scripts/modules.js)? 왜 jquery와 그 두 그룹 외부의 각도가 있습니다. 해당 지시문에 대해 어떤 종류의 처리가 필요하지만, 빌드에 대한 인터넷 검색 : js과 같은 결과는 관련성이있는 것 같습니다.

<script src="bower_components/jquery/jquery.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 

    <!-- build:js scripts/plugins.js --> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-button.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script> 
    <script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script> 
    <!-- endbuild --> 

    <!-- build:js scripts/modules.js --> 
    <script src="bower_components/angular-resource/angular-resource.js"></script> 
    <script src="bower_components/angular-cookies/angular-cookies.js"></script> 
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> 
    <!-- endbuild --> 

    <!-- build:js({.tmp,app}) scripts/scripts.js --> 
    <script src="scripts/app.js"></script> 
    <script src="scripts/controllers/main.js"></script> 
    <!-- endbuild --> 

관련 문서에 대한 설명이나 참고 자료는 매우 유용합니다.

Answer 1

보좌관은 내 첫 번째 각도 응용 프로그램을 구축하고 index.html을, 그것은 (나는 그 과정이 무엇인지 모르는 나는 약간 빌드 프로세스에 의해 소비 될 것 같은데요 다음 코드를 배치 아직.)

은 "빌드 프로세스는"grunt이며,보다 구체적으로 grunt-usemin 플러그인은 index.html을에서 주석 블록 내부의 지시를 사용하고있을 것이다 것입니다. (: JS 스크립트/plugins.js 구축) 또는 초 (빌드 : JS 스크립트/modules.js를)

은 첫 번째 그룹에 속해 있습니까?

여러분이 결정해야 할 부분입니다. 각 블록에 포함 된 모든 스크립트는 index.html 파일의 빌드 된 버전에 포함 된 단일 스크립트로 연결되고 축소됩니다. "build : js scripts/plugins.js"명령은 툴킷이 자바 스크립트 블록임을 툴팁 빌드 시스템에 알려주고 블록의 내용을 연결하고 축소 한 결과로 plugins.js를 생성합니다.

왜 jquery와 angular가 둘 다 그룹 외부에 있습니까?

원하는 경우 스크립트를 그룹화하고 분류 할 수 있지만 몇 가지 모범 사례가 있습니다. 예를 들어, 자주 변경 될 수 있으므로 사용자가 소유 한 모든 스크립트를 한 블록에 배치 할 수 있습니다. 스크립트 변경으로 인해 모든 스크립트가 다시 다운로드되지 않아야하므로 클라이언트의 캐싱 성능을 향상시킬 수 있습니다. jQuery와 Angular 스크립트는 코드를 업데이트 할 때마다 다시로드해야하는 매우 큰 (획일적 인) 스크립트를 작성하기 때문에 코드와 동일한 블록에 포함시키지 않을 것입니다.

일반적으로 타사 플러그인, 라이브러리 또는 모듈과 같은 카테고리별로 내 그룹을 구성합니다. 때로는 성능이 핵심이라면 각 카테고리의 스크립트가 얼마나 자주 업데이트 될지 예측할 수 있습니다. 사용자가 실제로 변경되지 않은 코드를 다운로드하지 않아도되는 방식입니다.

빌드에 대한 인터넷 검색을 내가 그 지시가하는 일에 핸들의 일종이 필요 같은 느낌,하지만 : JS는 관련이있을 것으로 보인다 결과를 생성하지 않습니다.

grunt-usemin 플러그인 페이지의 문서를 읽고 "지시어"사용법에 대해 자세히 알아보십시오.

Answer 2

기본적으로 grunt cdnify은 Google의 CDN을 사용하기 위해 jQuery와 Angular가 바뀌었기 때문에 외부에 있다고 생각합니다.