Grunt: Difference between revisions
Damyon Wiese (talk | contribs) |
(Upated for new grunt css and grunt js) |
||
| Line 1: | Line 1: | ||
{{Moodle 2.9}} | {{Moodle 2.9}} | ||
Grunt is a command line tool used to prepare our javascript for production usage. After making any change to | 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 == | == Install grunt == | ||
The Javascript modules (AMD and YUI) 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. | 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 == | == 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 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 grunt runs it currently does 3 things: | 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 [https://github.com/yui/shifter shifter] to build any YUI modules in the source tree. See [YUI/Shifter] for more information on shifter | ||
| Line 17: | Line 18: | ||
* - it runs [http://lisperator.net/uglifyjs/ uglifyjs] to reduce the size of any Javascript by removing whitespace, stripping comments, shortening variable names etc. | * - 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 | 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: | See also: | ||
Revision as of 08:12, 10 December 2015
Moodle 2.9
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 "grunt" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "nodejs" environment. This means you first have to install nodejs - and it's package manager "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 grunt js command from any folder in Moodle and it will "build" all of the javascript from that directory and it's sub directories.
When grunt js runs it currently does 3 things:
- - it runs shifter to build any YUI modules in the source tree. See [YUI/Shifter] for more information on shifter
- - it runs jshint to detect invalid Javascript, or Javascript that does not comply with our coding guidelines
- - it runs uglifyjs to reduce the size of any Javascript by removing whitespace, stripping comments, shortening variable names etc.
You must run grunt js after making any change to the Javascript in Moodle.
grunt css
Run the grunt css command to compile less files into css. At this time this only affects changes in the bootstrapbase theme.
See also:
