Enable source mapping in LESS files during grunt dev

[darylhedley]

• Due to the way our LESS files are compiled during build we concat the files and run LESS over the adapt.less file. However this disables sourcemapping and can be harder to debug.
• Running grunt dev should run a slightly different approach of pushing all the theme files into an import that is put at the top of each less file before running less over these files

[darylhedley]

Due to the way we push all the LESS files we're unable to look at this until sourcemapping in grunt-contrib-less supports multiple files.

[salali]

Setting this to a bug to highlight the fact that not having source mapping makes doing anything custom in the theme a real pain.

[oliverfoster]

The only way I can manage LESS sourcemapping is by smashing a bit of grunt and a bit of gulp together in the Gruntfile.js. It is however, remarkably effective:

grunt.registerTask('less-sourcemaps', 'Aligning sourcemaps', function() {
        var _ = require('underscore');

        var gulp = require("gulp");
        var concat = require("gulp-concat");
        var less = require("gulp-less");
        var sourcemaps = require("gulp-sourcemaps");

        return gulp
            .src([
                    'src/core/less/*.less',
                    'src/menu/**/*.less',
                    'src/components/**/*.less',
                    'src/extensions/**/*.less',
                    'src/theme/**/*.less'
                ], { base: "." })

                .pipe(sourcemaps.init())

                .pipe(concat( "adapt.css" ))

                .pipe(
                    less()
                )

                .on('error', function (error) {
                    gutil.log(gutil.colors.red(error.message))
                    // Notify on error. Uses node-notifier
                    notifier.notify({
                        title: 'Less compilation error',
                        message: error.message
                    })
                })

                .pipe(sourcemaps.write("./") )


                .pipe(gulp.dest("build/adapt/css")).on("end", function () {
                     //redo source map paths so that they end up in the right place in the browser

                    var mapFile = grunt.file.readJSON("build/adapt/css/adapt.css.map");
                    delete mapFile.sourceRoot;
                    _.each(mapFile.sources, function(item, index) { 
                        mapFile.sources[index]  = item.replace(/\\/g, "/").replace(/src\//g, "" );
                    });
                    grunt.file.write("build/adapt/css/adapt.css.map", JSON.stringify(mapFile, null,4));

                });

    });
...
grunt.registerTask('dev', ['jsonlint', 'copy', 'handlebars', 'bower', 'requirejs-bundle', 'requirejs:dev', 'create-json-config', 'less-sourcemaps', 'watch']);
...

Using these devDependencies in the package.json:

    "gulp": "^3.8.10",
    "gulp-concat": "^2.4.3",
    "gulp-less": "^2.0.1",
    "gulp-sourcemaps": "^1.3.0",

What do we think? PR or no PR?