如何使用外部Javascript庫（如jQuery）重命名Google Closure樣式表？

Question

我正在研究Google的樣式表重命名功能，我不知道如何重寫我的jquery選擇器。 我沒有發現該文件非常明確。

如果我有一些看起來像這樣的代碼：

<div class="MyClass"></div>
<div id="MyID"></div>

$('.MyClass').someFunc();
$('#MyID').someFunc();

如何編寫HTML和javascript以便CSS重命名可以工作？

謝謝你的建議。

Answer 1

要使Closure-stylesheets與jQuery等外部庫結合使用，您還需要使用Closure-library來添加對goog.getCssName支持。 但是，因為編寫Closure-Library是為了最大限度地利用Closure-compiler的死代碼消除，所以最終輸出中只包含非常少量的庫代碼（在本例中約為1KB）。

第1步 - 設置您的項目

您需要以下工具：

第2步 - 設置源文件

樣式表來源（sample.gss）

@def BG_COLOR              rgb(235, 239, 249);

@def DIALOG_BORDER_COLOR   rgb(107, 144, 218);
@def DIALOG_BG_COLOR       BG_COLOR;

.MyClass {
  background-color: BG_COLOR;
  height:100px;
}

#MyId {
  background-color: DIALOG_BG_COLOR;
  border: 1px solid DIALOG_BORDER_COLOR;
  height:100px;
}

關閉模板源（sample.soy）

{namespace ClosureSample}

/**
 * SampleHtml
 */
{template .SampleHtml autoescape="false"}
    <div class="{css MyClass}"></div>
{/template}

Javascript源碼（ sample.js ）

goog.require('ClosureSample');
document.write(ClosureSample.SampleHtml());

$(function() {
    $('.' + goog.getCssName('MyClass')).css('background-color', 'pink');
});

HTML源碼（ development.htm ）

<!DOCTYPE html>
<html>
<head>
  <title>Closure stylesheets with External Library</title>
  <link rel="Stylesheet" media="all" href="sample.css" />
  <script type="text/javascript" src="sample_renaming_map.js"></script>
  <script type="text/javascript" src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
  <script type="text/javascript">
    goog.require('goog.soy');
    goog.require('goog.string.StringBuffer');
  </script>
  <script type="text/javascript" src="soyutils_usegoog.js"></script>
  <script type="text/javascript" src="sample-templates.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
  <script type="text/javascript" src="sample.js"></script>
  <div id="MyId"></div>
</body>
</html>

第3步 - 編譯樣式表和模板

使用來自模板和樣式表的項目下載的工具，你需要編譯sample.gss和sample.soy文件。 以下是此示例使用的命令：

java -jar closure-stylesheets.jar \
    --pretty-print \
    --output-file sample.css \
    --output-renaming-map-format CLOSURE_UNCOMPILED \
    --rename CLOSURE \
    --output-renaming-map sample_renaming_map.js \
    sample.gss

java -jar SoyToJsSrcCompiler.jar \
    --shouldProvideRequireSoyNamespaces \
    --shouldGenerateJsdoc \
    --outputPathFormat {INPUT_FILE_NAME_NO_EXT}.js \
    --cssHandlingScheme goog \
    sample.soy

使用這些文件，您可以在開發期間測試重命名。 查看示例。

第4步 - 編譯項目進行生產

首先使用“CLOSURE_COMPILED”選項重新編譯樣式表以生成重命名映射：

java -jar closure-stylesheets.jar \
    --output-file sample.css \
    --output-renaming-map-format CLOSURE_COMPILED \
    --rename CLOSURE \
    --output-renaming-map sample_renaming_map.js \
    sample.gss

然后，您將需要計算Closure庫依賴文件並將所有源JavaScript文件編譯為單個源。

Closure-library項目中的calcdeps.py腳本也可用於在它確定的輸入文件上調用Closure-compiler。

python calcdeps.py \
    -i sample.js \
    -p PATH_TO_CLOSURE_LIBRARY_FOLDER \
    -p sample-templates.js \
    -o compiled \
    -c compiler.jar \
    -f --js=sample_renaming_map.js
    -f --compilation_level=ADVANCED_OPTIMIZATIONS \
    -f --warning_level=VERBOSE \
    -f --externs=jquery-1.7-externs.js \
    -f --js_output_file=sample_compiled.js

查看最終結果：編譯版本。

最后的筆記

正如您所看到的，使用Google Closure Stylesheets不僅需要整個Closure-tools套件的一部分，而且還需要參與其中。

輸出HTML需要使用Google Closure-templates。 在這個人為的例子中，我使用了document.write調用來輸出正確重命名的類的HTML，但是生產代碼有更優雅和可維護的技術。
Closure-stylesheets不重命名ID選擇器，因此ID的代碼不受影響。
為便於查看，已編譯的示例引用了Google CDN之外的jQuery庫。 但是，將jQuery庫和編譯后的源連接到單個源JS文件中同樣有效。

如何使用外部Javascript庫（如jQuery）重命名Google Closure樣式表？

問題描述

1 個解決方案

解決方案1
20 已采納 2012-09-07 15:32:59

第1步 - 設置您的項目

第2步 - 設置源文件

樣式表來源（sample.gss）

關閉模板源（sample.soy）

Javascript源碼（ sample.js ）

HTML源碼（ development.htm ）

第3步 - 編譯樣式表和模板

第4步 - 編譯項目進行生產

最后的筆記

如何使用外部Javascript庫（如jQuery）重命名Google Closure樣式表？

問題描述

1 個解決方案

解決方案1 20 已采納 2012-09-07 15:32:59

第1步 - 設置您的項目

第2步 - 設置源文件

樣式表來源（sample.gss）

關閉模板源（sample.soy）

Javascript源碼（ sample.js ）

HTML源碼（ development.htm ）

第3步 - 編譯樣式表和模板

第4步 - 編譯項目進行生產

最后的筆記

解決方案1
20 已采納 2012-09-07 15:32:59