Grunt know_html/css_WEB-ITnose

基本的なワークフロー:

JS マージ、JS 圧縮、CSS 圧縮、CSS スプライト、画像の最適化、テスト、静的リソース キャッシュ (バージョン更新)...

ワークフローに基づいて生成されたツール:

JSHint ( jshint. com)、CSSLint (csslint.net)、jade (jade.tilab.com)、coffeeScript (coffee-script.org/)、requireJs/seaJs、compass/less/sass...

Grunt はさまざまな組み合わせを解決するためのものですシステム ワークフロー ソリューションを形成するツールの一覧

インストール

nodeJs --> npm --> package.json --> プラグイン Grunt 関連のプラグインをインストールします。 js

nodeJs: homeBrew を使用してインストールすることも、公式 Web サイト (npm を含む) から brew install ノードをインストールすることもできます

grunt: npm install -g grunt-cli (アンインストール: npm uninstall grunt)

パッケージ。 json: nodeJs パッケージ管理 (grunt プラグインのインストール管理など) に使用されます。 npm init は、プロジェクト名、バージョン番号、git 情報、作成者、およびその他の情報の入力を開始します

grunt 関連のプラグインをインストールします: ファイルをマージします (grunt -contrib-contact)、構文チェック (grunt-contrib-jshint)、Sass コンパイル (grunt-contrib-sass)、js ファイルの圧縮 (grunt-contrib-uglify)、ファイル変更の監視 (grunt-contrib-watch)、ローカルサーバー (grunt-contrib-connect)

grunt をプロジェクトにインストールするコマンド: npm install grunt --save-dev (npm install grunt は現在のプロジェクトにインストールすることを意味し、--save-dev は grunt のインストールを意味します) 情報がパッケージに追加されますpackage.json: {"grunt" : "^1.0 .0"} で "devDenpendency" として表示される .json は、現在のプロジェクトが grunt バージョン 1.0.0 に依存していることを示します)

grunt 関連のプラグインをインストールするnpm install --save-dev grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect は、関連するプラグインをプロジェクトに追加することを意味します。は 1 つのタスクに対応します

Configuration

Gruntfile.js: Gruntfile.js を設定し、タスクを書き込みます

Task: Mulit Tasks( grunt.initConfig({ key: value}) ) および Baisc Tasks

Gruntfile.js 構文を設定します:すべてのコードは module.exports = function (grunt) { ... }; でラップされています。内部のコードは主にタスク設定 (Baisc タスクなど不要な場合もあります)、プラグインの読み込み、タスクの登録に分かれています。実装: grunt にタスクを登録し、タスク設定に従ってロードされたプラグインを呼び出し、対応する操作を実行します

マルチタスク: いわゆるターゲットがあり、各マルチタスクにはタスクが必要です。例: grunt.initConfig。 ({concat: {foo : { ... }, bar : { ... }}, uglify : {bar : {}}}) concat タスクには foo と bar という 2 つのターゲットがありますが、uglify には 1 つのターゲットしかありません。ターゲット名は変更できます（ただし、タスクの名前は固定されています（たとえば、 concat は関連するプラグインに対応します）。grunt concat:foo または grunt concat:bar を実行すると、foo またはで指定された concat タスクが実行されます。 grunt concat の実行のみが concat のターゲットを走査し、順番に実行します。

Baisc タスク: grunt.register("foo", function (arg1) のようにタスクを直接登録します。 , arg2) { ... }) run grunt foo または grunt foo:a:b a および b foo に渡されるパラメータですか

タスク設定: プラグインを呼び出して、実行するタスクと実装する関数を設定します

Baisc タスク: タスク設定は必要ありません

プラグインのロード: 必要なプラグインをロードします grunt.loadNpmTasks()

タスク登録: 前のタスク設定コード grunt.registerTasks() を含むタスクを登録します