GruntJS を使用した Web プログラムの構築_JavaScript スキル

手順は大まかに以下のとおりです

新しいプロジェクト Bejs
新しいファイル package.json
新しいファイル Gruntfile.js
コマンド ラインから grunt タスクを実行します

1. 新プロジェクト Bejs

ソース コードは src の下に配置されます。このディレクトリには、selector.js と ajax.js という 2 つの js ファイルがあります。コンパイルされたコードは dest に配置され、grunt によって自動的に生成されます。

2. 新しい package.json を作成します

package.json はルート ディレクトリに配置され、プロジェクト名、説明、バージョン番号、依存パッケージなどのプロジェクトのメタ情報が含まれます。ソースコードと同様に svn または git に commit する必要があります。 現在のプロジェクト構成は以下の通りです

package.json のコンテンツは、次のような JSON 構文仕様に準拠する必要があります

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

{
"name": " Bejs",
"version": "0.1.0",
"devDependency": {
"grunt": "~0.4.0",
"grunt-contrib-jshint": " ~0.1.1",
"grunt-contrib-uglify": "~0.1.2",
"grunt-contrib-concat": "~0.1.1"
}
}

前の記事で devDependency の Grunt がインストールされましたが、grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat はインストールされていません。 3 つのタスクにそれぞれ 3 つ

grunt-contrib-jshint js 構文チェック
UglifyJS を使用した grunt-contrib-uglify 圧縮
grunt-contrib-concat マージ ファイル

この時点で、コマンド ライン ツールを開いてプロジェクトのルート ディレクトリに入り、次のコマンドを入力します: npm install

ルート ディレクトリを再度確認すると、図

に示すように、4 つのサブディレクトリを含む追加の node_modules ディレクトリがあることがわかりました。

3. 新しいファイル Gruntfile.js を作成します

Gruntfile.js もプロジェクトのルート ディレクトリに配置されます。これは通常の js ファイルであり、JSON だけでなく任意の js コードを書き込むことができます。 package.jsonと同様に、ソースコードと同様にsvnまたはgitに送信する必要があります。

Gruntfile.js は次のコンテンツで構成されます

ラッパー関数は次のような構造になっています。これは、Node.js の一般的な記述方法です。

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

module.exports = function(grunt) {
// ここで Grunt 関連のことを行います
};

プロジェクトとタスクの構成
grunt プラグインとタスクをロードする
実行タスクをカスタマイズする

この例では次のタスクを実行します

src (ajax.js/selector.js) 下のファイルを domop.js にマージします
domop.js を domop.min.js に圧縮します
両方のファイルは dest ディレクトリに配置されます

最終的な 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'
}
"）％> '
}
}
}）;
// concatおよびuglifyプラグインをそれぞれロードします。 ');
grunt.loadNpmTasks ('grunt-contrib-uglify');
// タスクを登録します
grunt.registerTask('default', ['concat', 'uglify']);
};



4. grunt タスクを実行します

コマンドラインを開き、プロジェクトのルートディレクトリを入力し、「grunt」と入力します

出力された情報から、dest ディレクトリと期待したファイルが正常にマージおよび圧縮され、dest ディレクトリと期待したファイルが生成されたことがわかります。この時点で、プロジェクト ディレクトリには次のように dest があります。 🎜>

OK、ここに 2 つの一般的なタスクがあります: concat と uglify、jshint などは紹介されていません。 Gruntfile.js のコードは 1 つずつ解釈されているわけではありません。興味のある学生は、gruntjs の公式ドキュメントを参照してください。