CODEWITHSUNDEEP
javascriptcssnode.jsgruntjsless
wickywills
wickywills

Reputation: 4204

Compiling less files with Grunt

Complete newbie to Grunt here, but basically I am trying to use Grunt to do a couple of things to start with. Minify a JS file, and compile multiple LESS files into one CSS file.

The javascript bit works i.e. my file custom.js compresses to a file called custom.min.js, however the LESS bit doesn't work at all (no errors, just doesn't compile). Can anyone see why this is?

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
        src: 'scripts/custom.js',
        dest: 'scripts/custom.min.js'
      }
    },
    less: {
      build: {
        src: 'less/*.less',
        dest: 'style.css'
      }
    },
    watch: {
        files: ['scripts/custom.js'],
        tasks: ['uglify','less']
    }

  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-less');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

Upvotes: 2

Views: 7406

Answers (3)

Santiago Rebella
Santiago Rebella

Reputation: 2449

you should include the call to the less task inside your watch statement, something like:

         watch: {
            livereload: {
              options: { livereload: true },
              files: ["public/css/main.css", "public/css/less/*.less", "public/html/*.html", "public/js/*.js"]
            },
            scripts: {
                files: ["public/js/*.js"],
                tasks: ["jshint"]
            },
            less: {
                files: ["public/css/*.less", "public/css/less/*.less"],
                tasks: ["less", "csslint"], 
                options: {
                    nospawn: true
                }
            }
        },
        less: {
            development: {
                options: {
                    compress: true,
                    yuicompress: false,
                    optimization: 2,
                    cleancss:false,  
                    paths: ["css"],   
                    syncImport: false,
                    strictUnits:false,
                    strictMath: true,
                    strictImports: true,
                    ieCompat: false    
                },
                files: {
                    "public/css/main.css": "public/css/main.less"
                }
            }
        }

and then also just register the default task with watch:

grunt.registerTask("default", ["express", "open:dev", "watch"]);

Upvotes: 1

ylerjen
ylerjen

Reputation: 4249

You don't call the LESS task at all. To call it add the taskname in the registered task

grunt.registerTask('default', ['uglify','less']);

See the documentation to learn more about task registration: http://gruntjs.com/creating-tasks

EDIT:

I saw you created a watch task, so if you don't call the LESS task manually but by watching files, be sure to have executed grunt watch in a terminal (and not closed the terminal windows) before modifying the files

Upvotes: 2

lante
lante

Reputation: 7326

Move all your less files to one file like this:

Somefile.less:

@import '../bootstrap/bootstrap.less';
@import 'site.less';

And try the following:

less: {
  build: {
    files: {
        'style.css': 'less/somefile.less'
    }
  }
}

Upvotes: 1

Related Questions