[Closure Compile GN] Update Closure docs.
This CL updates Chromium Closure Compilation docs to use GN-based
compilation.
Bug: 632206
Change-Id: Ie3aef4b7f81744e04051489731acf4e7aa80da15
Reviewed-on: https://chromium-review.googlesource.com/1098749
Reviewed-by: Demetrios Papadopoulos <[email protected]>
Commit-Queue: calamity <[email protected]>
Cr-Commit-Position: refs/heads/master@{#567116}diff --git a/docs/closure_compilation.md b/docs/closure_compilation.md
index 81a002b..4ae3688 100644
--- a/docs/closure_compilation.md
+++ b/docs/closure_compilation.md
@@ -84,31 +84,31 @@
To do this, we can create:
- + ui/compiled_resources2.gyp
+ + ui/BUILD.gn
With these contents:
```
-# Copyright 2016 The Chromium Authors. All rights reserved.
+# Copyright 2018 The Chromium Authors. All rights reserved.
# Use of this source code is governed by a BSD-style license that can be
# found in the LICENSE file.
-{
- 'targets': [
- {
- # Target names is typically just without ".js"
- 'target_name': 'makes_things_pretty',
- 'dependencies': [
- '../lib/compiled_resources2.gyp:does_the_hard_stuff',
+import("//third_party/closure_compiler/compile_js.gni")
- # Teaches closure about non-standard environments/APIs, e.g.
- # chrome.send(), chrome.app.window, etc.
- '<(EXTERNS_GYP):extern_name_goes_here'
- ],
+js_type_check("closure_compile") {
+ deps = [
+ ":make_things_pretty",
+ ]
+}
- 'includes': ['../path/to/third_party/closure_compiler/compile_js2.gypi'],
- },
- ],
+js_library("make_things_pretty") {
+ deps = [
+ "../lib:does_the_hard_stuff",
+ ]
+
+ externs_list = [
+ "$externs_path/extern_name_goes_here.js"
+ ]
}
```
@@ -120,10 +120,10 @@
python, depot_tools). Note: on Ubuntu, you can probably just run `sudo apt-get
install openjdk-7-jre`.
-Now you should be able to run:
+After you set closure_compile = true in your gn args, you should be able to run:
```shell
-third_party/closure_compiler/run_compiler
+ninja -C out/Default webui_closure_compile
```
and should see output like this:
@@ -133,10 +133,10 @@
[0/1] ACTION Compiling ui/makes_things_pretty.js
```
-To compile only a specific target, add an argument after the script name:
+To compile only a specific folder, add an argument after the script name:
```shell
-third_party/closure_compiler/run_compiler makes_things_pretty
+ninja -C out/Default ui:closure_compile
```
In our example code, this error should appear:
@@ -152,51 +152,41 @@
Hooray! We can catch type errors in JavaScript!
+## Preferred BUILD.gn structure
+* Make all individual JS file targets a js\_library.
+* The top level target should be called “closure\_compile”.
+* If you have subfolders that need compiling, make “closure\_compile” a group(),
+ and any files in the current directory a js\_type\_check() called “<directory>\_resources”.
+* Otherwise, just make “closure\_compile” a js\_type\_check with all your js\_library targets as deps
+* Leave all closure targets below other kinds of targets becaure they’re less ‘important’
+
+See also:
+[Closure Compilation with GN](https://docs.google.com/a/chromium.org/document/d/1Ee9ggmp6U-lM-w9WmxN5cSLkK9B5YAq14939Woo-JY0/edit).
+
## Trying your change
-Closure compilation also has [try
-bots](https://build.chromium.org/p/tryserver.chromium.linux/builders/closure_compilation)
-which can check whether you could *would* break the build if it was committed.
+Closure compilation runs in the compile step of Linux, Android and ChromeOS builds.
From the command line, you try your change with:
```shell
-git cl try -b closure_compilation
+git cl try -b linux_chromium_rel_ng
```
-To automatically check that your code typechecks cleanly before submitting, you
-can add this line to your CL description:
-
-```
-CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation
-```
-
-Working in common resource directories in Chrome automatically adds this line
-for you.
-
## Integrating with the continuous build
-To compile your code on every commit, add your file to the `'dependencies'` list
-in `src/third_party/closure_compiler/compiled_resources2.gyp`:
+To compile your code on every commit, add your file to the
+`'webui_closure_compile'` target in `src/BUILD.gn`:
```
-{
- 'targets': [
- {
- 'target_name': 'compile_all_resources',
- 'dependencies': [
- # ... other projects ...
-++ '../my_project/compiled_resources2.gyp:*',
- ],
- }
- ]
-}
+ group("webui_closure_compile") {
+ data_deps = [
+ # Other projects
+ "my/project:closure_compile",
+ ]
+ }
```
-This file is used by the
-[Closure compiler bot](https://build.chromium.org/p/chromium.fyi/builders/Closure%20Compilation%20Linux)
-to automatically compile your code on every commit.
-
## Externs
[Externs files](https://github.com/google/closure-compiler/wiki/FAQ#how-do-i-write-an-externs-file)
diff --git a/styleguide/web/web.md b/styleguide/web/web.md
index e657ab39..981caa2 100644
--- a/styleguide/web/web.md
+++ b/styleguide/web/web.md
@@ -331,11 +331,11 @@
compiler](https://chromium.googlesource.com/chromium/src/+/master/docs/closure_compilation.md)
to identify JS type errors and enforce correct JSDoc annotations.
-* Add a `compiled_resources2.gyp` file to any new web UI code directory.
+* Add a `BUILD.gn` file to any new web UI code directory.
-* Ensure that your `compiled_resources2.gyp` file is included in
- `third_party/closure_compiler/compiled_resources2.gyp` (or somewhere in its
- include hierarchy) so that your code is typechecked in an automated way.
+* Ensure that your `BUILD.gn` file is included in
+ `src/BUILD.gn:webui_closure_compile` (or somewhere in its
+ deps hierarchy) so that your code is typechecked in an automated way.
* Type Polymer elements by appending 'Element' to the element name, e.g.
`/** @type {IronIconElement} */`
@@ -381,8 +381,8 @@
* `created`, `ready`, `attached`, `detached`
* public methods
* event handlers, computed functions, and private methods
-
-* Use camelCase for element IDs to simplify local DOM accessors (i.e.
+
+* Use camelCase for element IDs to simplify local DOM accessors (i.e.
`this.$.camelCase` instead of `this.$[‘dash-case’]`).
* Use `this.foo` instead of `newFoo` arguments in observers when possible.
