|
|
(32 intermediate revisions by 17 users not shown) |
Line 1: |
Line 1: |
| {{Moodle 2.9}} | | {{Template:Migrated|newDocId=/general/development/tools/nodejs}} |
| | |
| Grunt is a command line tool used to prepare our javascript and less-generated css for production usage. After making any change to javascript or less files in Moodle, you must run grunt to lint, minify and package the javascript/css properly so that it can be served by Moodle.
| |
| | |
| == Install grunt == | |
| The Javascript modules (AMD and YUI) and less css in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[http://gruntjs.com/ grunt]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment. This means you first have to install nodejs - and it's package manager "[https://www.npmjs.com/ npm]". The details of how to install those packages will vary by operating system, but on Linux it's probably similar to "sudo apt-get install nodejs npm". There are downloadable packages for other operating systems here: http://nodejs.org/download/. Once this is done, you can run the command: "npm install" from the top of the Moodle directory to install all of the required tools.
| |
| | |
| == Running grunt ==
| |
| Grunt is a special node package in that it comes in 2 parts. One part is the grunt package that is installed in the node_modules folder by the "npm install" command listed in the previous section. The second part is that you also need to install the grunt-cli package globally in order to have a "grunt" command in your path. To do this run "npm install -g grunt-cli" (you may need additional permissions to do this).
| |
| | |
| == grunt js ==
| |
| Run the <code>grunt js</code> command from any folder in Moodle and it will "build" all of the javascript from that directory and it's sub directories.
| |
| | |
| When <code>grunt js</code> runs it currently does 3 things:
| |
| | |
| * - it runs [https://github.com/yui/shifter shifter] to build any YUI modules in the source tree. See [YUI/Shifter] for more information on shifter
| |
| * - it runs [http://jshint.com/ jshint] to detect invalid Javascript, or Javascript that does not comply with our coding guidelines
| |
| * - it runs [http://lisperator.net/uglifyjs/ uglifyjs] to reduce the size of any Javascript by removing whitespace, stripping comments, shortening variable names etc.
| |
| | |
| You must run <code>grunt js</code> after making any change to the Javascript in Moodle.
| |
| | |
| == grunt css ==
| |
| Run the <code>grunt css</code> command to compile less files into css. At this time this only affects changes in the bootstrapbase theme.
| |
| | |
| See also:
| |
| * [[YUI/Shifter]]
| |
| * [[Javascript Modules]]
| |
| * [[LESS]]
| |
| | |
| [[Category:AJAX]]
| |
| [[Category:Javascript]]
| |