Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Less task not found error

I recently started using grunt and can't seem to get it working: I installed grunt-cli using npm and also installed a few grunt modules using npm with no issues. I'm trying to compile all the bootstrap framework's less files into one css file but keep getting an error saying the less task was not found. i'm sure everything is where it's supposed to be and I loaded the grunt-contrib-less plugin in the gruntfile. Any idea where I might be going wrong?

My package.json's contents:

{
    "name": "dConference",
    "version": "0.1.0",
    "devDependencies": {
    "grunt": "latest",
    "grunt-contrib-jshint": "latest",
    "jshint-stylish": "latest",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-less": "latest",
    "grunt-contrib-cssmin": "latest",
    "grunt-contrib-watch": "latest" 
    }
}

And my gruntfile.js's contents:

//gruntfile specifying all tasks to be performed

module.exports = function(grunt){
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        //all configuration goes here
        less: {
            build: {
                files: [{
                    expand: true,
                    cwd: "components/less",
                    src: ["*.less"]
                    dest: "css/main.css"
                }               ]
            }
        }

    });

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



};
like image 794
user2094257 Avatar asked Oct 29 '25 08:10

user2094257


1 Answers

I made Gruntfile.js as following.

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        less: {
            build: {
                files: {
                    'css/main.css': 'components/less/bootstrap.less'
                }
            }
        }

    });

    grunt.loadNpmTasks("grunt-contrib-jshint");
    grunt.loadNpmTasks("grunt-contrib-uglify");
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks("grunt-contrib-cssmin");
    grunt.loadNpmTasks("grunt-contrib-watch");
};

And running "grunt less" on project root folder was successful. After successful running of "grunt less" command, main.css was generated under css folder.

Project structure is:

grunt-test-project

  • components/less
    • mixins folder
    • all other bootstrap less files
  • css
  • Gruntfile.js
  • package.json

Please try it on your side and let me know the result.

like image 98
Yakov Karavelov Avatar answered Oct 31 '25 00:10

Yakov Karavelov



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!