.BowerをNPMまたはYarnに移行する方法.Net Core 2.0 MVCプロジェクト

Question

私のプロジェクトは、Bowerを使ってBootstrap、Jqueryなどを管理する.Net Core MVCです。 Bowerの提案によれば糸/ウェブパック？

Answer 1

ほとんどの研究の後、私はうまくいく方法を見つけました。ここでは（私たちは亭から離れて移動する必要があるとして）その後も他のパッケージのdevの依存関係を追加

"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", 

（package.json内のエントリの下に追加します）

がNPMスルー一口をインストールし、私の手順です。

"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

内のすべてのファイル

今すぐ次のステップgulpタスクランナーにタスクが設定されています。そのためには、gulpfile.jsを追加してWebプロジェクトの直下に新しい項目を追加します。ファイルが追加されると、ビルド時に実行されるgulp taksを定義します。

Bellowは、node-modulesからwwwroot/lib/_appに3つのタスクコピーパッケージをコピーし、cssとjsファイルをクリーンアップ/ミニファイル化するサンプルファイルです。 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の参照を指すことができますが - これは今、すべての良い

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

.csprojウェブで設定の下に追加することによって行われます下の_Layout.cshtml

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