gruntはnode.jsに基づいており、JSで開発されています。これにより、node.jsを使用して、ファイル操作などなどのクロスシステムとクロスプラットフォームのデスクトップ操作を実現できます。さらに、Gruntとそのプラグインはすべて、NPMインストールを使用して管理できるパッケージとして使用されます。
したがって、NPMによって生成されたPackage.jsonプロジェクトファイルは、現在のプロジェクトで使用されているGruntプラグインを記録でき、GruntはGruntfile.jsファイルを呼び出し、タスク(タスク)を解析し、対応する操作を実行します。
grunt-cliをインストールします
実際、Gruntのコマンドラインインターフェイス(CLI)がインストールされているGrunt-Cliをインストールすることです。その後、Gruntコマンドはコマンドプロンプトで認識されます。 Grunt-Cliのインストールは、Gruntのインストールとは呼ばれません。これは、グラント自体がグローバルに使用されていないためです。 Gruntを使用する場合は、特定の作業ディレクトリにGruntを1回インストールする必要があります。これは、異なるワーキングディレクトリがグラントを介して異なる自動化作業を必要とするため、独立して構成する必要があるためでもあります。
npmインストール-g grunt -cli
- 新しくインストールされたものがPackage.jsonファイルに追加されることを示します。
package.jsonファイルを生成します
NPMには、作業ディレクトリの要件があります。この要件は次のとおりです。ルートディレクトリの場所にpackage.jsonがあります。
書類。このファイルは、作業ディレクトリに対応するプロジェクト情報(名前、説明)と、パッケージの依存関係(つまり、NPMモジュール)を定義します。
次のコマンドを実行して初期化します
npm init
現在の作業ディレクトリにグラントと必要なプラグインをインストールする
方法1
以前にグローバルディレクトリにGruntをインストールしましたが、現在のプロジェクトパスに紹介する必要があります。同時に、必要なプラグインにはこれらが含まれる場合があります。
ファイルのマージ:grunt-contrib-concat
構文チェック:grunt-contrib-jshint
コンパイルされたSCSS:Grunt-Contrib-Sass
圧縮ファイル:Grunt-Contrib-uglify
ファイルの変更を聞いてください:Grunt-Contrib-Watch
ローカルサーバーの作成:Grunt-Contrib-Connect
それらをインストールできる方法は次のとおりです。
npmインストール - save-dev gruntnpmインストール-save-devプラグイン1プラグイン2プラグイン3
現時点では、package.jsonフォルダーに追加のコードがあります。
「devdependencies」:{"grunt": "0.4.1"}、方法2-パッケージを手動で変更します
「devdependencies」:{"grunt": "〜0.4.1"、 "Grunt-contrib-cssmin": "〜0.7.0"}このフィールドをPackage.jsonファイルに手動で追加し、依存する必要があるパッケージを追加します。最新バージョンのみをインストールする必要がある場合は、 *に変更してからNPMインストールを実行できます。フォルダーにnode_modulesフォルダーがあり、必要なプラグインを保存していることがわかります。
構成
一般的に、テンプレートを構成ファイルとして直接使用します。
module.exports = function(grunt){"strict"; grunt.initconfig({//プラグイン構成領域}); //プラグインタスクをロードして、Grunt.Loadnpmtasks( 'Grunt-Contrib-uglify')を使用する人を追加します。 grunt.loadnpmtasks( 'grunt-contrib-cssmin'); grunt.loadnpmtasks( 'grunt-contrib-imagemin'); // task grunt.registertask( 'default'、['cssmin'、 'imagemin'、 'uglify']);};grunt.loadnpmtasks()は、ロードプラグインタスクです。実際、どのプラグインの機能を使用する場合は、このコードを使用して、このパートにプラグインタスクを追加してください。
grunt.registertask()は登録されたタスクであり、デフォルトではデフォルトがあります。デフォルトは、最後に使用する場合、ディレクトリのコマンドプロンプトにグラントを直接入力して、デフォルトタスクの実行に相当する登録タスクを実行できることを意味します。
カスタムタスクを使用します
より多くのタスクコマンドを登録でき、他の名前を使用できます。例えば
grunt.registertask( 'custom'、['cssmin'、 'imagemin']);
それを使用するとき、入力してください:
gruntカスタム