次の手順があります。
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マージと圧縮が完了します。