Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Grunt: Difference between revisions

From MoodleDocs
No edit summary
m (Protected "Grunt": Developer Docs Migration ([Edit=Allow only administrators] (indefinite)))
 
(27 intermediate revisions by 16 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).
 
Typical commands:
 
grunt amd              # Short-cut for grunt jshit uglify, rebuild all AMD modules.
grunt shifter          # Run shifter
grunt js                # Short-cut for grunt amd shifter
grunt css              # Run less
grunt                  # Try to do the right thing:
                        # * If you are in a folder called amd, do grunt amd
                        # * If you are in a folder called yui/src/something, do grunt shifter
                        # * Otherwise build everything (grunt css js).
 
On Linux/Mac it will build everything in the current folder and below. On Windows, you need to specify the path on the command line like <tt>--root=admin/tool/templatelibrary</tt>.
 
== See also ==
* [[YUI/Shifter]]
* [[Javascript Modules]]
* [[LESS]]
 
[[Category:AJAX]]
[[Category:Javascript]]

Latest revision as of 01:28, 10 October 2023

Important:

This content of this page has been updated and migrated to the new Moodle Developer Resources. The information contained on the page should no longer be seen up-to-date.

Why not view this page on the new site and help us to migrate more content to the new site!