Clever Geek Handbook

人生を楽にするGruntJS（初心者向け）

GruntJSとは



ほとんどのJS開発者は、この用語を知らない、または使用していない場合でも、既に何らかの開発ツールを開発に使用しています。 開発中にファイルを結合したり、JavaScriptコードを減らしてページの読み込みを高速化し、Sassを変換したり、ブラウザー用のCSSのファイル数を減らしたりします。 ほとんどの場合、これらは異なるツールであり、あまり便利ではありません。



Gruntは、これらすべてのステップを1か所で管理し、サードパーティのコンポーネントを整理するのに役立ちます。



そして、なぜこの幸福が必要なのでしょうか？



既存のツールはすべて、プログラミングのさまざまな分野で独自の基盤を備えていました。 主にJS開発者向けに構築されていないため、長所と短所がありました。 他の言語の知識を必要とするものや、最初に学習する必要のある個別のXML方言を使用するものもありますが、それらは構成が容易ではありません。

それでは、JS開発者が日常的に使用する言語で書かれた、このために特別に設計されたツールを用意してみませんか？ Gruntは完全にJavaScriptで記述されており、Node.jsで実行され、さまざまなプラットフォームで使用できます。



nodejsを配置したいと考えています。難しくありません。 この点については、Windowsユーザー向けです。コマンドラインを最大限に使用してnodejsとそのパッケージを制御するには、 https: //code.google.com/p/msysgit/を配置することをお勧めします。



Gruntはまだ若いですが、最近リリースされたバージョン0.4でいくつかの重要な変更を既に受けています。 現在では、小さなコマンドラインクライアントのみで構成され、メインタスクが表示されます。 すべての追加機能はプラグインに基づいているため、特別なニーズに合わせてカスタマイズすることができます。 Gruntとすべてのプラグインがプロジェクトディレクトリに追加され、プロジェクトの構築と保守に必要なすべてのものが常に所定の場所に残るようになります。 これらのモジュールはプロジェクトとともにロードするか、開発プラットフォームが異なる場合は、ファイルで使用されるすべてのモジュール、ファイルのグラウンドを保存することをお勧めします（詳細は後ほど）。



Gruntはまだかなり早い段階ですが、（ほとんど）すべての開発ニーズに対応する多くのプラグインが既にあります。



JavaScriptおよびCSSの削減、CSSおよびSass / Compass、Less and Stylus、CoffeeScriptまたはLiveScript Sass / CompassなどのJavaScriptプリプロセッサーの統合、PNGおよびJPEG画像ファイルサイズの最適化、画像の自動埋め込みなど。



大規模なWebアプリケーションの作成を計画している場合、GruntはRequire.jsとGoogle Closure Compilerの最適化も統合し、Handlebar、Jade、Underscore、Mustache、EcoまたはHoganテンプレートをプリコンパイルできます。 Jasmine、Mocha、QUnit、Cucumberなどの最も一般的なテストフレームワーク用のプラグインが既にあります。

使用可能なすべてのプラグインには、Grunt Webサイトにリンクがあります（キーワード「gruntplugin」で新しいNode.jsモジュールを公開すると、自動的にリストに追加されます）。

ご覧のとおり、Gruntは独自のプロジェクトの作成を支援するだけでなく、外部ツールの中心的な調整ノードとしても機能します。



作業のインストールと準備



さて、Gruntとは何かという第一印象が得られたので、始めましょう。 まず、Node.jsがコンピューターにインストールされていることを確認してください。 さまざまなプラットフォームで使用可能なインストーラーがあり、すぐに使用を開始できます。 ターミナルを開いて入力します 
npm install grunt-cli -g
gruntコマンドラインツールをインストールします。



Gruntの古いバージョンには、事前定義されたコアタスクのセットが付属していました。 柔軟性とカスタマイズ性を高めるために、これらは最近の0.4リリースで削除され、個別のタスクプラグインとしてインストールできるため、作業を簡単に開始できます。



まず、package.jsonというファイルをプロジェクトのルートフォルダーに作成します。 Node.jsに精通している場合は、すでにこのファイルに精通している可能性があります。プロジェクトの最も基本的なものから始めます。 



 { "author" : "authorName", "name" : "FrontEnd-Project", "version" : "0.0.1", "devDependencies" : { "grunt" : ">= 0.4", "grunt-cli" : ">= 0.1.6", "grunt-contrib-watch" : "~0.3.1", "grunt-contrib-cssmin" : ">=0.5.0", "grunt-contrib-uglify" : ">=0.2.0", "grunt-contrib-concat" : ">=0.1.3" } }


（package.jsonはnodejsの設定ファイルです。ファイルをプロジェクトフォルダーのルートに配置し、コンソールを開いてフォルダーに移動し、npm installを実行すると、ファイルに記述されているすべてのパッケージと依存関係がプロジェクトフォルダーにインストールされます。詳細http：//パッケージ.json.nodejitsu.com / ）。



Gruntを起動する


Gruntとプロジェクトに必要なすべての依存関係をインストールしたら、Grunt自体の構成から始めましょう。 したがって、Gruntfile.jsというファイルを、以前に作成したpackage.jsonファイルの隣のプロジェクトのルートに追加します。 これは、Grunt構成のメインファイルであり、ダウンロード可能なタスクのリストとその作業の説明が含まれています。



メインの構成ファイルは次のようになります。 



 //    nodejs module.exports = function(grunt) { //   GruntJS grunt.initConfig({ //   GruntJS,        npm,     package.json   npm install //   javascript    jshint jshint: {}, //  concat: {} //   }); // ,    grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-concat'); //           grunt,   Enter grunt.registerTask('default', ['jshint', 'concat']); };


したがって、必要な構成はすべてJavaScriptで記述されていることがわかります。 基本的に、Gruntを使用するには3つの異なる方法が必要です。 



 grunt.initConfig grunt.loadNpmTasks grunt.registerTask


各タスクは、コマンドラインパラメーターとしてその名前を渡して、コマンドラインから個別に呼び出すことができます。たとえば、grunt jshintは、プロジェクトの標準を満たすためにプログラミングスタイルを制御することのみを目的としたタスクを実行します。 grunt.registerTaskを使用して、Gruntがパラメーターなしで呼び出されたときに実行するデフォルトのタスクを定義します。 リストされたタスクを指定された順序で実行します（この場合はjshint、concat、uglify）。



各プラグインは、会話の個別のトピックであると説明します。 よく使用されるのはhttps://github.com/gruntjs/grunt-contribです。 よく使用されるGruntJSプラグインの完全な説明と最新バージョンを見つけることができます。



さて、ついに！



Gruntの使用を開始するには、次の手順を実行します。

  1. nodejsをインストールする必要があります。システムのインストーラーはhttp://nodejs.org/にあります。
  2. ウィンドウがある場合は、便宜上https://code.google.com/p/msysgit/をインストールすることをお勧めします 。
  3. プロジェクトのフォルダーにpackage.jsonとGrunfile.jsの2つのファイルを作成し、上記で説明したように構成します。
  4. プロジェクト用のフォルダーを作成するか、コンソールを使用して既存のフォルダーに移動し、npm installコマンドを実行してGruntおよび必要なすべてのパッケージ（package.jsonで前述）をインストールします。
  5. Gruntを起動するには、コンソールでgruntコマンドを実行します。




Gruntを使用すると、JS開発者は反復タスクの自動化に役立つ非常に柔軟なツールを手に入れることができます。 セットアップが完了すると、タイムドタスクをセットアップしたり、バックグラウンドでこの魔法を実行したり、Gruntを外部開発チームとしてIDEまたはコーディングエディターに統合したりできます（Sublime Textなどでうまく機能します）。



検証およびテストコードは全体的な品質を向上させ、一貫したコーディング標準を維持するのに役立ちます。これにより、Gruntは大規模プロジェクトで作業するチームにとって理想的なツールになります。



公式ウェブサイトhttp://gruntjs.com/



ご清聴ありがとうございました、すぐに会いましょう。


More articles:


All Articles