GruntJS_javascript スキルを使用して複数の JavaScript ファイルをリンクおよび圧縮するプロセスの詳細な説明

私は円グラフ、折れ線グラフ、散布図、箱グラフ、ヒストグラムをサポートできるシンプルな HTML5 Canvas グラフ ライブラリを作成しました。また、マウス プロンプト、描画プロセスのアニメーション効果などもサポートしています。最後に、これらの複数の JS ファイルを 1 つの JS ファイルに変換して公開したいので、私の質問は、これらの JS ファイルを 1 つに変換する方法です。グループの友人が、GruntJS – JavaScript マルチファイルのコンパイル、スタイル チェックを教えてくれました。 、アーティファクトをリンクして圧縮します。 Google で何度も検索した結果、このタスクを完了することができました。そのプロセスを共有したいと思います。

1: GruntJS とは
英語に翻訳したくない場合は、Web サイトを自分で読んでください ->http://gruntjs.com/
2: インストールと操作
その公式チュートリアルには、「あまり明確ではなく、初めて見る人にとっては少し混乱する」と書かれています。要約すると、GruntJS
はサーバーの node.js に基づいており、それに依存しています。したがって、最初のステップは、node.js をダウンロードしてインストールすることです。ダウンロード アドレス:
http://nodejs.org/download/

2 番目のステップ: grunt コマンド ライン ツールを実行してインストールします – 目的grunt コマンド
は、Windows コマンド ライン ウィンドウでのみ実行できます: npm install -g grunt-cli。より具体的な説明については、こちらを参照してください: http://gruntjs.com/getting-started

ステップ 3: プロジェクトのルート ディレクトリに 2 つのファイル project.json と Gruntfile.js を作成します
grunt のせいで、タスクの実行はこれら 2 つのファイルに依存しています。
project.json ファイルの作成方法はコマンド ラインで実行できます: nmp init project.json を作成しました
内容は次のとおりです:

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

{
"name": "fishchart",
"version": "0.0.1 ",
"description": " html5 キャンバス チャート ライブラリ",
"author": "zhigang",
"license": "BSD",
"devDependency": {
" grunt": "~0.4.1"、
"grunt-contrib-uglify": "~0.2.2"、
"grunt-contrib-jshint": "~0.6.2"、
" grunt-contrib-concat": "~0.3 .0"
}
}

コマンドを使用して作成する場合、何を書けばよいかわからない場合は、Enter キーを押してください。スキップすること。

3: Grunt プラグインをインストールして使用し、JavaScript ファイルのリンクと圧縮を完了します
1. JavaScript ファイル リンク プラグインのサポートをインストールします
npm install grunt-contrib-concat --save-dev
2. JavaScript ファイル圧縮プラグイン サポートをインストールします
npm install grunt-contrib-uglify --save-dev
3. Gruntfile.js ファイルでオプションを構成し、タスクをロードして定義します

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

module.exports = function(grunt) {
grunt .initConfig({
/ /JSHint オプション
jshint: {
all: ['main.js'] //lint するファイル
},
// concat オプション
concat: {
options : {
separator: ';' //スクリプトを区切ります
},
dist: {
src: ['js/*.js', 'js/ **/*.js'] , //連結するスクリプトの Grunt ミニ一致
dest: 'js/fishchart_v0.0.1.js' // スクリプトの出力先
}
},
//uglify オプション
uglify: {
js: {
files: {
'js/fishchart_v0.0.1.js': ['js/fishchart_v0.0.1.js'] / /新しく作成したスクリプトを保存します
}
}
}
})
// タスクをロードします
grunt.loadNpmTasks('grunt-contrib-jshint'); 🎜>grunt.loadNpmTasks('grunt -contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 実行するデフォルトのタスク
// grunt.registerTask('デフォルト', ['jshint', 'concat', 'uglify']);
grunt.registerTask('開発', ['jshint']); ', 'concat', 'uglify ']);
}


4: 操作結果

最後に、これに賛成したいと思います。ものはとても便利です！