フロントエンドjsとcssの圧縮とマージnodejs_html/css_WEB-ITnose

出典: http://www.cnblogs.com/starweb/archive/2013/01/24/2874838.html

1. nodejs をインストールします

http://nodejs.org/

2.それぞれのノードパッケージ

js には UglifyJS を使用します github アドレス: https://github.com/mishoo/UglifyJS

css clean-css を使用します github アドレス: https://github.com/GoalSmashers/clean -css

画像は、node-smushit Github アドレスを使用します: https://github.com/colorhook/node-smushit

3. コードを記述します

//js

var fs = require('fs'); require( "uglify-js" ).parser;

var pro = require( "uglify-js" ).uglify;

function jsMinifier(flieIn, fileOut) {

var flieIn=Array.isArray (flieIn)? : [flieIn];

var origCode,ast,finalCode= '' ;

for ( var i=0; i

origCode = fs.readFileSync(flieIn[ i], 'utf8) ' );

ast = jsp.parse(origCode);

ast= pro.ast_squeeze(ast) ' + pro.gen_code(ast) );

}

fs.writeFileSync(fileOut, FinalCode, 'utf8' )

} //jsMinifier('./file-src/test2.js', './file-smin/test-min.js '); //単一ファイルの圧縮

jsMinifier([ './file-src/test.js' , './file-src/test2.js' ], './file-smin/test -min.js' ); //マージ圧縮

コマンド変換

UglifyJS は

uglifyjs [

options... ] [

File]

ファイルパラメータをオプションの後に配置する必要があり、uglifyjs はファイルの JavaScript コードを読み取って処理します。出力ファイル名を指定しない場合は、処理内容がコマンドラインに出力されます。

サポートされるオプション: ● -b または –beautify - 出力書式設定コード。このパラメーターが渡されると、次の追加オプションがより美しく書式設定を制御するために使用されます: ● -i N または –indent N - インデント。 level (スペースの数)

● -q または –quote-keys - 文字列オブジェクトのキーを引用符で囲むかどうか (デフォルトでは、正しくマークできないキー名のみを引用符で囲みます)

● –ascii - デフォルトでは、UglifyJS はそうしますこのパラメータを渡すと、非 ASCII エンコード文字が cXXXX シーケンスに変換されます (出力は常に UTF8 でエンコードされますが、このオプションを渡すと ASCII エンコード出力を取得できます)。

● -nm または –no-mangle - 変数名を変更しないでください。

● -ns または –no-squeeze - ast_squeeze() 関数を呼び出しません (この関数は、結果を小さくするためにさまざまな最適化を行います)下位)

● -mt または –mangle-toplevel - トップレベルのスコープで変数名をシャッフルします (デフォルトでは有効になっていません)

● –no-seqs - ast_squeeze() を呼び出すと、複数のステートメント ブロックが"a=10; b=20; foo()" のような 1 つのステートメント ブロックにマージされたものは、"a=10,b=20,foo()" に変換されます

● --no-dead-code - UglifyJSデフォルトでは削除され、使用されません。この機能を無効にするには、このパラメーターをコードに渡します。

● -nc または –no-copyright - デフォルトでは、uglifyjs は出力コードに著作権情報とその他の注釈コードを追加します。この機能を無効にするには、このパラメーターを渡します。

● -o filename または –output filename - 出力ファイル名を指定します。指定されていない場合は、標準出力 (STDOUT) に出力します。

● –overwrite - 受信 JS コードが標準入力ではなくファイルからのものである場合は、If を渡しますこのパラメータを入力すると、出力によってファイルが上書きされます。

● –ast - このパラメータを渡すと、Javascript の代わりに抽象構文ツリーが取得されます。これは、内部コードのデバッグや理解に役立ちます。

● -v または –verbose - 標準エラーに関する情報を出力します (現在のバージョンは操作時間のみを出力します)

● –extra - 完全にはテストされていない追加の最適化をオンにします。

● –unsafe - 特定の状況で安全ではないことが知られているその他の追加の最適化を有効にします。 (デフォルトは 32K バイト) - 32K バイトで改行を追加し、この機能を無効にするには 0 を渡します。

● –reserved-names - 一部のクラス ライブラリは一部の変数に依存します。このパラメーターで指定された名前は混同されません。

//css

var cleanCSS = require( 'clean-css' ) ;

function cssMinifier(flieIn, fileOut) {

var flieIn=Array.isArray(flieIn)? flieIn : [flieIn];

var origCode,finalCode= '' ;

for ( var i=0; i

origCode = fs.readFileSync(flieIn[i], 'utf8' );

FinalCode += cleanCSS.process(origCode);

}

fs.writeFileSync(fileOut, FinalCode, 'utf8' );

}

//cssMinifier('./file-src/indexw_20120913.css', './file-smin/index.css');  //单个文件压缩

cssMinifier([ './file-src/index_20120913.css' , './file-src/indexw_20120913.css' ], './file-smin/index.css' );

//画像

var imgMinifier = require( 'node-smushit' );

//imgMinifier.smushit('./file-src/images', {recursive: true}); //递归

imgMinifier.smushit( './file-src/images' );

+

+

+

=

+

+

+