Diff for "JavaScriptBuildSystem"

Not logged in - Log In / Register

Differences between revisions 7 and 9 (spanning 2 versions)
Revision 7 as of 2009-05-01 20:30:48
Size: 1486
Editor: barry
Comment:
Revision 9 as of 2010-05-18 18:43:31
Size: 1259
Editor: mars
Comment:
Deletions are marked like this. Additions are marked like this.
Line 9: Line 9:
== Adding new YUI3 JavaScript modules == == Adding new JavaScript modules ==
Line 11: Line 11:
A special script, `utilities/yui_deps.py`, looks in the main site template for `<script>` lines that point to YUI3. The corresponding minified script files are extracted from the current YUI3 build and added to `launchpad.js`. To add a new JavaScript module simply add a new `<script>` line to `lib/lp/app/templates/base-layout-macros.pt` in the large `<devmode>` JavaScript block. The file you add to the list will be automatically included in the `launchpad.js` roll-up and used by both the test runner and the LP production site.
Line 13: Line 13:
To add a new YUI3 dependency, just add a new `<script>` line to the main site template. Two special scripts, `utilities/yui_deps.py` and `utilities/lp-deps.py`, look in `lib/lp/app/templates/base-layout-macros.pt` for `<script>` lines. The corresponding minified script files (the version of the file ending with "-min.js") will be added to `launchpad.js`.
Line 15: Line 15:
== Dynamic import of YUI CSS ==

Sometimes when you import new YUI3 modules as above, you may still continue to see the security warning because YUI is dynamically loading the CSS required for the new modules from its own servers. To avoid this you can tell YUI the base directory for its imports like this:
After making your changes you will probably want to run:
Line 20: Line 17:
  <script type='text/javascript' tal:content="string:var yui_base='${yui}';" />
  <js tal:replace="structure string:<script type='text/javascript'>
YUI({base: yui_base + '/'}).use(
$ make clean_js && make jsbuild
Line 25: Line 20:
Or if this is part of a general CSS component, it's better to add that CSS to the main template. == Adding a new CSS file ==
Line 27: Line 22:
''That depends if the YUI Loader can tell that it's required CSS files are already present on the page. Unlike JS files, when you read a CSS file, there is nothing to indicate that it fulfills a YUI Loader requirement. -- [[LaunchpadHome:mars]] <<DateTime(2009-03-12T15:13:20Z)>>'' Launchpad combines and minifies all of its CSS files into 'combo.css' before publishing them. You can add a new CSS file to the list by editing `buildout-templates/bin/combine-css.in`

After making your changes you will probably want to run:
{{{
$ make css_combine
}}}

The Launchpad JavaScript Build System

Most of the Launchpad JavaScript is bundled, minified, and distributed in one large stand-alone file: launchpad.js.

Adding new JavaScript modules

To add a new JavaScript module simply add a new <script> line to lib/lp/app/templates/base-layout-macros.pt in the large <devmode> JavaScript block. The file you add to the list will be automatically included in the launchpad.js roll-up and used by both the test runner and the LP production site.

Two special scripts, utilities/yui_deps.py and utilities/lp-deps.py, look in lib/lp/app/templates/base-layout-macros.pt for <script> lines. The corresponding minified script files (the version of the file ending with "-min.js") will be added to launchpad.js.

After making your changes you will probably want to run:

$ make clean_js && make jsbuild

Adding a new CSS file

Launchpad combines and minifies all of its CSS files into 'combo.css' before publishing them. You can add a new CSS file to the list by editing buildout-templates/bin/combine-css.in

After making your changes you will probably want to run:

$ make css_combine


CategoryJavaScript

JavaScriptBuildSystem (last edited 2020-10-27 10:23:00 by twom)