GuntJSで統合、JSファイルを圧縮する

10088 ワード

grunt

長い間忙しくしていましたが、自分のブログを更新するのが忙しくなくて、出力が足りなくて、とても恥ずかしいです.
私はGuntJSに接触したばかりの時に、NodeJSについてよく知っていたので、初めて使うのに時間がかかりました.この文章は友達の高速入門を助けたいです.
なぜあなたのJSファイルを統合して圧縮しますか?
始まる前に、この問題を再確認します.何かを直してくれる時にHTMLページでN個のJSを引用していますが、これを見たらこの人のJSの書き方がどれだけ悪いか分かります.HTMLにJSコードがいっぱい詰まっていると、私は突っ込みません.
一般的にHTMLドキュメントを読み込む時、ブラウザはHTMLコードに基づいて上から下まで読み込む必要があるCSS、JS、写真などのファイルを読み込んで、非同期で読み込むファイルを除外します.ファイルを読み込むごとに、ブラウザはWebserverにロード要求を送信します.serverはこの要求が問題ないと思ったら、ブラウザはファイルの受信を開始します.つまり、1つのファイルをロードするたびに、一定の時間がserverとclientの往復にかかります.
ファイルを読み込む時間は無視できます.問題は複雑なウェブページがNファイル以上にロードされる可能性があることを示しています.私たちがコントロールできる範囲で、少し時間をかけても少なくなります.ユーザーはしかしホームページのロードのスピードに対してとてもけちをつけます!
絵に対して、私達はよくいくつかのアイコンを一つの大きな画像にまとめてCSSのバックグランドで対応画像を取得して要求を下げます.CSSも通常は1つのメディアに対して1つのファイルだけを書いています.もちろんここでは悪いIEのCSSに対する制限に注意して、私のブログを参照してください.JSに対しては、地元のすべてのファイルを統合して圧縮するのが一般的です.もちろん、上記のようなrequireJSクラスのフレームを使用してロードされたものは除外します.
圧縮とは、すべてのスペース記号、凝視などをコードに影響しないように削除し、長い名前を短い名前に置き換えて文字を節約することです.JSが圧縮された後、頭部に追加の点を加えてファイルを注視することができるほか、すべてのJSコードが一行となり、非常に多くの変数名がaやaの文字となり、読み取り可能性が全く失われました.その後、自分のJSが300 KBから5 KBだけに縮小される可能性があります.このようにする唯一の目的はJSファイルを小さくして、ロードのスピードを速くすることです.
すべてはより良いperformanceのためです.いつか私達は下りネットの速度とserver上りネットの速度をGBレベルにアップグレードします.これを心配する必要がありますか?
GuntJSの設置と使用
GuntJSはNodeJSをベースにしたタスク管理ツールです.コンセプトは詳しくは説明しませんが、スペック以外は非常に使いやすいです.
GuntJSの設置方法は公式サイトで非常に具体的に紹介されています.SCSSを使うには、IEのcssに対するいくつかの制限に注意する必要がある。
まとめてみると、実はそのようなステップです.

からクリックしてホームページの教程を調べます>>まで、あなたのシステムに適したノードJSをダウンロードします.今のNodeJSはNPMパッケージ管理を持っていますので、他にNPMをインストールする必要はありません.

NPMでGrauntJSのCLIをインストールします.命令行でGuntJSの命令を実行します.

npm install -g grunt-cli

開発プロジェクトのルートフォルダに、package.jsonファイルを用意します.この書類の内容は後で詳しく説明します.

は、このルートフォルダにコマンドラインを指定し、

npm install

を実行します.
あなたのプロジェクトでGuntJSを実行するには、次のステップが必要です.

ファイルGuntfile.jsまたはGuntfile.co ffeeを準備します.書類の内容は後で詳しく説明します.

は、このルートフォルダにコマンドラインを指定し、

grunt

を実行します.
package.jsonの配置
このJSONファイルはNPMパッケージ管理用です.ここで私たちはGuntJS公式サイトからのサンプルを変更するだけで十分です.具体的な配置は公式サイトを参照してください.
GuntJS公式サイトの例:

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.3.3",
    "grunt-contrib-uglify": "~0.4.0"
  }
}

このサンプルには、このプロジェクトの名称、プロジェクトのバージョン番号、開発に使用するNPMパッケージが含まれています.npm installを実行するときは、このdevDependenciesの内容を読み取り、対応するパッケージをプロジェクトのルートフォルダのnode uにダウンロードします.modulesフォルダ内です.ダウンロードしたパケットのバージョン番号を指定することもできます.バージョン番号の書き方については、別の記号や書き方で、ある範囲のバージョン番号を指定します.NodeJS公式サイト
一般的には、https://www.npmjs.org/doc/files/package.json.htmlで使用するGrauntパケットを検索して選択し、直接に現在のバージョン番号を記入して、例えば、0.0.3で現在のバージョン番号を指定します.またはバージョン番号の前に「~」の記号をつけて、近いバージョン番号を選択します.最後の3の代わりにxを使って、0.3.xと書いて、0.3を選んでください.冒頭の最新版は、最後の数字の変更のため、一般的に開発者がバグを修正しました.配置や文法的な変化がありません.
ここで、私達はJSを合併して圧縮します.2-3つのNPMバッグを使う必要があります.それぞれ:

grunt

バージョン番号をクリックして文法を詳しく紹介します。は、ファイルのマージのために用いられる.

Githubは、JSの圧縮に用いられる.

名前の中間に「contrib」が付いているGuntJS公式プラグインです.
2-3個のカバンはgrunt-contrib-glifyも直接に複数のファイルを一つのファイルに統合することができますが、コードを変更します.ここで私はやっと二つのファイルを生成したいです.一つは全部のJSコードを無修正に結合してデバッグに使います.もう一つは圧縮したJSです.つまり全部のデバッグはプロジェクトを発表する時にやっと使うJSです.だから私はまたgrunt-contrib-concatを使いました.
また、デモサンプルで使用されているgrunt-contrib-jshintはJS文法エラーをチェックするためのプラグインです.ファイルを統合する時にエラーを確認してくれます.たまに卵が痛くなります.ここでは紙幅を減らすために、まず使わないでください.
上のデモンストレーションのサンプルを以下のように変更します.

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-concat": "0.5.x",
    "grunt-contrib-uglify": "0.5.x"
  }
}

Guntfile.jsの配置
一つの主要なGuntfileには以下のいくつかの部分が含まれています.


module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    //           
    taskname: { }
  });

  //         
  grunt.loadNpmTasks('grunt-taskname');
  //     
  grunt.registerTask('default', ['grunt-taskname']);

};

セグメントコードは一つの関数に含まれています.NodeJSの1つを利用して関数を公開しています.他のファイルで使用できる書き方です.
grunt.initConfigは、各プラグインの構成情報を受信するために使用される.各プラグインの設定オプションは、自分のGithubプロジェクトページで見つけられます.書き方はほぼ同じです.例えば:


grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    //     ，          
	concat: {
		//      ，      
      	dev: {
      		//        
	        options: {
	          banner: '/*!
 * <%= pkg.name %> - JS for Debug
 * @licence <%= pkg.name %> - v<%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>)
 * http://blog.csdn.net/jennieji | Licence: MIT
 */
'
	        },
	        //      
	        src: [
	          'js/app/**/*.js'
	        ],
	        //             
	        dest: 'js/app.debug.js'
      	}
    }
});

以上は「grunt-contrib-concat」の構成例である.
「concat」はこの構成に対応するプラグインを指定しました.「dev」は自分で定義したサブタスクです.「dev」と名づけました.一つのプラグインは様々な構成を持っています.つまり、「concat」の下に自由に複数の自分で定義したサブタスクを含めることができます.各サブタスクは異なる構成ができます.
ここでは「banner」パラメータを設定しましたが、このパラメータはファイル操作のためのプラグインの多くにあります.例えば、uglify、less、sassなどです.最後のターゲットファイルの先頭に情報やコードを追加する役割を果たしています.
この「banner」では、やっと生成したap.debug.jsにファイルを加えて凝視しています.中にはいくつかの特殊コードが使われています.
改行記号は、ファイルに書き込むと、前後の文字が支店に入ります.
<%=pkg.name%>
ASPの書き方と似ています.pkgはgrunt.file.readJSONで読み取られたJSONで、JSオブジェクトに変換されています.前のpackage.jsonのデモンストレーションの例によれば、このコードはファイルに書き込む際に「my-project-name」に置き換えられます.
実はここからgruntの構成において、JSオブジェクトとJSONを使って補助的な配置ができることが分かります.
<%=grunt.template.today(「yyy-mm-dd」)>>
これは、gruntを利用した方法で、タスクを実行することができる時間と、生成のフォーマットを指定します.
このconcatタスクを実行する時、私のap.debug.jsの頭は次のように凝視されます.


/*!
 * my-project-name - JS for Debug
 * @licence my-project-name - v0.1.0 (2014-07-07)
 * http://blog.csdn.net/jennieji | Licence: MIT
 */

ファイルパスの書き方では、いくつかのマッチした記号を使うことができます.ここでは一つの星番号「*.js」を使って任意の名前のJSファイルを表しています.二つの星番号「*」は現在のフォルダまたはサブフォルダの下を表しています.だから、ここでは「js/ap/」フォルダの下とそのすべてのサブフォルダの下のJSファイルはap.debug.jsファイルに結合されます.
設定が終わったら、プラグインをロードして登録してください.でないとエラーが発生します.
アドインとは、プラグインNPMパッケージの名前「grunt-contrib-concat」をgrunt.loadNpmTaskに送る方法です.
登録タスクは、grunt.register Taskで行われます.最初のパラメータは登録されたジョブキューの名前です.「default」と書くと、このGuntfileのデフォルトのタスクキューになります.2番目のパラメータは、このタスクキューが実行するジョブ名の配列です.ここのジョブ名はinitConfig配置時に使用される名前です.すなわち「concat」変更コードは以下のようになります.


//         
grunt.loadNpmTasks('grunt-contrib-concat');
//     
grunt.registerTask('default', ['concat']);

このように書くと、設定が終わったら直接に下記のコマンドを入力して、JSの統合を実行できます.

grunt

「default」を他の名前に変更する場合、例えば「debug」というように、コマンドラインは入力が必要です.

grunt debug

Uglify圧縮JSも同様の構成をしています.ここではソースファイルとターゲットファイルの配置が違っています.filesパラメータで「ターゲットファイルパス:[ソースファイルパス1,ソースファイルパス2,...]」という形式で書いています.また、concatが生成した統合ファイルを直接利用して圧縮しています.完全なGuntfile.jsは以下の通りです.


module.exports = function(grunt) {
	grunt.initConfig({
	    pkg: grunt.file.readJSON('package.json'),
		concat: {
	      	dev: {
		        options: {
		          banner: '/*!
 * <%= pkg.name %> - JS for Debug
 * @licence <%= pkg.name %> - v<%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>)
 * http://blog.csdn.net/jennieji | Licence: MIT
 */
'
		        },
		        src: [
		          'js/app/**/*.js'
		        ],
		        dest: 'js/app.debug.js'
	      	}
	    },
	    uglify: {
	    	prod:{
		    	options: {
		          	banner: '/*!
 * <%= pkg.name %> - compressed JS
 * @licence <%= pkg.name %> - v<%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>)
 * http://blog.csdn.net/jennieji | Licence: MIT
 */
'
			        },
			        files: {
			        	'js/app.min.js': ［'<%= concat.dev.dest %>'］
			        }
			    }
			}
		}
	});

	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-uglify');

	grunt.registerTask('default', ['concat'，'uglify']);
};

最後に
これは一番基本的な使い方です.ブートストラップとアングラーの配置ファイルは全部超複雑です.
コードを変更するたびにコマンドラインでgruntを実行したくない場合は、watchプラグインを使用することを推奨します.ファイルの修正を自分から検知し、対応するタスクを実行します.
また、LessをCSSにコンパイルして「grunt-contrib-less」があります.
SASSコンパイルはCSSで「grunt-contrib-comppass」がありますので、compss-styleのmixinを引用することができます.
また、「grunt-conritb-requirejs」はrequireJSで書かれたJSファイルに対して圧縮します.

npm運転に失敗して、暇な人がyarnを使って他人の家を捕まえて子供を探しに行きました.