CODEWITHSUNDEEP
csslessgruntjswindows-7-x64
mtpultz
mtpultz

Reputation: 18328

How to output compiled CSS files to a different production folder using grunt and grunt-contrib-less

I've found this solution to building less using the grunt-contrib-less package, but I can't figure out using grunts configuration tasks (http://gruntjs.com/configuring-tasks) how to output the *.css files to a specific destination. I tried dest: "C:/my_folder/". Any suggestions?

less: {
    options: {
        paths: ['css/base']
    },
    // target name
    src: {
        // no need for files, the config below should work
        expand: true,
        cwd:    "css/base",
        src:    "*.less",
        ext:    ".css"
    }
}

I've also tried using the example from grunt-contrib-less but I can't figure out how to get it to a) just choose all the files and build them into the same file name with a different extension (ie. .less to .css) like it does above b) I don't understand the options JSON attribute (even reading the docs)

less: {
  development: {
    options: {
      paths: ["assets/css"]
    },
    files: {
      "dev/css/*.css": "dev/less/*.less"
    }
  },
  production: {
    options: {
      paths: ["assets/css"],
      cleancss: true
    },
    files: {
      "prod/css/*.css": "dev/less/*.less"
    }
  }
}

At the end of all this I'd really like to have a combination of both of these that took all my less and compiles it to css for development and finally css for production which is minified.

I've thumbed through http://net.tutsplus.com/tutorials/javascript-ajax/meeting-grunt-the-build-tool-for-javascript/ and http://www.integralist.co.uk/Grunt-Boilerplate.html without much luck understanding Grunt.

Upvotes: 0

Views: 2287

Answers (1)

Slawa Eremin
Slawa Eremin

Reputation: 5415

You need to specify dest property. the best way to specify sources of less files is to use relative path.( relative Gruntfile.js )

less: {
  options: {
    paths: ['css/base']
  },
  // target name
  src: {        
    expand: true,
    cwd:    "css/base",
    src:    "*.less",
    ext:    ".css"
    dest:   "build/"   // Destination for your compiled css files.
  }
}

Upvotes: 2

Related Questions