おそらく次の手順があります
新しいプロジェクトBejs
新しいファイルpackage.jsonを作成します
新しいファイルgruntfile.jsを作成します
コマンドラインでグラントタスクを実行します
1。新しいプロジェクトBejs
ソースコードはSRCの下に配置され、ディレクトリには2つのJSファイル、Selector.jsとajax.jsがあります。コンパイル後、コードはDESTに配置され、このグラントは自動的に生成されます。
2。新しい包装を作成します。JSON
package.jsonはルートディレクトリに配置され、プロジェクト名、説明、バージョン番号、依存関係パッケージなど、プロジェクトのメタ情報が含まれています。SVNまたはソースコードのようにGitに送信する必要があります。現在のプロジェクト構造は次のとおりです
Package.jsonコンテンツは、次のようにJSON構文の仕様に準拠する必要があります
コードコピーは次のとおりです。
{
「名前」:「bejs」、
「バージョン」:「0.1.0」、
「devdependicies」:{
「グラント」:「〜0.4.0」、
「grunt-contrib-jshint」: "〜0.1.1"、
「grunt-contrib-uglify」:「〜0.1.2」、
「grunt-contrib-concat」:「〜0.1.1」
}
}
Grunt in Devdependenciesは前の記事にインストールされていますが、Grunt-Contrib-Jshint/Grunt-Contrib-uglify/Grunt-Contrib-Concatはインストールされていません。 3つのタスクの3つ
grunt-contrib-js構文チェック
Uglifyjsを使用して、grunt-contrib-uglify圧縮
grunt-contrib-concatマージファイル
この時点で、コマンドラインツールを開き、プロジェクトルートディレクトリを入力し、次のコマンドを入力します。NPMインストール
ルートディレクトリをもう一度確認して、4つのサブディレクトリを含む追加のnode_modulesディレクトリがあることを発見しました。写真を参照してください
3.新しいファイルgruntfile.jsを作成します
gruntfile.jsもプロジェクトルートディレクトリに配置されます。このファイルでは、ほとんどすべてのタスクが定義されています。これは通常のJSファイルで、JSONの代わりにJSコードを記述できます。 package.jsonと同様に、ソースコードのようにSVNまたはgitに提出する必要があります。
gruntfile.jsは、次のコンテンツで構成されています
ラッパー関数には次の構造があります。これはnode.jsを書く典型的な方法です。エクスポートを使用してAPIを公開します
コードコピーは次のとおりです。
module.exports = function(grunt){
//ここではうなり声に関連したことをします
};
プロジェクトとタスクの構成
グラントプラグインとタスクをロードします
タスクの実行をカスタマイズします
この例では、次のタスクが完了します
SRC(ajax.js/selector.js)の下のファイルをdomop.jsにマージします
domop.jsをdomop.min.jsに圧縮します
両方のファイルがDest Directoryに配置されます
最終的なgruntfile.jsは次のとおりです
コードコピーは次のとおりです。
module.exports = function(grunt){
// 構成
grunt.initconfig({
PKG:grunt.file.readjson( 'package.json')、
concat:{
DOMOP:{
src:['src/ajax.js'、 'src/selector.js']、
Dest: 'Dest/domop.js'
}
}、
uglify:{
オプション:{
バナー: '/*! <%= pkg.name%> <%= grunt.template.today( "yyyy-mm-dd")%> *// n '
}、
建てる : {
src: 'dest/domop.js'、
dest: 'dest/domop.min.js'
}
}
});
//マージと圧縮のために、concatおよびuglifyプラグインをロードします
grunt.loadnpmtasks( 'grunt-contrib-concat');
grunt.loadnpmtasks( 'grunt-contrib-uglify');
//タスクを登録します
grunt.registertask( 'default'、['concat'、 'uglify']);
};
4。グラントタスクを実行します
コマンドラインを開き、プロジェクトルートディレクトリを入力し、グラントをクリックします
印刷情報から、成功したマージと圧縮が生成され、Dest Directoryと予想されるファイルが生成されることがわかります。現時点では、次のように、プロジェクトディレクトリにはより多くの運命があります
わかりました、ここに導入されていない2つの一般的なタスク、concatとuglify、jshintなどがあります。 gruntfile.jsのコードは1つずつ解釈されません。興味のある学生は、Gruntjsの公式文書でそれを見つけることができます。