당신의 자바 스크립트 파일을 자동으로 삽입하십시오

Question

나는 그저 그놈과 접촉하려고합니다. usemin과 wiredep. 내 index.html 파일이 있습니다

<!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 
<!-- build:css(.) styles/vendor.css --> 
<!-- bower:css --> 
<!-- endbower --> 
<!-- build:css(.tmp) styles/core.css --> 
<link rel="stylesheet" href="styles/core.css"> 
<!-- endbuild --> 

내가 를 실행하는 경우가를 구축 투덜의 index.html을이에 수정 :

<!-- build:css(.) styles/vendor.css --> 
<!-- bower:css --> 
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" /> 
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" /> 
<link rel="stylesheet" href="bower_components/ng-notify/src/styles/ng-notify.css" /> 
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css" /> 
<!-- endbower --> 
<!-- endbuild --> 
<!-- build:css(.tmp) styles/core.css --> 
<link rel="stylesheet" href="styles/core.css"> 
<!-- endbuild --> 

이 큰이지만, 만 bower : css 파일에 대해 발생합니다 (wiredep으로 끝납니다). 내 페이지 아래로 자바 스크립트 파일과 비슷하게 작동합니다. 나는 내 오우를 위해 그것을하고 싶습니다. JavaScript 파일. 현재 약 100 개가 있는데 수동으로 내 src/index.html에 입력했습니다. 내 응용 프로그램을 만들 때, usemin 내 스크립트를 concatinated, uglified 버전으로 대체합니다. 그러나 내가 구축 할 때 src/index.html이 src/app 디렉토리의 모든 스크립트를 가져와 내 html 파일에 삽입하고 싶습니다.

이 작업을 수행 할 수 있습니까?

Answer 1

나는 이것을 grunt-injector을 사용하여 알아낼 수있었습니다. 나는 이런 식으로 불평 소리 주사기를 사용하여 내 Gruntfile 구성 :

// Automatically inject my components into index.html 
injector: { 
    options: { 
    template: '<%= yeoman.app %>/index.html' 
    }, 
    html: { 
    options: { 
     transform: function (filePath) { 
      return '<script type="text/ng-template" src="' + filePath.replace('/src/', '') + '"></script>'; 
     } 
    }, 
    files: { 
     '<%= yeoman.app %>/index.html': [ 
     '<%= yeoman.app %>/app/**/*.html' 
     ] 
    } 
    }, 
    scripts: { 
    options: { 
     transform: function (filePath) { 
      return '<script src="' + filePath.replace('/src/', '') + '"></script>'; 
     } 
    }, 
    files: { 
     '<%= yeoman.app %>/index.html': [ 
     '<%= yeoman.app %>/app/**/*.module.js', 
     '<%= yeoman.app %>/app/**/*.js' 
     ] 
    } 
    }, 
    styles: { 
    options: { 
     transform: function (filePath) { 
      var media = filePath.indexOf('print') > -1 ? 'print' : 'screen'; 
      return '<link rel="stylesheet" media="' + media + '" href="' + filePath.replace('/.tmp/', '') + '" />'; 
     } 
    }, 
    files: { 
     '<%= yeoman.app %>/index.html': [ 
     '.tmp/styles/**/*.css' 
     ] 
    } 
    } 
}, 

을 그리고 내 index.html을에, 난 그냥 인젝터이 같은 코멘트를 넣어 :

<!-- injector:css --> 
    <!-- endinjector --> 

을 어느 것으로 변환 되었습니까?

<!-- injector:css --> 
    <link rel="stylesheet" media="screen" href="styles/core.css" /> 
    <link rel="stylesheet" media="print" href="styles/print.css" /> 
    <!-- endinjector --> 

그리고 그게 다야.