ASP.NET 5、問題番号7を準備しています：Gulpとの連携の詳細

ASP.NET 5のコラムでは、ウクライナの代表であるDmitry Ubraniansの Dmitry Sikorskyによる出版物を続けています。 この記事では、Dmitryが、人気のあるGulpツールのASP.NET 5を使用したアプリケーションシナリオについて詳しく説明しています。 このコラムの以前の記事は、 ＃aspnetcolumn -Vladimir Yunevでいつでも読むことができます。

ASP.NET 5以前は、Gulpのようなツールを使用したことがなかったため、このプラットフォームで最初のプロジェクトを作成したときの時間を把握しなければなりませんでした（当時はまだGruntがありましたが、重要）。 すでに十分に詳細に説明されている基本的なことは行いません（プロジェクトには既にGulpfile.jsがあり、Visual Studio 2015のタスク実行マネージャーを使用してタスクを実行できることを意味します）実際に、Gulpを使用してASP.NET 5プロジェクトのすべてを自動化する方法を紹介します。









この記事では、AspNet5GulpizationテストプロジェクトのGulpfile.jsファイルのフラグメントを提供します 。このプロジェクトは、完全にhttps://github.com/DmitrySikorsky/AspNet5Gulpizationにあります 。

エントリー

新しいwwwrootフォルダーの用途をご存知でしょう。 実際、彼女の外観では、スクリプト、スタイル、写真を少し新しい方法で見ました。 つまり、サイトのサーバーのコードのように、ソースと公開の準備ができたオブジェクトに分けます。

準備する

アドバイス！ すべてを試すか、GitHub https://github.com/DmitrySikorsky/AspNet5Gulpizationからソースコードをダウンロードしてください 。

最初に、タスクで使用するすべてのパッケージをGulpファイルにリストする必要があります（そして、それらがすべてpackage.jsonに存在することを確認してください）。

var gulp = require("gulp"), autoprefixer = require("gulp-autoprefixer"), concat = require("gulp-concat"), del = require("del"), minifyCss = require("gulp-minify-css"), rename = require("gulp-rename"), runSequence = require("run-sequence"), sass = require("gulp-sass"), tsc = require("gulp-tsc"), uglify = require("gulp-uglify");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、ソースファイルと結果ファイルがすべて1つの場所で編集できるように、オブジェクトの形式のパスを表すと非常に便利です。

 var paths = { frontend: { scss: { src: [ "styles/*.scss" ], dest: "wwwroot/css" }, ts: { src: [ "scripts/*.ts" ], dest: "wwwroot/js" } }, shared: { bower: { src: "bower_components", dest: "wwwroot/lib" } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後に、すべてのスクリプトとスタイルを再構築し、それらを処理して、結果のフォルダーにコピーするメインのGulpタスクについて説明します。

 gulp.task( "rebuild", function (cb) { runSequence( "clean", "build", "minify", "delete-unminified", "rename-temp-minified", "delete-temp-minified", cb ); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

runSequenceパッケージを使用すると、タスクを次々と順番に実行できます。この場合、これは非常に重要です。 また、cbコールバック関数をシーケンスの最後のタスクとして渡して、呼び出しコードにプロセス全体の完了を通知できるようにしてください。



ちなみに、手動で再構築タスクを実行しないようにするには、プロジェクトをビルドまたは開くときにスタジオに強制的に実行させるか、Gulpファイルに直接別のタスクを追加し（プロジェクトを開くときに自動的に実行）、リスナーを設定してソースファイルを変更し、そのような変更が検出されたらタスクを完了します。

スクリプト

私は、そのシンプルさと優雅さでJavaScriptを本当に愛しました（そしてこれからもそうです）。 現在、TypeScriptも大好きです。 （これは素晴らしいツールです。注意することをお勧めします。）通常、すべてのtsファイルをScriptsフォルダーに保存しますが、プロジェクトの公開時には無視されます。 これらは、クライアントスクリプトのソースコードです。 最初にTypeScriptをJavaScriptにコンパイルし、それを圧縮してから1つのファイルに接着し、最終的に結果ファイルをwwwroot / jsフォルダーにコピーして、アプリケーションで使用するタスクをGulpファイルに設定します。 （TypeScriptを使用していない場合は、単にJavaScriptに変換する手順をスキップできます。残りのタスクは変更せずに動作します。）



既定では、Visual Studio 2015は保存時にtsファイルをコンパイルし、結果のjsファイルを同じフォルダーに配置します。 この動作は必要ないため、プロジェクト設定でTypeScriptコンパイルを無効にします。



TypeScriptをコンパイルするジョブは次のようになります。

 gulp.task( "frontend:build-ts", function (cb) { return gulp.src(paths.frontend.ts.src) .pipe(tsc()) .pipe(gulp.dest(paths.frontend.ts.dest)); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのため、結果のJavaScriptを圧縮して、1つの結果ファイルに貼り付けることができます。

 gulp.task( "frontend:minify-js", function (cb) { return gulp.src(paths.frontend.ts.dest + "/*.js") .pipe(uglify()) .pipe(concat("aspnet5gulpization.min.js.temp")) .pipe(gulp.dest(paths.frontend.ts.dest)); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

多くのjsファイルを1つに貼り付けると、結果のファイルに間違った順序で追加され、定義が呼び出し後に配置されるため、定義されていないというメッセージが表示される可能性があります。 これが発生した場合、結果ファイルのスクリプトの順序を手動で簡単に設定できます。 最初に従う必要があるスクリプトを必要な順序でリストすることもでき、配列の最後の要素と同じフォルダを示すだけで、Gulpは明示的に指定されたファイルを最初にフォルダから処理し、残りをすべて処理する必要があると推測します。



ちなみに、NPMパッケージを復元する際にエラーメッセージが突然表示される場合（オプションで、切断された一連の文字で構成される文言を使用）、またはパッケージを復元しようとするとVisual Studio 2015が単にクラッシュする場合、これはファイルシステム内のプロジェクトのネストの深さによる可能性があります。 （一部、これに関する情報はここで見つけました： https : //github.com/Microsoft/nodejstools/issues/336 ）少し時間を費やした後、少ないサブフォルダーに空のプロジェクトを作成し、そこにpackage.jsonをコピーし、そこに復元しましたパッケージし、node_modulesフォルダーと共にプロジェクトに転送します。 また、スタジオの崩壊中に、破損したパッケージがnpm-cacheフォルダーに入る可能性があるため、これを念頭に置いて、必要に応じてそこから削除する必要があります。

スタイル

最近では、SCSSを試すことにしました。 主な目標は、検索と置換を使用するのではなく、色などを1か所で編集できるようにすることでした。 また、巨大なcssファイルを複数の部分に分割することは素晴らしいことであると判断しました。それにより、それらを伴うのがより便利になります（私の意見では、ポイ捨てを避けながらスタイルを伴うことは非常に困難です。一目で必ずしも明らかではありません）。 SCSSを使用すると良い結果が得られました。



TypeScriptと同様に、私のGulpファイルには、SCSSをCSSにコンパイルし、ベンダープレフィックスを追加し、結果ファイルをwwwroot / cssフォルダーに圧縮、接着、コピーするタスクが含まれています。



CSSでのSCSSのコンパイルは次のとおりです。

 gulp.task( "frontend:build-scss", function (cb) { return gulp.src(paths.frontend.scss.src) .pipe(sass()) .pipe(gulp.dest(paths.frontend.scss.dest)); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さて、圧縮、接着（ベンダープレフィックスの同時配置）：

 gulp.task( "frontend:minify-css", function (cb) { return gulp.src(paths.frontend.scss.dest + "/*.css") .pipe(minifyCss()) .pipe(autoprefixer("last 2 version", "safari 5", "ie 8", "ie 9")) .pipe(concat("aspnet5gulpization.min.css.temp")) .pipe(gulp.dest(paths.frontend.scss.dest)); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

図書館

たとえば、ASP.NET 5プロジェクトでjQueryが必要な場合は、ほとんどの場合Bowerを使用してダウンロードします。以前に使用したNuGetとは異なり、jquery.min.jsファイルと2つ以上のファイルを取得します。その他。 jqueryフォルダーはbower_componentsフォルダーに作成されます。このフォルダーには、上記のファイルに加えて、ライブラリの非圧縮バージョンとそのソースがあります（もちろん、公開中は無視されます）。



考えてみれば、これらのライブラリを少なくとも2つの方法で使用できます。



まず、jquery.min.jsファイルを最初にwwwroot / lib / jqueryフォルダーにコピーして、ページに接続するだけです。 それは私がやったことです（Google Hosted Librariesのようなサービスをより正確に使用することはできません。そのため、ブラウザは別のサイトにアクセスするときに、ダウンロードするのではなく、ライブラリオプションをキャッシュしますが、ほとんどの場合はそうしません）。



次に、ライブラリの非圧縮バージョン（jquery.js）を取得し、アプリケーション内の他のスクリプトが処理されるのと同じ方法で処理できます。 つまり、結果として、単一の共通jsファイルに追加し、Webサーバーへのリクエストの数を減らします。



3つのライブラリに必要なファイルをコピーするタスクは次のとおりです。

 gulp.task( "lib-copy", function (cb) { var lib = { "/jquery": "/jquery/dist/jquery*.{js,map}", "/jquery-validation": "/jquery-validation/dist/jquery.validate*.js", "/jquery-validation-unobtrusive": "/jquery-validation-unobtrusive/jquery.validate.unobtrusive*.js" }; for (var $package in lib) { gulp .src(paths.shared.bower.src + lib[$package]) .pipe(gulp.dest(paths.shared.bower.dest + $package)); } cb(); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結論

私は結果が好きです。 スタイルとスクリプトを簡単かつ便利に操作し、公開前にそれらを簡単かつ便利に最適化して、プロセスを完全に制御できることが気に入っています。 もちろん、これはGulpが支援できる唯一の方法ではありませんが、その機能を完全に理解するにはこれで十分だと思います。

著者向け

ご友人、ご自身の資料でコラムをサポートすることに興味がある場合は、すべての詳細を議論するためにvyunev@microsoft.comまでご連絡ください。 ASP.NETおよびその他のトピックについて興味深い話ができる著者を探しています。

著者について

シコルスキー・ドミトリー・アレクサンドロヴィチ

Ubrainians Company（http://ubrainians.com/）

オーナー、マネージャー

ドミトリーシコルスキー