GruntJS_javascript スキルを使用して複数の JavaScript ファイルをリンクおよび圧縮するプロセスの詳細な説明-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 17:26:57

オリジナル

1229 人が閲覧しました

私は円グラフ、折れ線グラフ、散布図、箱グラフ、ヒストグラムをサポートできるシンプルな 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: 操作結果

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