|
| 1 | +Tutorial |
| 2 | +======== |
| 3 | + |
| 4 | +This tutorial shows how to prepend a license header to one or more |
| 5 | +compressed files in your `django-require`_ project. |
| 6 | + |
| 7 | +Setup Require.js Application |
| 8 | +---------------------------- |
| 9 | + |
| 10 | +Start by creating and configuring the require.js application. If your |
| 11 | +application is already up and running, you can move on to the |
| 12 | +:ref:`Django configuration <django-config>` section. |
| 13 | + |
| 14 | +Structure |
| 15 | +^^^^^^^^^ |
| 16 | + |
| 17 | +For example, in a Django_ project called ``myproject`` there is a |
| 18 | +require.js application called ``app`` with a directory structure |
| 19 | +similar to this:: |
| 20 | + |
| 21 | + + myproject |
| 22 | + - manage.py |
| 23 | + + myproject |
| 24 | + + static |
| 25 | + + js |
| 26 | + + libs |
| 27 | + - almond.js |
| 28 | + - jquery.min.js |
| 29 | + - loglevel.js |
| 30 | + - require.js |
| 31 | + + app |
| 32 | + - main.js |
| 33 | + - app.build.js |
| 34 | + - app.js |
| 35 | + - JS-LICENSE.txt |
| 36 | + |
| 37 | + |
| 38 | +Application |
| 39 | +^^^^^^^^^^^ |
| 40 | + |
| 41 | +The main require.js application in ``static/js/app/main.js`` contains: |
| 42 | + |
| 43 | +.. code-block:: javascript |
| 44 | +
|
| 45 | + define([ |
| 46 | + 'jquery', |
| 47 | + 'loglevel' |
| 48 | + ], function($, log) |
| 49 | + { |
| 50 | + |
| 51 | + log.enableAll(); |
| 52 | + log.debug("Hello world!"); |
| 53 | + |
| 54 | + }); |
| 55 | +
|
| 56 | +So we import the loglevel_ library as ``log``, enable logging on all |
| 57 | +levels and print a test message. |
| 58 | + |
| 59 | + |
| 60 | +Build Config |
| 61 | +^^^^^^^^^^^^ |
| 62 | + |
| 63 | +The r.js build configuration file ``static/js/app.build.js`` contains: |
| 64 | + |
| 65 | +.. code-block:: javascript |
| 66 | +
|
| 67 | + ({ |
| 68 | + mainConfigFile: "app.js", |
| 69 | + name: "app", |
| 70 | + preserveLicenseComments: false, |
| 71 | + skipDirOptimize: true |
| 72 | + }) |
| 73 | +
|
| 74 | +Check the `r.js docs`_ for an explanation of these options. |
| 75 | + |
| 76 | + |
| 77 | +Application Config |
| 78 | +^^^^^^^^^^^^^^^^^^ |
| 79 | + |
| 80 | +The application configuration file ``static/js/app.js`` contains: |
| 81 | + |
| 82 | +.. code-block:: javascript |
| 83 | +
|
| 84 | + require.config({ |
| 85 | + paths: { |
| 86 | + jquery: 'libs/jquery.min', |
| 87 | + almond: 'libs/almond', |
| 88 | + loglevel: 'libs/loglevel' |
| 89 | + }, |
| 90 | + shim: { |
| 91 | + loglevel: { |
| 92 | + exports: 'loglevel' |
| 93 | + }, |
| 94 | +
|
| 95 | + almond: { |
| 96 | + exports: 'almond' |
| 97 | + } |
| 98 | + } |
| 99 | + }); |
| 100 | +
|
| 101 | + // Load the main app module to start the app |
| 102 | + require(['app/main']); |
| 103 | +
|
| 104 | +
|
| 105 | +Libraries |
| 106 | +^^^^^^^^^ |
| 107 | + |
| 108 | +The libraries used in this example are placed in ``static/js/libs``. |
| 109 | + |
| 110 | + |
| 111 | +.. _django-config: |
| 112 | + |
| 113 | +License File |
| 114 | +^^^^^^^^^^^^ |
| 115 | + |
| 116 | +``static/js/JS-LICENSE.txt`` is a plain-text file containing the license text. |
| 117 | +You can use variable placeholders that are replaced during the build:: |
| 118 | + |
| 119 | + /*! Copyright {copyright_holder} {copyright_year} - v{version} ({timestamp}) |
| 120 | + * {license_url} |
| 121 | + */ |
| 122 | + |
| 123 | + |
| 124 | +Configure Django application |
| 125 | +---------------------------- |
| 126 | + |
| 127 | +Make sure the staticfiles and `django-require`_ applications are included in |
| 128 | +the ``INSTALLED_APPS`` setting of the Django project settings file:: |
| 129 | + |
| 130 | + INSTALLED_APPS = [ |
| 131 | + # ... |
| 132 | + 'django.contrib.staticfiles', |
| 133 | + 'require' |
| 134 | + ] |
| 135 | + |
| 136 | +The ``STATIC_ROOT`` setting points to an absolute directory path where the |
| 137 | +static files should be collected to: |
| 138 | + |
| 139 | +.. code-block:: python |
| 140 | +
|
| 141 | + STATIC_ROOT = '/path/to/static/' |
| 142 | +
|
| 143 | +Change the ``STATICFILES_STORAGE`` setting to |
| 144 | +``require_license.storage.OptimizedStaticFilesStorage``: |
| 145 | + |
| 146 | +.. code-block:: python |
| 147 | +
|
| 148 | + # The file storage engine to use when collecting static files with the |
| 149 | + # `collectstatic` management command. |
| 150 | + STATICFILES_STORAGE = 'require_license.storage.OptimizedStaticFilesStorage' |
| 151 | +
|
| 152 | +Configure the `django-require`_ application (refer to the |
| 153 | +`documentation <https://github.com/etianen/django-require#available-settings>`_ |
| 154 | +for details): |
| 155 | + |
| 156 | +.. code-block:: python |
| 157 | +
|
| 158 | + # The baseUrl to pass to the r.js optimizer. |
| 159 | + REQUIRE_BASE_URL = 'js' |
| 160 | +
|
| 161 | + # The name of the build profile for the site, relative to REQUIRE_BASE_URL. |
| 162 | + # Leave blank to use the built-in default build profile. |
| 163 | + REQUIRE_BUILD_PROFILE = 'app.build.js' |
| 164 | +
|
| 165 | + # The name of the require.js script used by your project, relative to |
| 166 | + # REQUIRE_BASE_URL. |
| 167 | + REQUIRE_JS = os.path.join(REQUIRE_BASE_URL, 'libs', 'require.js') |
| 168 | +
|
| 169 | + # Whether to run django-require in debug mode. |
| 170 | + REQUIRE_DEBUG = DEBUG |
| 171 | +
|
| 172 | + # A dictionary of standalone modules to build with almond.js. |
| 173 | + REQUIRE_STANDALONE_MODULES = { |
| 174 | + 'app': { |
| 175 | + # Where to output the built module, relative to REQUIRE_BASE_URL. |
| 176 | + 'out': 'app.min.js', |
| 177 | +
|
| 178 | + # A build profile used to build this standalone module. |
| 179 | + 'build_profile': REQUIRE_BUILD_PROFILE, |
| 180 | + } |
| 181 | + } |
| 182 | +
|
| 183 | + # A tuple of files to exclude from the compilation result of r.js. |
| 184 | + REQUIRE_EXCLUDE = ('build.txt', |
| 185 | + os.path.join(REQUIRE_BASE_URL, REQUIRE_BUILD_PROFILE), |
| 186 | + ) |
| 187 | +
|
| 188 | +Configure Header |
| 189 | +^^^^^^^^^^^^^^^^ |
| 190 | + |
| 191 | +Configure the ``REQUIRE_LICENSE_HEADERS`` options. This is a dict |
| 192 | +object where you add a mapping for the output file (eg. ``js/app.min.js``) |
| 193 | +and a dict containing the variables that we inject into the license header. |
| 194 | + |
| 195 | +.. code-block:: python |
| 196 | +
|
| 197 | + # A dictionary of output files with a license header config. |
| 198 | + REQUIRE_LICENSE_HEADERS = { |
| 199 | + os.path.join(REQUIRE_BASE_URL, 'app.min.js'): { |
| 200 | + 'license_file': os.path.join(REQUIRE_BASE_URL, 'JS-LICENSE.txt'), |
| 201 | + 'timestamp': date.today(), |
| 202 | + 'copyright_year': datetime.now().year, |
| 203 | + 'copyright_holder': 'MyCompany', |
| 204 | + 'license_url': 'http://example.com/license', |
| 205 | + 'version': '1.0.1' |
| 206 | + } |
| 207 | + } |
| 208 | +
|
| 209 | +The only mandatory key is ``license_file``: the path to the license header |
| 210 | +template file, eg. ``js/JS-LICENSE.txt``. |
| 211 | + |
| 212 | +The ``version`` key (optional) is special: use a string value here, |
| 213 | +eg. ``1.0.4``, or specify a fully-qualified path to an |
| 214 | +attribute that contains a string version instead, |
| 215 | +eg. ``myproject.version``. |
| 216 | + |
| 217 | +Any other keys found in the dict will also be injected in the license header |
| 218 | +template. |
| 219 | + |
| 220 | + |
| 221 | +Optimize |
| 222 | +-------- |
| 223 | + |
| 224 | +Now you're ready to run the ``collectstatic`` command to `collect and optimize`_ |
| 225 | +the static files:: |
| 226 | + |
| 227 | + ./manage.py collectstatic |
| 228 | + |
| 229 | +This copies all static files into the ``STATIC_ROOT`` directory, including the |
| 230 | +compressed ``app.min.js`` with license header. |
| 231 | + |
| 232 | + |
| 233 | +.. _Django: https://www.djangoproject.com |
| 234 | +.. _django-require: https://github.com/etianen/django-require |
| 235 | +.. _r.js docs: http://requirejs.org/docs/optimization.html#options |
| 236 | +.. _loglevel: https://github.com/pimterry/loglevel |
| 237 | +.. _collect and optimize: https://github.com/etianen/django-require#running-the-rjs-optmizer |
0 commit comments