MDL-51582 grunt: add less complilation support

Previously we were using recess to build bootstrap base as it was what
was used by the original project. But recess is no longer maintained.

Now we use grunt for building js, it makes sense to use it for less too.

(If you really don't want to use grunt, you almost certainly can just
use lessc -x as it uses the same less.js on backend).

Gruntfile.js

@@ -50,6 +50,17 @@ module.exports = function(grunt) {
                     }
                 )
             }
+        },
+        less: {
+            bootstrapbase: {
+                files: {
+                    "theme/bootstrapbase/style/moodle.css": "theme/bootstrapbase/less/moodle.less",
+                    "theme/bootstrapbase/style/editor.css": "theme/bootstrapbase/less/editor.less",
+                },
+                options: {
+                    compress: true
+                }
+           }
         }
     });
 
@@ -215,13 +226,15 @@ module.exports = function(grunt) {
             grunt.task.run('shifter');
             grunt.task.run('jshint');
             grunt.task.run('uglify');
+            grunt.task.run('less');
         }
     };
 
 
     // Register NPM tasks.
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-contrib-less');
 
     // Register the shifter task.
     grunt.registerTask('shifter', 'Run Shifter against the current directory', tasks.shifter);

package.json

@@ -5,6 +5,7 @@
     "devDependencies": {
         "grunt": "0.4.5",
         "grunt-contrib-jshint": "0.11.2",
+        "grunt-contrib-less": "1.1.0",
         "grunt-contrib-uglify": "0.9.1",
         "shifter": "0.5.0",
         "uglify-js": "2.4.22"

theme/bootstrapbase/README.txt

@@ -23,7 +23,7 @@ accessibility and Search Engine Optimization (SEO).
 
 *less CSS
 Less CSS is a Object Oriented way of writing CSS code. All Less CSS files
-for this theme are stored in the /less folder. A developer can use recess
+for this theme are stored in the /less folder. A developer can use grunt
 to generate the CSS files in the /style folder. For more
 information read /less/README
 

theme/bootstrapbase/less/README

@@ -1,33 +1,16 @@
-About bootstrap in Moodle
--------------------------
-If you want to make changes to the .css generated from these .less files then you
-need to use a LESS Compiler. Details on specific compilers and how to install them
-can be found at http://docs.moodle.org/dev/LESS
-
-At present, recess is the official tool for developers to compile LESS in to CSS, as
-other tools give different results in the generated CSS.
-
-Once recess has been installed you can compile and compress the LESS in to CSS using
-the following commands from the "theme/bootstrapbase/less" directory:
-
-For the main Moodle styles:
+Compiling LESS
+--------------
 
-    recess --compile --compress moodle.less > ../style/moodle.css
-
-And for the subset of styles of interest to the TinyMCE editor:
-
-    recess --compile --compress editor.less >  ../style/editor.css
-
-You can add --watch to make sure it updates every time you make a change.
+If you want to make changes to the .css generated from these .less files then you
+need to use a less compiler to build your changes. The supported way to achieve this
+is using grunt.
 
-If the compilation is failing and you're not getting any useful error message, try using lessc instead i.e.:
+See https://docs.moodle.org/dev/Grunt for details of how to install grunt.
 
-    lessc moodle.less
+Once grunt is installed run the 'less' task:
 
-This is the same tool that's getting called by recess, but the errors seems better if you go direct.
+ $ grunt less
 
-More information
-----------------
-Additional information about the Moodle bootstrap base theme can be found at
-http://docs.moodle.org/dev/Bootstrap
+And the css files will be compiled.
 
+For further info see: https://docs.moodle.org/dev/LESS

theme/bootstrapbase/readme_moodle.txt

@@ -12,8 +12,7 @@ To update to the latest release of twitter bootstrap:
 * download the new less files and store them in less/bootstrap
 * Apply change in MDL-42195 (We don't want responsive images by default).
 * Apply change in MDL-48328 (We need to reset the width of the container directly, in ./less/bootstrap/navbar.less, using the calculated value found in ./less/bootstrap/mixin.less).
-* regenerate files using recess: recess --compile --compress moodle.less > ../style/moodle.css **
-* regenerate files using recess: recess --compile --compress editor.less > ../style/editor.css **
+* regenerate css files using grunt
 * update ./thirdpartylibs.xml
 
 ** If you want to make changes to the .css generated from these .less files then you