ASP.NET CoreでTypeScriptを使う(続き・改)
前回のTypeScriptでjQueryを使うの別パターンです。
前回はjQueryを取得するのにBowerを使いましたが、npm+Gulpでできないかなと思ったので試してみました。まずは前回の続きからbower.jsonとwwwroot/libフォルダを削除しておきましょう。
npmでjQueryを取得
npmを使ってjQueryを取得します。具体的にはnpm 構成ファイル(package.json)に以下を追加します。
"dependencies": { "jquery": "3.2.1", },
package.jsonは次のようになります。
{ "version": "1.0.0", "name": "asp.net", "private": true, "dependencies": { "jquery": "3.2.1" }, "devDependencies": { "@types/jquery": "3.2.16", "gulp": "3.9.1" } }
ファイルを保存して少し待つとnode_modules/jquery
フォルダができると思います。
GulpでjQueryをコピー
Gulp 構成ファイル(gulpfile.js)を次のように修正します。publishタスクでnode_modules/jquery/dist
にあるjQueryファイルをwwwroot/lib/jquery/dist
にコピーするようにしています。
const gulp = require("gulp"); // publishタスク gulp.task("publish", () => { // jQueryのjsとかをまるっとwwwroot/libにコピーする gulp.src(["node_modules/jquery/dist/*", ]) .pipe(gulp.dest("wwwroot/lib/jquery/dist")); // Scriptsフォルダ内のts、jsファイルをwwwroot/jsフォルダにコピーする gulp.src(["scripts/**/*.ts", "scripts/**/*.js", "scripts/**/*.map"]) .pipe(gulp.dest("wwwroot/js")); }); // detaultタスク gulp.task("default", () => { // Scriptsフォルダ内のjsファイルの変更を監視して、"publish"タスクを実行する gulp.watch("scripts/**/*.js", ["publish"]); });
タスクランナーエクスプローラーでpublishタスクを実行しましょう。Index.cshtmlを変更する必要はなく、そのままデバッグ実行するとalertが表示されるはずです。
こんな感じでいいのかなと。