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..
I would use a pseudoelement and CSS to add an arrow without an image: http://jsfiddle.net/blineberry/fqKHK/ The CSS with the stock CodaSlider would look like: ul.navigation a.selected { position: relative; background:...
inner- display: inline; max-width: _%; max-height: 100%; outer- white-space: nowrap; and position set learn how from http://www.alistapart.com/articles/conflictingabsolutepositions ...
use higher specificity #inchannel li.ichn0{ width:179px; height:123px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font-size:17px; color:#999999; background:url(img/green.png) no-repeat 8% 18%,url(img/log_in_body.png),url(img/invite_button.png) no-repeat 60% 60%; } ...
I don't think that there is any way to do this using pure CSS. No matter how you slice it, you're trying to target the parent of the hovered element,...
In an article from Opera on flexbox, negative flex is described as such: #first { flex: 1 1 400px; } #second { flex: 2 3 600px; } #third { flex:...
I don't get why you can not just insert the <link/> element in the <head/> section, but here's a jQuery snippet: $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'your stylesheet url') );...
I'm alittle unclear on what you're trying achieve with the overall appearance however I would recommend looking to the :active selector. When tabbing onto a link, the :focus selector is...
<div style="position: relative; width: 250px;"> <div style="position: absolute; top: 0; right: 0; width: 100px; text-align:right;"> here </div> <div style="position: absolute; bottom: 0; right: 0; width: 100px; text-align:right;"> and here...
Here is a solution using display: table-cell and display: table-row. I revised your markup a bit to only show the relevant and important parts, so you might have to tweak...
You can add the attribute buttonConfig to the Ext.form.field.File item and then use the standard attributes to a button. For example, this might work: var item = Ext.create('Ext.form.field.File', { buttonOnly:...
You can concatenate multiple class selectors in CSS to translate your XPath and, and then use pseudo-class :not() to translate XPath not(), something like this : div.cpthead.cptbulkhead.loaded:not(.overloaded) ...
This should fix the issue you're having with the first image not coming in correctly. Keep the HTML and CSS the same. Change the JavaScript. Here I use window.onload, but...
I think learning a little bit more about how master pages work would probably serve you well. This is a tutorial from the ASP.NET site and looks like it should...
Add this CSS to your css file .nohistory {margin-top: 20px;} or in html: <footer class="nohistory columns" style="margin-top: 20px;"> ...
There is a certain technique abusing CSS transitions and listening for the transitionend event. There are only a very few cases where it's really required (like if you want to...
Using .find() (or .children()) should do it: $('.OnHandClass').dblclick(function (evt) { $(this).find(":text").show(); }); jsFiddle example .next() searches the immediate sibling and .closest() looks up the DOM, so neither of those should...
You have a classic equal height column problem. Here is just one of the many links to show you how to accomplish what you want: http://abcoder.com/css/css-equal-height-columns/
I've not seen this style of grid position before. What so ever. Do this: .span3 { vertical-align: top; } ...
use margin-top:-10rem instead of top:-10rem and use z-index:999 or something bigger than the div on the top ( the div before .relative ) has ( in this example top has...
If you change the writing mode, you can get the columns module to do what you want: http://tinker.io/9f846 ul { columns: 10em; direction: rtl; } li { direction: ltr; }...
There are two ways you can achieve this: CSS3 animation or jQuery animation. CSS3 Animation In your CSS document, add: .list { opacity: 1; -webkit-transition: opacity 1000ms linear; transition: opacity...
The ::before and ::after pseudo-elements actually prepend/append a child node to the element, so this will not work on any element that cannot contain child nodes. It would be (roughly)...
I think I figure it out by jQuery and it works perfectly. $(function(){ $(".wrapper").scroll(function(){ console.log($(this).scrollTop()); $(".blur").css("top", (-20+$(this).scrollTop())+"px"); }); }); $(function(){ $(".wrapper").scroll(function(){ console.log($(this).scrollTop()); $(".blur").css("top",...
You can use the :not() pseudo-class: button.current:not(.inactive) { background-color: #000; } button:hover:not(.inactive) { background: #0007d5; } jsFiddle Demo...
You can vertical align the box using 3 lines of CSS. .splashcontainer { position: relative; top: 50%; transform: translateY(-50%); } Next make sure the <html> and <body> elements are 100%...
If in Perl using WWW::Selenium then it's simply: my $val = $selenium->get_value("css=input[name='myInput']"); If using another language then the Selenium library should support a get_value function/method....
Try: overflow: hidden; on your iframe. #content iframe { overflow: hidden; } ...
As per i understand may be that's you want http://jsfiddle.net/VRLNJ/2/...
Use a space, just like you've used twice. A space means "somewhere inside": #ranking li span.awa img { border-style: none; } span.awa.img, my the way, means a span with two...
Check the order of loading you files into the merge script, like others have mentioned. I found Sprockets to be good tool for dependency management. It keeps track of changes...