[解決済み] gruntのインストール方法とスクリプトのビルド方法

質問

こんにちは、Windows 7 64bitにGruntをインストールしようとしています。私は、コマンドを使用してGruntをインストールしました

 npm install -g grunt
 npm install -g grunt-cli

を実行しようとすると grunt init というエラーが表示されます。

有効なGruntファイルが見つかりませんでした。スタートアップを参照してください。 のガイドで、gruntの設定方法について詳しく説明しています。 http://gruntjs.com/getting-started 致命的なエラーです。を見つけることができません。 Gruntファイルです。

しかし、私のシステムでgruntフォルダの中を見ると Gruntfile.js このgruntを正しくインストールする方法と、gruntを使ってビルドしたスクリプトを書く方法を誰か教えてください。HTMLページとJavaスクリプトがありますが、Gruntを使ってスクリプトをビルドしたい場合、どのようにすればいいですか？

解決方法は？

GruntJSのビルドを設定する手順は以下のとおりです。

1. を設定したことを確認します。 package.json または新しいものを設定します。

   npm init
   
   

2. Grunt CLIをグローバルにインストールします。

   npm install -g grunt-cli
   
   

3. ローカルプロジェクトにGruntをインストールします。

   npm install grunt --save-dev
   
   

4. ビルドに必要なGruntモジュールをインストールします。このサンプルでは、ファイルを結合するためのConcatモジュールを追加します。

   npm install grunt-contrib-concat --save-dev
   
   

5. を設定する必要があります。 Gruntfile.js で、ビルドプロセスを記述します。このサンプルでは、2つのJSファイルを組み合わせています。 file1.js と file2.js の中に js フォルダを作成し app.js :

   module.exports = function(grunt) {
   
       // Project configuration.
       grunt.initConfig({
           concat: {
               "options": { "separator": ";" },
               "build": {
                   "src": ["js/file1.js", "js/file2.js"],
                   "dest": "js/app.js"
               }
           }
       });
   
       // Load required modules
       grunt.loadNpmTasks('grunt-contrib-concat');
   
       // Task definitions
       grunt.registerTask('default', ['concat']);
   };
   
   

6. これで、以下のコマンドでビルドを実行する準備が整いました。

   grunt
   
   

GruntJSのビルド方法について、ご理解いただけたでしょうか？

注意

を使用することができます。 grunt-init を作成するために Gruntfile.js もし、ステップ5で生のコーディングではなく、ウィザードによる作成を希望する場合。

そのためには、以下の手順を踏んでください。

npm install -g grunt-init
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
grunt-init gruntfile

Windowsをお使いの方へ。cmd.exeを使用している場合は、以下のように変更する必要があります。 ~/.grunt-init/gruntfile から %USERPROFILE%\.grunt-init\ . PowerShell は ~ を正しく表示します。