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


Tags: css,less,gruntjs,windows-7-x64

Problem :

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.



Solution :

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.
  }
}

    CSS Howto..

    How can I create this specific layout using html and css?

    How to vertically center div in floated div?

    How to call css styles in specific page in HTML?

    How do I change the display position from absolute to relative?

    how to create a fullscreen website design?

    How to use javascript to trigger a css event for a collection of elements that have the same class/name

    How can I fix this jumbotron/carousel to be the size of the image?

    How to create a responsive design with CSS only

    Portrait screen with 2 pages but only one of them should show

    How to place text above an element in HTML/CSS?

    Jquery: how to get menu to expand towards the right instead of the left

    How to override a style of a specific Joomla module?

    How to turn off visjs active shadow box?

    How to Customize jCountdown timer which is using css sprite resources to become auto Responsive?

    How to have different size images fluidly respond CSS?

    How do I combine two columns with different formatting?

    How to know the correct css selector or group of selector for any html element quickly?

    How to build a dashed line that has borders on both sides, using CSS

    How do I position a Silverlight Control

    How to display first tab by default in css?

    How can I override the CSS ul menu for the JavaScript autocomplete?

    How to make this slider more fluid?

    How to Fix: iOS drops CSS files when javascript changes DOM

    How to change my online store template in dbdirector ecommerce platform

    CSS and Javascript too tightly coupled (CSS is not just presentation but is used by UI and JS), how to improve this?

    How to position two divs one on each other at the bottom of parent?

    How do I add line-height to a ?

    How to set the CSS styles of the image to fit bootstrap width
    How to change the label color by its id with css?
    Why don’t my box borders surround the floats inside them without this CSS fix? (And how does the fix work?)
    How to change custom icon image on hover of the link next to it?
    How to use a hover css pseudo to apply only to the top level element?
    How is a CSS “display: table-column” supposed to work?
    How to make a CSS animation/transition play at a fixed speed, not a fixed duration? [duplicate]
    How to make a pure CSS div with a gradient background?
    How do I vertically align multiple text next to an image with CSS?
    Background hover showing in CSS