Windows 11/10/7にGruntをインストールする方法

にWindows に Grunt をインストールし、まず、Grunt ソフトウェアが必要な同じシステム上に Node.js と NPM が必要です。したがって、これについて知るためにチュートリアル部分を掘り下げる前に、まず見てみましょうグラントとは何ですか？

Grunt は、圧縮、コンパイル、単体テスト、lint チェックなど、本質的に反復的な開発者向けのさまざまなタスクの自動化を可能にする JavaScript タスクランナーです。これにより、作業が容易になります。最も良い点は、Grunt には最小限の労力でタスクを自動化できる幅広いプラグインライブラリがあることです。さらに、プロジェクトに取り組んでいて、それをサポートするために Grunt では利用できないプラグインが必要な場合は、独自のプラグインを作成できます。 npmを使用します。

Grunt はコマンドラインインターフェイスを使用して、プログラマーが指定したファイル内で指定された意図したコマンドを実行します。グラントファイル。

Grunt は Ben Alman によって作成され、Node.js で書かれており、Twitter、Opera、Mozilla、Bootstrap、WordPress、Microsoft、Adobe などの多くの人気企業で使用されています。

この記事の本題は、Windows 10/8/7 に Grunt をインストールする方法です。したがって、Grunt をインストールして管理するには NPM が必要です。そのためには、まず Windows に Node.js をインストールする必要があります。これは、NPM が Nodejs のパッケージマネージャーであり、それに付属しているためです。

Windows 11 または 10 に Grunt をインストールする

ステップ 1: Windows に Node.JS と NPM をダウンロードする

まず、Nodejs の公式 Web サイトにアクセスします。リンク。そして、この記事を書いている時点での Node.js の安定バージョンをダウンロードします。10.15.3。

ステップ 2: Windows 用の NPM と Node.js をインストールする

次に、ダウンロードした Node.js セットアップをダブルクリックします。そして、次ウィザードが表示されたら、ボタンをクリックします。

Node.js または NPM インストールのセットアップウィザードでは、使用許諾契約への同意を求められます。ボックスにチェックを入れて、次ボタン。

別の場所にインストールする場合に備えて、宛先フォルダーを設定するか、デフォルトのままにして、次ボタン。

インストールされるパッケージは次のとおりですNode.js Java ランタイムそしてnpmパッケージマネージャーとともにショートカットに関するオンラインドキュメント。

をクリックしてください次その後インストール。

ステップ 3: Windows コマンドプロンプトを開く

管理者権限でコマンドプロンプトを開き、次のコマンドを入力して NPM のインストールを確認します。

npm -v

上記のコマンドは、インストールされている npm のバージョンを表示します。

システムに Node.js と NPM がすでにある場合は、以下のコマンドを使用して、最新の更新があるかどうかを確認できます (利用可能な場合)。

npm update -g npm

ステップ 4: NPM を使用して Windows に Grunt をインストールする

Grunt JS はコマンドラインで動作することがわかっているため、Windows 上の NPM パッケージマネージャー経由で Grunt CLI をインストールするには、次のコマンドを実行します。

npm install -g grunt-cli

ステップ 5: Grunt をテストするためのデモプロジェクトを作成する (Windows)

最初に Grunt をインストールした後、プロジェクトを作成できます。たとえば、ここでは Raj というプロジェクトを作成しています。

そのためには、コマンドプロンプトからプロジェクト名のディレクトリを作成するだけです。ここでは、プロジェクト名としても使用されるディレクトリ名として raj を使用しています。

mk raj

作成したディレクトリに移動します

cd raj

次に、簡単なコマンドを使用して基本的な package.json ファイルを作成します。

npm init

Grunt の最新バージョンをインストールし、devDependency に追加します-

npm install grunt --save-dev

次のコマンドを使用して、grunt プラグインを既存の pacakge.json ファイルにインストールします。

npm install <module> --save-dev

<module>は、プロジェクトにローカルにインストールするモジュールを表します。

例えば、ここでインストールしていますgrunt-contrib-uglifyメタデータを印刷するプラグイン:

npm install grunt-contrib-uglify --save-dev

トリビア: これがイサキですプラグイン一覧。

コマンドプロンプトタイプを使用して Gruntfile.js を作成します。

type nul > gruntfile.js

notepad gruntfile.js

次のテキストを追加して保存します。

module.exports = function(grunt) {
// CONFIGURE GRUNT
grunt.initConfig({
// get the configuration info from package.json file
// this way we can use things like name and version (pkg.name)
pkg: grunt.file.readJSON('package.json'),

// all of our configuration goes here
uglify: {
// uglify task configuration
options: {},
build: {}
}
});

// log something
grunt.log.write('Hello world! Here is the tutorial to install the grunt on Windows | H2s Media!!\n');

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

// Default task(s).
grunt.registerTask('default', ['uglify']);
};

メモ帳を閉じてコマンドプロンプトに戻り、次のコマンドを入力します。