次の手順があります。
1.新しいプロジェクトBejsを作成します
2。新しいファイルpackage.jsonを作成します
3.新しいファイルgruntfile.jsを作成します
4。コマンドラインでグラントタスクを実行します
1。新しいプロジェクトBejs
ソースコードはSRCの下に配置され、ディレクトリには2つのサブディレクトリアセットとJSがあります。 JSはSelector.jsとajax.jsを分散化します。これは、前の記事でそれらをマージして圧縮する方法について説明しました。この記事は、いくつかの写真とCSSファイルを含むAsset Directoryにのみ焦点を当てています。しばらくすると、2つのCSSリソースをリセットしてください。CSSとstyle.cssはマージされ、Dest/Assetディレクトリに圧縮されます。マージバージョンall.css、圧縮バージョンAll-min.css。
2。新しい包装を作成します。JSON
package.jsonはルートディレクトリに配置されており、その意味は前の記事で紹介されています。現在のプロジェクト構造は次のとおりです
Package.jsonコンテンツは、次のようにJSON構文の仕様に準拠する必要があります
コードコピーは次のとおりです。
{
「名前」：「bejs」、
「バージョン」：「0.1.0」、
「devdependicies」：{
「グラント」：「〜0.4.0」、
「Grunt-Contrib-Concat」：「〜0.1.1」、
「grunt-css」： "> 0.0.0"
}
}
Grunt-Contrib-Concatの以前の記事が紹介されました。 Grunt-CSSは、この記事で使用されるプラグインです。
この時点で、コマンドラインツールを開き、プロジェクトルートディレクトリを入力し、次のコマンドを入力します。NPMインストール
ルートディレクトリを確認すると、4つのサブディレクトリを含む追加のnode_modulesディレクトリがあることがわかりました。
3.新しいファイルgruntfile.jsを作成します
gruntfile.jsもプロジェクトルートディレクトリに配置されます。このファイルでは、ほとんどすべてのタスクが定義されています。これは通常のJSファイルで、JSONの代わりにJSコードを記述できます。 package.jsonと同様に、ソースコードのようにSVNまたはgitに提出する必要があります。
ソースコードは次のとおりです
コードコピーは次のとおりです。
module.exports = function（grunt）{
// 構成
grunt.initconfig（{
PKG：grunt.file.readjson（ 'package.json'）、
concat：{
CSS：{
src：['src/asset/*。css']、
Dest： 'Dest/Asset/All.css'
}
}、
cssmin：{
CSS：{
SRC： 'Dest/Asset/All.css'、
Dest： 'Dest/Asset/All-min.css'
}
}
}）;
//マージと圧縮のために、concatとcssプラグインをそれぞれロードします
grunt.loadnpmtasks（ 'grunt-contrib-concat'）;
grunt.lownpmtasks（ 'grunt-css'）;
//デフォルトタスク
grunt.registertask（ 'default'、['concat'、 'cssmin']）;
};
4。グラントタスクを実行します
コマンドラインを開き、プロジェクトルートディレクトリを入力し、グラントをクリックします
印刷情報から、成功したマージと圧縮が生成され、Dest Directoryと予想されるファイルが生成されることがわかります。現時点では、次のように、プロジェクトディレクトリにはより多くの運命があります
この時点で、CSSマージと圧縮が完了します。