web-dev-qa-db-ja.com

gruntのインストール方法とそれを使ったスクリプトの作成方法

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

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

しかし、今、grunt initを実行しようとすると、エラーがスローされます-

有効なGruntfileが見つかりませんでした。 gruntの設定方法の詳細については、スタートガイドを参照してください。 http://gruntjs.com/getting-started 致命的なエラー：Gruntfileが見つかりません。

しかし、システムのgruntフォルダーの中を見ると、Gruntfile.jsがあります。誰かがこのうなり声を適切にインストールする方法と、うなり声を使用してビルドされたスクリプトを書く方法を教えてください。 Gruntを使用してスクリプトを作成する場合、1つのHTMLページとJavaスクリプトがあります。

npmgruntjsnpm-install
76
Sau

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ビルドの操作方法がわかると思います。

注意：

ステップ5の生のコーディングの代わりにウィザードベースの作成が必要な場合は、grunt-initを使用してGruntfile.jsを使用できます。

これを行うには、次の手順に従ってください。

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は~を正しく認識します。

209
Qorbani

しばらくの間、WINDOWSのPATH変数を設定する必要があります

％USERPROFILE％\ AppData\Roaming\npm

where gruntを使用したテストの後

注：コマンドプロンプトウィンドウを閉じて、再度開くことを忘れないでください。

6
Partha Sarathi Ghosh

同じ問題が発生しましたが、Grunt.jsをGruntfile.jsに変更することで解決しました。Windowscmdでgrunt.cmdを入力する前にファイル名を確認してください（Windowsを使用している場合）。

5
andromada

Grunt-cliをプロジェクトのdevDependenciesにインストールし、package.jsonのスクリプトを介して実行する必要があります。このように、プロジェクトで作業する他の開発者はすべて同じバージョンのgruntを使用し、セットアップの一部としてグローバルにインストールする必要もありません。

npm i -D grunt-cliでグローバルにインストールする代わりに、-gでgrunt-cliをインストールします。

//package.json

...

"scripts": {
  "build": "grunt"
}

次に、npm run buildを使用して、うなり声を発します。

0
itwasmattgregg