ホームページ > 記事 > ウェブフロントエンド > win7 では、Ant は yuicompressor と連携して、js と css_html/css_WEB-ITnose をマージ、圧縮、コピーします。
この記事は Windows 7 システムに基づいていますが、Mac ではより簡単になる可能性があります。この記事では強調するインクのない記事を参照していますが、もう一度説明します。
少し時間がかかりましたが、最終的に実験は成功しました。デモのアドレスは http://pan.baidu.com/s/1c0dGm1i
公式 Web サイトからダウンロードできます。アドレスは http:/ です。 /ant.apache.org/、yuicompressor については、公式 Web サイト https://github.com/yui/yuicompressor にアクセスすることもできます
デモで使用される ant バージョンは apache-ant-1.8.2 です。 yuicompressor のバージョンは yuicompressor-2.4.6 です。さらに、ant には Java 実行環境が必要なので (最初に Ant の説明を読んでいなかったので時間を無駄にしました)、バージョン 1.8 には少なくとも 1.4 の Java JDK が必要です。これはここで見つけることができます: http:/ /ant.apache .org/faq.html
構成後、cmd-》dos の下に java を入力して、インストールが成功したかどうかを確認できます。次に、ant の環境変数を設定します。次のようなメッセージが表示されたら、インストールが成功したかどうかもテストします。
この環境でのみ設定が成功します。以下のデモ構造を見てみましょう
これは、ビルド xml ファイルを記述するためだけの VS で構築された小さなプロジェクトです。繰り返しますが、xml を記述するだけで、フォルダー内で手動で行うことができます。
コアは build.xml ファイルで、構造は次のとおりです:
<?xml version="1.0" encoding="utf-8"?><project default="compress" basedir="F:\js\cc\deploymentTes\web" name="core"> <!-- 项目的 web 路径 --> <property name="path" value="F:\js\cc\deploymentTes\web" /> <!-- 部署的输出路径 --> <property name="targetDir" value="F:\js\cc\deploymentTes\build_output\asset" /> <!-- 源文件路径(src) --> <property name="code.src" value="src" /> <!-- !!! YUI Compressor 路径 !!! --> <property name="yuicompressor" value="F:\js\cc\deploymentTes\build\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar" /> <!-- ================================= target: concat 拼接(合并)文件 ================================= --> <target name="concat" depends="" description="concat code"> <echo message="Concat Code Files Begin!!!" /> <!-- JS --> <concat destfile="${targetDir}/js/all.js" encoding="utf-8" fixlastline="on"> <fileset dir="${code.src}/js" includes="jquery-1.10.2.js" /> <fileset dir="${code.src}/js" includes="jquery-ui.js" /> </concat> <!-- CSS --> <concat destfile="${targetDir}/css/all.css" encoding="utf-8"> <fileset dir="${code.src}/css" includes="jquery-ui.css" /> <fileset dir="${code.src}/css" includes="jquery-ui.theme.css" /> </concat> <echo message="Concat Code Files Finished!!!" /> </target> <!-- ================================= target: copy 拷贝文件 ================================= --> <target name="copy_asset" depends="concat" description="copy the asset file"> <echo message="Copy Asset Begin" /> <!-- main.html --> <copy todir="${targetDir}/" overwrite="true"> <fileset dir="${path}/" includes="*.html"/> </copy> <!-- img *.png --> <copy todir="${targetDir}/img" overwrite="true"> <fileset dir="${path}/asset/img" includes="*.png" /> </copy> <echo message="Copy Asset Finished" /> </target> <!-- ================================= target: compress 压缩 js && css ================================= --> <target name="compress" depends="copy_asset" description="compress code"> <echo message="Compress Code Begin" /> <apply executable="java" parallel="false" failonerror="true" dest="${targetDir}/js"> <fileset dir="${targetDir}/js" includes="*.js"/> <arg line="-jar"/> <arg path="${yuicompressor}" /> <arg line="--charset utf-8" /> <arg line="-o" /> <targetfile/> <mapper type="glob" from="*.js" to="*.min.js" /> </apply> <apply executable="java" parallel="false" failonerror="true" dest="${targetDir}/css"> <fileset dir="${targetDir}/css" includes="*.css"/> <arg line="-jar"/> <arg path="${yuicompressor}" /> <arg line="--charset utf-8" /> <arg line="-o" /> <targetfile/> <mapper type="glob" from="*.css" to="*.min.css" /> </apply> <echo message="Compress Code Finished" /> <echo message="Clean Begin" /> <!--<delete verbose="false" failonerror="true"> <fileset dir="${path}" includes="${targetDir}/*-o.js" /> </delete>--> <echo message="Clean Finished" /> </target></project>build.bat のバッチ ファイルは ant を呼び出すためのもので、その内容は次のとおりです:
./apache-ant-1.8.2/bin/ant -f ./build.xmlはバット ファイルを実行するだけです。 ant 用 yuicompressor の XML 構文解析手順については、非常に詳細なドキュメントを参照してください。ダウンロードしたデモには詳細な手順が記載されています:
以下の抜粋は yuicompressor の Readme です:
==============================================================================YUI Compressor==============================================================================NAME YUI Compressor - The Yahoo! JavaScript and CSS CompressorSYNOPSIS Usage: java -jar yuicompressor-x.y.z.jar [options] [input file] Global Options -h, --help Displays this information --type <js|css> Specifies the type of the input file --charset <charset> Read the input file using <charset> --line-break <column> Insert a line break after the specified column number -v, --verbose Display informational messages and warnings -o <file> Place the output into <file> or a file pattern. Defaults to stdout. JavaScript Options --nomunge Minify only, do not obfuscate --preserve-semi Preserve all semicolons --disable-optimizations Disable all micro optimizationsDESCRIPTION The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as 'eval' or 'with' (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%. The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css)GLOBAL OPTIONS -h, --help Prints help on how to use the YUI Compressor --line-break Some source control tools don't like files containing lines longer than, say 8000 characters. The linebreak option is used in that case to split long lines after a specific column. It can also be used to make the code more readable, easier to debug (especially with the MS Script Debugger) Specify 0 to get a line break after each semi-colon in JavaScript, and after each rule in CSS. --type js|css The type of compressor (JavaScript or CSS) is chosen based on the extension of the input file name (.js or .css) This option is required if no input file has been specified. Otherwise, this option is only required if the input file extension is neither 'js' nor 'css'. --charset character-set If a supported character set is specified, the YUI Compressor will use it to read the input file. Otherwise, it will assume that the platform's default character set is being used. The output file is encoded using the same character set. -o outfile Place output in file outfile. If not specified, the YUI Compressor will default to the standard output, which you can redirect to a file. Supports a filter syntax for expressing the output pattern when there are multiple input files. ex: java -jar yuicompressor.jar -o '.css$:-min.css' *.css ... will minify all .css files and save them as -min.css -v, --verbose Display informational messages and warnings.JAVASCRIPT ONLY OPTIONS --nomunge Minify only. Do not obfuscate local symbols. --preserve-semi Preserve unnecessary semicolons (such as right before a '}') This option is useful when compressed code has to be run through JSLint (which is the case of YUI for example) --disable-optimizations Disable all the built-in micro optimizations.NOTES + If no input file is specified, it defaults to stdin. + Supports wildcards for specifying multiple input files. + The YUI Compressor requires Java version >= 1.4. + It is possible to prevent a local variable, nested function or function argument from being obfuscated by using "hints". A hint is a string that is located at the very beginning of a function body like so: function fn (arg1, arg2, arg3) { "arg2:nomunge, localVar:nomunge, nestedFn:nomunge"; ... var localVar; ... function nestedFn () { .... } ... } The hint itself disappears from the compressed file. + C-style comments starting with /*! are preserved. This is useful with comments containing copyright/license information. For example: /*! * TERMS OF USE - EASING EQUATIONS * Open source under the BSD License. * Copyright 2001 Robert Penner All rights reserved. */ becomes: /* * TERMS OF USE - EASING EQUATIONS * Open source under the BSD License. * Copyright 2001 Robert Penner All rights reserved. */MODIFIED RHINO FILES YUI Compressor uses a modified version of the Rhino library (http://www.mozilla.org/rhino/) The changes were made to support JScript conditional comments, preserved comments, unescaped slash characters in regular expressions, and to allow for the optimization of escaped quotes in string literals.COPYRIGHT AND LICENSE Copyright (c) 2011 Yahoo! Inc. All rights reserved. The copyrights embodied in the content of this file are licensed by Yahoo! Inc. under the BSD (revised) open source license.
ps,これもオンラインで見つけました。オンラインのアドレスです: http://ganquan.info/yui/?hl=zh-CN
参考になる関連記事を添付します:
ANT と YUI を使用して js を圧縮
CSS、JS ソリューションを圧縮するための Ant と yuicompressor