まず、grunt-cliをインストールするためには、以下の手順を実行します:
-
Node.jsのインストール: GruntはNode.js上で動作しますので、まずはNode.jsをインストールします。公式ウェブサイト(https://nodejs.org)から最新バージョンのNode.jsインストーラをダウンロードし、インストールします。
-
グローバルにgrunt-cliをインストール: コマンドライン(ターミナル)を開き、以下のコマンドを実行します。
npm install -g grunt-cli
このコマンドは、npmパッケージマネージャを使用してグローバルにgrunt-cliをインストールします。
grunt-cliのインストールが完了したら、以下のように使用することができます:
-
タスクランナーの設定ファイルの作成: プロジェクトのルートディレクトリに、
Gruntfile.js
という名前のファイルを作成します。このファイルには、Gruntのタスクや設定が記述されます。 -
必要なプラグインのインストール: Gruntはプラグインベースの仕組みを持っています。必要なタスクを実行するためのプラグインをインストールします。例えば、以下のコマンドを使用して、grunt-contrib-uglifyプラグインをインストールします。
npm install grunt-contrib-uglify --save-dev
--save-dev
オプションを使用すると、プロジェクトの開発依存関係にプラグインが追加されます。 -
タスクの作成と実行:
Gruntfile.js
内でタスクを定義し、実行します。例えば、JavaScriptファイルの圧縮を行うタスクを作成する場合、以下のようなコードをGruntfile.js
に記述します。module.exports = function(grunt) { grunt.initConfig({ uglify: { options: { mangle: true, compress: true }, my_target: { files: { 'dist/script.min.js': ['src/script.js'] } } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['uglify']); };
上記の例では、
uglify
タスクが定義されており、src/script.js
ファイルを圧縮してdist/script.min.js
に出力します。ターミナルで以下のコマンドを実行すると、このタスクが実行されます。grunt
これで、grunt-cliのインストール方法と使用法についての基本的な知識が身につきました。さらに詳細な情報や他のタスクの使用法については、公式のGruntドキュメント(https://gruntjs.com)を参照してください。