ASP.NET CoreでTypeScriptを使う(続き・改)

前回のTypeScriptでjQueryを使うの別パターンです。

ichiroku11.hatenablog.jp

前回は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が表示されるはずです。

こんな感じでいいのかなと。