Visual Studioコードでタスクを自動化する方法

GruntやGulpなどのビルドツールを使用すると、開発段階の時間を大幅に節約できます。 いくつかの繰り返しを自動化する “タスク”. あなたがGo-to-codeエディタとしてVisual Studio Codeを選ぶと、ワークフローはさらに合理化され、最終的にはより生産的になるでしょう。.

Node.jsを中心に構築されたVisual Studio Codeでは、次のことが可能です。 エディタウィンドウを離れることなくタスクを実行する. この記事では、その方法を説明します。.

さぁ、始めよう.

前提条件

まず最初に、それぞれのビルドツールのNode、NPM（Node Package Manager）、およびCLI（Command Line Interface）をすべてシステムにインストールする必要があります。これらすべてがインストールされているかどうかわからない場合は、コマンドラインを入力するだけで簡単に確認できます。.

また、プロジェクト内のファイルとディレクトリは適切な場所にあると仮定します。設定などのファイル gulpfile.js または Gruntfile.js 代わりにGruntを使用している場合そしてプロジェクトの依存関係はに登録されています package.json この時点でもインストールする必要があります.

以下は、私たちのプロジェクトのディレクトリとファイルです。 デモンストレーション 記事上で。あなたのプロジェクトは確かに大きく異なります。あなたはより多くのまたはより少ないファイルを持っているかもしれません.

. ├──css│├──sass├──gulpfile.js├──index.html├──js│├──src├──node_modules└──package.json

私たちのプロジェクトでは、Gulpをビルドツールとして利用しています。に登録されているタスクがいくつかあります。 gulpfile.js 次のように：

 var gulp = require（ 'gulp'）; var uglify = require（ 'gulp-uglify'）; var sass = require（ 'gulp-sass'）; var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task（ 'scripts'、function（）return gulp.src（jsSrc）.pipe（uglify（））.pipe（gulp.dest（ './js'）））; gulp.task（ 'styles'、function（）return gulp.src（sassSrc）.pipe（sass（outputStyle： 'compressed'））.pipe（gulp.dest（ './css'））;） ; gulp.task（ 'automate'、function（）gulp.watch（[sassSrc、jsSrc]、['scripts'、 'styles']）;）; gulp.task（ 'default'、['scripts'、 'styles'、 'automate']）;

特に指定したタスクは4つあります。

スクリプト：Gulp UglifyJSプラグインを通して出力を最小化するだけでなく、私たちのJavaScriptファイルをコンパイルするタスク.
スタイル：SCSSファイルをCSSにコンパイルし、出力を圧縮するタスク.
自動化する：自動化するタスク スタイル そして スクリプト gulp内蔵のタスク 時計 効用.
デフォルト：前述の3つのタスクをまとめて同時に実行するタスク.

私たちのプロジェクトの中のビルドツールはすべて準備されているので、私たちは今、私たちが定義したこれらのタスクを自動化することもできます。 gulpfile.js.

しかし、あなたが上記のツールのどれにも慣れていない場合は、先に進む前に、私たちのこれまでの投稿のいくつかを調べてあなたを主題にすることを強くお勧めします。.

Gruntを使用してワークフローを自動化する方法
Gulp.jsを始めよう
ビルドスクリプトの戦い：Gulp vs Grunt

タスクの実行と自動化

実行と自動化 “タスク” Visual Studioのコードでは非常に簡単です。まず始めに コマンドパレット Shift + Cmd + Pキーの組み合わせを押すか、メニューバーから, 表示>コマンドパレット それがあなたにとってより便利であれば。それから、タイプしなさい タスク, そして選択 “タスク：タスクの実行” 結果に表示される少数のオプションから.

Visual Studioのコードは賢いです。それは私たちがGulpを使っていることを知っています、拾います gulpfile.js, ファイル内で定義したタスクのリストを表示します。.

ここでは、 デフォルト 仕事。このタスクを選択すると、SCSSスタイルシートとJavaScriptファイルがコンパイルされます。 自動化する 許可するタスク スタイル そして スクリプト これからも自律走行する仕事.

ファイル（スタイルシートまたはJavaScriptファイル）を変更すると、自動的にコンパイルされます。 Visual Studio Codeは、ビルド操作で発生したすべての成功とエラーについてタイムリーなレポートも生成します。.

深層統合

さらに、プロジェクトをVisual Studioコードに統合して、ワークフローを合理化することもできます。タスクをVisual Studioコードに統合するのは簡単で迅速です。.

コマンドパレットを起動して選択 “Task Runnerを構成する”. Visual Studio Codeは、サポートしているビルドツールの一覧を表示します。この場合は、 “ガルプ”, それがこの記事のプロジェクトで使用しているものです。.

これでVisual Studio Codeは新しいファイルを作成したはずです。 tasks.json 下 .vscode プロジェクトディレクトリ内. tasks.json, この時点では、裸の設定が含まれています.

そしてあなたが以下で見ることができるように、 タスク プロパティinは現在、単に空の配列です。.

"バージョン"： "0.1.0"、 "コマンド"： "gulp"、 "isShellCommand"：true、 "args"：["--no-color"]、 "タスク"：[]

を拡張する タスク 以下の値.

"バージョン"： "0.1.0"、 "コマンド"： "gulp"、 "isShellCommand"：true、 "args"：["--no-color"]、 "タスク"：["taskName"： "デフォルト値 "、" isBuildCommand "：true、]

の taskName タスク名を指定します。 gulpfile.js 走りたいです。の isBuildCommand プロパティは デフォルト としてのコマンド “造る” コマンド。コマンドパレットを移動するのではなく、Shift + Cmd + Bのキーの組み合わせを押すだけで済みます。.

代わりにあなたが選択することがあります “ビルドタスクを実行する” パレットでのタスクの検索結果の説明.

まとめ

私はVisual Studio Codeは素晴らしい未来を持ったコードエディタだと思います。これは高速で、この記事で示した機能を含め、箱から出してすぐに使える便利な機能がいくつか組み込まれています.

Gulpからタスクを実行する方法を見ました。代わりにGruntを使うこともできます。タスクをVisual Studioコードに統合し、キーの組み合わせで実行する方法を見てきました。これにより、ワークフローがより合理化されます。.

うまくいけば、この記事はビルドタスクを実行するための参考資料として役立ちます。また、Visual Studioコードを最大限に活用するためのヒントについては、以前の記事をチェックしてください。.

Visual Studio Code：最先端を行く5つの素晴らしい機能
Visual Studioコードをカスタマイズする方法
フロントエンド開発者向けの8つの強力なVisual Studioコード拡張
Visual Studioコード：キー割り当て管理による生産性の向上
Visual StudioのコードにおけるMicrosoftの包括的なデザインの影響