2017-12-21 4 views
0

종속성을 처리하기 위해 패키지 관리자로 bower & npm을 사용하고 있습니다. 이제 정자는 bower-away를 사용노드 모듈 파일을 index.html에 삽입하십시오.

npm WARN deprecated [email protected]: ...psst! 
Your project can stop working at any moment because its dependencies can change. Prevent this by migrating to Yarn: 
https://bower.io/blog/2017/how-to-migrate-away-from-bower/ 

그래서 내가 통합 한 yarn을 보이고있다. 이제 모든 이물 종속성 내가 index.html을에 모든 의존성 라이브러리를 주입하는 wiredep을 사용

"@bower_components/angular": "angular/bower-angular#~1.6.4", 
"@bower_components/jquery": "jquery/jquery-dist#>= 1.9.1" 

아래 등 내 package.json로 이동합니다. bower 의존성을 자동으로 처리합니다. 이제는 bower을 완전히 제거 했으므로 작동하지 않습니다. 종속성을 index.html로 옮기는 다른 방법이 있습니까? 현재 .pipe(inject(gulp.src(["./src/*.js", "./src/*.css"], {read: false}))과 같은 모든 파일을 삽입하는 방법은 gulp inject이지만 모든 패키지를 처리하지는 않습니다. 경로가 완전히 다르니까. 예를 들어 : 아래

enter image description here

할 수있는 사람과 같은 JQuery와 및 각 폴더는 제안이를 달성하기 위해 다른 방법이있다.

답변

1
여전히

당신이 gulp inject 사용하여 해결할 수 : 나는 위의 코드를 업데이트 한

gulp.task('injectfiles', function() { 

    var appJS= ["./src/*.js"];// pattern to match your files 

    var libJS= [   
       '(path where jquery exist)/jquery.js', 
       '(path where angular exist)/angular.js' 
       ]; 

      var jsOrder= [ 
       '**/jquery.js', 
       '**/angular.js', 
       '(rest lib js)' 
       '**/app.module.js', 
       '**/*.module.js', 
       '**/*.constants.js', 
       '**/*.value.js', 
       '**/*.config.js', 
       '**/*.route.js', 
       '**/*.filter.js', 
       '**/*.service.js', 
       '**/*.controller.js', 
       '**/*.directive.js', 
       '**/*.js' 
      ]; 

     var src = [].concat(libJS,appJS) 


     return gulp 
     .src('index path') 
     .pipe(inject(src, '', jsOrder)) 
     .pipe(gulp.dest('dest path')) 
}) 



function inject(src, label, order) { 
    // var options = { read: false }; 
    var options = {} 
    if (label) { 
     options.name = 'inject:' + label 
    } 

    return $.inject(orderSrc(src, order), options) 
} 


function orderSrc(src, order) { 
    // order = order || ['**/*']; 
    return gulp 
     .src(src) 
     .pipe($.if(order, $.order(order))) 
} 
+0

을,하지만 난 오류가 아래 얻고있다'캐치되지 않는 구문 에러 : 예기치 않은 토큰 satheesh

+0

'libJS'는 웹 사이트에 필요한 모든 라이브러리를 포함하고 있습니다. 당신은 또한 'angular-cookies.min.js'에 의존합니다.'angular-ui-router.min.js' ... 등등.이 어레이에 모두 추가하십시오 ... 또한'jsOrder'는 주문을 지정하는 것입니다 모든' js'가'index.html'에 삽입 될 것이므로 다시'jsOrder' 배열의 처음 세 줄에서 볼 수 있듯이 모든'libjs '를 올바른 순서로 지정해야합니다 ... 이렇게하면 확실하게 ... 더 나은 해결책으로'webpack'을 명심하십시오. –

+0

주입 후 나는 파일이 index.html 파일로 주입 된 것을 볼 수 있습니다. 검사 요소를보고 브라우저에서 js 파일을 열 수 없습니다. – satheesh