.Bower를 NPM 또는 .NET으로 바꿔 넣는 방법 .Net Core 2.0 MVC 프로젝트

Question

내 프로젝트는 Bower를 사용하여 Bootstrap, Jquery 등을 관리하는 .Net 핵심 MVC입니다. 이제는 Bower가 사라져서 어떻게 NPM으로 마이그레이션 할 수 있습니까? 또는 Yarn/Webpack을 Bower가 제안 했습니까?

Answer 1

몇 가지 조사를 마친 후 확인해 보면 저에게 맞는 방법을 찾았습니다. 여기 내 단계

(우리는 나무 그늘에서 벗어나 필요로)

"gulp": "^3.9.1", 
    "gulp-uglify": "3.0.0", 
    "gulp-concat": "2.6.1", 
    "gulp-cssmin": "0.2.0", 
    "rimraf": "2.6.2", 
"lodash": "4.17.4", 

그런 다음 다른 패키지 dev에 종속성을 추가 NPM 통해 꿀꺽 설치 (package.json의 항목 아래에 추가)입니다.

"bootstrap": "3.3.7", 
    "jquery": "3.2.1", 
    "jquery-validation": "1.17.0", 
    "jquery-validation-unobtrusive": "3.2.6", 
    "fontawesome": "4.7.2" 

이제 NPM은 프로젝트 루트 폴더에 node_modules 모든 패키지를 다운로드합니다

같은 - 당신은 Windows 폴더 브라우저로 이동하여 또는

이제 다음 단계 VS

에서 쇼를 위해 모든 파일을 탈퇴하여 그들을 볼 수 있습니다 꿀꺽 거리는 작업 주자에서 작업을 설정합니다. 이를 위해 gulpfile.js를 추가하여 웹 프로젝트 바로 아래에 새 항목을 추가하십시오. 일단 파일이 추가되면 우리는 빌드시 실행할 실행 파일을 정의합니다.

벨로우는 노드 모듈에서 wwwroot/lib/_app로 패키지를 복사하고 css 및 js 파일을 정리/축소하는 3 가지 작업을 수행하는 샘플 파일입니다. 모든 작업이 VS 작업 러너 아래에서 관리되는 빌드 프로세스로 실행되도록 구성되었습니다.

/// <binding BeforeBuild='clean, clean:css, clean:js, min, min:css, min:js, copy-assets' Clean='clean, min:js, clean:css, copy-assets' /> 
"use strict"; 

var _ = require('lodash'), 
    gulp = require("gulp"), 
    rimraf = require("rimraf"), 
    concat = require("gulp-concat"), 
    cssmin = require("gulp-cssmin"), 
    uglify = require("gulp-uglify"); 

var paths = { 
    webroot: "./wwwroot/" 
}; 
gulp.task('copy-assets', function() { 
    var assets = { 
     js: [ 
      './node_modules/bootstrap/dist/js/bootstrap.js', 
      './node_modules/jquery/dist/jquery.min.js', 
      './node_modules/jquery/dist/jquery.js', 
      './node_modules/jquery-validation/dist/jquery.validate.min.js', 
      './node_modules/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js' 


     ], 
     css: ['./node_modules/bootstrap/dist/css/bootstrap.css'] 
    }; 
    _(assets).forEach(function (assets, type) { 
     gulp.src(assets).pipe(gulp.dest("./wwwroot/lib/_app/" + type)); 
    }); 
}); 
//gulp.task("copy-assets"); 



paths.js = paths.webroot + "js/**/*.js"; 
paths.minJs = paths.webroot + "js/**/*.min.js"; 
paths.css = paths.webroot + "css/**/*.css"; 
paths.minCss = paths.webroot + "css/**/*.min.css"; 
paths.concatJsDest = paths.webroot + "js/site.min.js"; 
paths.concatCssDest = paths.webroot + "css/site.min.css"; 

gulp.task("clean:js", function (cb) { 
    rimraf(paths.concatJsDest, cb); 
}); 

gulp.task("clean:css", function (cb) { 
    rimraf(paths.concatCssDest, cb); 
}); 

gulp.task("clean", ["clean:js", "clean:css"]); 

gulp.task("min:js", function() { 
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." }) 
     .pipe(concat(paths.concatJsDest)) 
     .pipe(uglify()) 
     .pipe(gulp.dest(".")); 
}); 

gulp.task("min:css", function() { 
    return gulp.src([paths.css, "!" + paths.minCss]) 
     .pipe(concat(paths.concatCssDest)) 
     .pipe(cssmin()) 
     .pipe(gulp.dest(".")); 
}); 

gulp.task("min", ["min:js", "min:css"]); 

VS에서 로컬로 작업 할 때 제대로 작동합니다. 하지만 우리는 VSTS 빌드 프로세스 중에 작동 할 수 있도록 csproj show를 구성해야합니다. 빌드하는 동안 필요한 모든 패키지를 wwwroot에/lib 디렉토리/_app에서 복사됩니다 당신이 당신의 CSS /를 가리킬 수 있습니다 JS 같은 존재로 심판 - 이것은 .csproj

<Target Name="buildName" BeforeTargets="Build"> 
     <Exec Command="npm install" /> 
    <Exec Command="gulp clean" /> 
    <Exec Command="gulp copy-assets" /> 
    <Exec Command="gulp min" /> 
    </Target> 

지금 모든 좋은 웹에서 설정 아래에 추가하여 수행됩니다 아래의 _Layout.cshtml

<link href="~/lib/_app/css/bootstrap.css" rel="stylesheet" />