GruntJS を使用して Web プログラムを構築し、it_node.js をマージして圧縮する

手順は次のとおりです:

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

1. 新しいプロジェクト Bejs を作成します

ソース コードは src の下に配置され、asset と js の 2 つのサブディレクトリがあります。 js は selector.js と ajax.js を分散化します。前の記事で、それらをマージして圧縮する方法について説明しました。この記事では、いくつかの画像と CSS ファイルが含まれるアセット ディレクトリのみに焦点を当てます。しばらくすると、reset.css と style.css の 2 つの CSS リソースがマージされ、dest/asset ディレクトリに圧縮されます。マージされたバージョン all.css と圧縮バージョン all-min.css。

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

package.jsonをルートディレクトリに置きます。その意味は前の記事で紹介しました。 現在のプロジェクト構成は以下の通りです

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

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

ルート ディレクトリを見ると、図

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

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

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

ソースコードは次のとおりです

module.exports = function(grunt ) {

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

この時点で、CSS のマージと圧縮が完了します。