Grunt.js_Basics を使用してプロジェクトを管理するためのアプリケーション手順

Grunt.js とは何ですか?
Grunt.js は、NodeJS に基づいた Javascript Task Runner (JavaScript タスク ランナー) であり、構築、テスト、およびドキュメント生成のプロジェクト管理ツールを自動化するために使用できます。

Grunt.js は単なるビルド ツールではなく、各サブタスクの自動実行を管理する単なるタスク ランナーでもあります。

なぜ Grunt.js を使用するのですか?
簡単に言えば、自動化のためです。
フロントエンド プロジェクトの場合、例:

•モジュール間の役割分担を明確にするために、JavaScript コードを非常に小さな js ファイルに分割することがありますが、最後のページでは、js ファイルが多すぎると生成される Http リクエストが多すぎることがわかります。ページの最適化に役立ちます。したがって、これらの js ファイルをマージできるツールが必要になるかもしれません。
•クライアントが要求するファイルをできるだけ小さくするために、HTML、JavaScript、その他のファイルを圧縮できることを希望します。
•ソースコードに対して単体テストと回帰テストを行う必要がある場合があります。
•マニュアルでドキュメントを書く必要をなくすために、ソースコードのコメントを通じてドキュメントを自動的に生成できるツールが欲しいかもしれません。
•......
もちろん、これらすべてを行うのに役立つさまざまなガジェットがありますが、コマンドを入力するか、プログラムを開くか、毎回ファイルを保存するのが最善であると考えています。が変更されます。その後、これをすべて自動的に実行します。

以前は NodeJS を使用して自分でビルド プログラムを作成していたかも知れませんが、今では Grunt.js が必要なものをすべて提供できるようになりました。

Grunt.js をインストールする
Grunt.js 0.4 以降は、Grunt.js 全体をグローバルにインストールするのではなく、Grunt.js クライアントをグローバルにインストールしてから、現在のプロジェクト Grunt にインストールします。異なるバージョンの Grunt 上の異なるプロジェクト間の将来の依存関係を回避するため。

以前のバージョンがインストールされている場合は、npm コマンドを使用して元の Grunt.js を削除できます。

npm uninstall -g grunt
次に、Grunt.js クライアントをインストールします。

npm install -g grunt-cli

package.json
package.json は、プロジェクトの依存関係情報、作成者、バージョン、その他の情報が含まれるプロジェクト構成ファイルです。まずは簡単な package.json を書いてみましょう。

コードをコピー コードは次のとおりです:

{
"name": " my-project ",
"version": "0.1.0",
"devDependency": {
"grunt": "~0.4.1"
}
}

name 属性。アイテムの名前を示します。

version 属性はプロジェクトのバージョン番号です。

devDependency 属性にはプロジェクトの依存関係が含まれています。現在、依存関係は grunt のみであり、バージョンは 0.4.1 です。
package.json が含まれている可能性があるターミナル ディレクトリで、次のコマンドを入力します。

npm install
ディレクトリ内に追加の node_modules フォルダーがあり、その中に grunt フォルダーがあることがわかります。これがプロジェクトにインストールした Grunt.js です。

Grunt.js を使用して js コードを圧縮する
grunt-contrib-uglify は Grunt.js のタスク モジュールで、js 圧縮タスクを実行するための有名な js 圧縮ツール uglify に基づいています。

まず、プロジェクトの依存関係に grunt-contrib-uglify を追加します。package.json は次のとおりです。

コードをコピーします コードは次のとおりです:

{
"name": "my-project",
"version": "0.1.0",
"devDependency": {
"grunt" : "~0.4.1",
"grunt-contrib-uglify": "~0.2.0"
}
}

再利用:

npm install
grunt-contrib-uglify をインストールしました。

Gruntfile.js を作成します

コードをコピーします コードは次のとおりです:

module.exports = function(grunt) {

// Add some settings to grunt
grunt.initConfig({
uglify: {
          options: {
                                                                                                        )      🎜>}, Build: {
src: 'src/core.js', // The source file to be compressed, we can also use*to represent the pass, such as 'src/*. Js'                                                                                                                                 
// Load "uglify" plug-in tasks
grunt.loadNpmTasks('grunt-contrib-uglify');

// Define the tasks that need to be executed by default
grunt.registerTask('default', ['uglify']);

};

The Gruntfile.js file is used to define tasks, the execution order of task groups, etc. In the above file, we define that the src/core.js file will be compressed and output into dst/core.js. Then we enter the command:

grunt

will automatically complete this task.