We will inspect reusing the workflow for developing the OpenLayers core library to run the official examples. For this purpose, start with the following step:
Download the project code in your command line:
git clone https://github.com/openlayers/ol3.git cd ol3 git checkout v3.0.0
Install Node and Python additional libraries with:
npm install sudo pip install -r requirements.txt
Run from the command line, on Windows,
build.cmd checkdepsor./build.py checkdepson Linux / Mac OSX. It will return if dependencies are solved to proceed to the next step.To retrieve Closure Compiler and use the automatic configuration from the OpenLayers project, launch on Microsoft Windows:
build.cmd build.cmd host-examples build.cmd serve
On Linux / Mac OSX:
./build.py ./build.py host-examples ./build.py serve
Note
You may need an offline API, if for example, you're working in public transportation or without a network connection. To generate it, execute the
./build.py apidocorbuild.cmd apidoc. Then, open it withhttp://localhost:3000/build/hosted/HEAD/apidoc/. You can also get it directly from thev3.0.0.zipfile, downloaded from Chapter 1, Getting Started with OpenLayers.Now, open your browser at
http://localhost:3000/examples/and open Google Chrome Developers Tools. You will see the examples like the one you get on the official website that follows:
Explore the examples and watch for the Elements, Network, and Sources panel, in particular the JavaScript calls.
Then, navigate to
http://localhost:3000/build/hosted/HEAD/examples/attributions.html.Try to add the URL of the examples
?mode=whitespaceor?mode=simple, or?mode=raw.
We serve files on a small web server. In the first case, the loader.js file retrieves the dependencies and adds for each required files the script tag with the src attribute. In the second case, we chose to open the hosted files, the ones you get when you browse the official website, http://openlayers.org.
In the second case, depending on the provided values for the mode parameter, we will load different files for the OpenLayers 3 library:
Raw: This loads each input via its own
<script>tag. This does not run the Compiler, so no checks are performed.Whitespace: This loads all of the JavaScript code concatenated together with all white space and comments removed.
Simple: This loads the JavaScript as compiled with
SIMPLE_OPTIMIZATIONSenabled. Without an option in the URL, this loads the JavaScript as compiled withADVANCED_OPTIMIZATIONSenabled.
Hey! These options look familiar, where did we see them?
Remember that we had mentioned to you that OpenLayers tools are using Closure Compiler. Let's see how OpenLayers takes benefits from it.
When you changed examples with the raw mode, you may have noticed (in particular by filtering the script in the Network panel) that the loaded files number greatly differs from the URL without it. What can make this difference? Let's see some practical uses to understand.
We waited until now to review the removal of the unused code feature related to Google Closure Compiler.
As we already said, when you switch between examples, you load different files. How does it work?
Open your browser Network panel. Open the URL for one of the official examples and add ?mode=raw.
Then, in the console, type console.log(paths.length);.
Just compare the length between the examples. If your example in the URL is animation.html, inspect also the animation-require.js files, you will see that there are some lines beginning with goog.require('...'). The loader gets the name from the file via loader?id=examplename, and with the goog.require indications from examplename-require.js, Closure Compiler generates the list of files to load for the example.
When Compiler does not find the required goog.require statements, it excludes the files and the resulting build file is smaller. On mobile applications, it is invaluable. Just be careful to not break your application, for example, if you forget to add a statement.
When you run ./build.py or build.cmd, you have something such as 2014-12-10 18:41:23,358 build/ol.js: node tasks/build.js config/ol.json build/ol.js. We will reuse the beginning command to compile the ol.js file again and play with the Closure Compiler builder included in the OpenLayers 3 toolkit. The ol.json file is used to provide parameters to Closure Compiler to make the build and ol.js is the output result.
To build, you have two choices:
Build the code to make it work with a separate
.jslightened buildBuild the code by including the OpenLayers library code, together with the script file
At the moment, you have a shared JSON file for all examples in config/examples-all.json. We will reuse it.