How to use Grunt while continually compressing css / javascript


Tags: javascript,css,gruntjs,grunt-contrib-cssmin

Problem :

I am just getting started with Grunt so please excuse a question which may be dumb:

If I am using cssmin or uglify or any other plugin that alters the appearance of my code:

How do I make it so that the reference in my main.html file stays consistent. In other words, obviously I am going to develop with an uncompressed css file (let's call it style.css). If I am referencing that in my main.html as <link rel=stylesheet src="main.css"> but grunt consistently minfies it to main.min.css it seems like everytime, after I run grunt, I am going to have to go into my main.html and change the link reference (which would be annoying because I have to update git each time too.

I could configure cssmin to overwrite my style.css with the same file name but then it would be almost impossible for me to modify. Is there a way around this?



Solution :

These plugins will help: grunt-useref, grunt-processhtml.


    CSS Howto..

    codaSlider hack - how do I add little triangles overlaying an image

    How to auto resize img group with browser change size?

    how to apply css on only one class?

    CSS Rollovers: how to maintain “hit area” size when hidden image is larger than anchor area

    How does CSS3 flexbox negative-flex work?

    How to load CSS using jquery

    How to change the focus state in CSS to just affect the keyboard and not mouse clicks

    How to put text in the upper right, or lower right corner of a “box” using css

    How to vertically center multiline text with an image on its left?

    How to use css in extjs to modify the “browse files” button?

    how to translate this xpath into css selector

    How to create automatic image gallery slideshow by using HTML,CSS and JavaScript

    How to setup a ASP template

    How can I increase space just above the footer line?

    How do you observe the width of an element in polymer?

    How to change the css of a text input using jquery?

    How to fix the height of this div

    CSS how to align elements inside a div with 2 columns

    CSS - Minus top value how to get rid of the gap below it

    How to lay down elements vertically from top to bottom, and then from right to left, using a clean HTML markup?

    How to remove a div with fade out effect in JavaScript?

    How can I use the CSS pseudo-element :before{ content: '' } to affect an

    How to keep an element fixed top within another element?

    How can I make it so that CSS uses a class only if another is not present on an element?

    How to centre and make responsive a row of divs

    How to extract attribute values using css selectors?

    How to remove vertical scrollbar from iframe inside the page

    CSS: How to create a background cutout using elements (not images)?

    How to change img style inside span in CSS?

    How to minimize the no of css