Until recently I was using Chirpy VS plugin for mashing css files. But I have found it doesn't change css url relative paths during mashing and it is a problem for me now (as I mash css files which access local images but are placed in different directories).
Is there any tool which mashes css files and changes urls relative paths accordingly?
You should check into the Yahoo tool for JS / CSS compression. There is a codeplex project which has Visual Studio post build support. I have tested it explicitly for the scenario you're asking about (relative paths) but it's worth exploring.
YUI Compressor for .NET
I have found this workitem which proves there is a bug in Chirpy.
Also it looks like CrusherModule will solve my problem.
Update. Finally I used CrushIt
Related
I have a requirement in my project to version image files which are called from css. I have been researching on 'how to' and found our very own stackoverflow.com is versioning images. I found below code from http://cdn.sstatic.net/stackoverflow/all.css
background-image:url("../Img/sprite-herobox.png?v=d173774f3a9f")
Can somebody tell me how it is done?
CSS file is not probably a static file but a php/asp file, just with (.css) an extension and css code within
A skin.css file has been updated on a DotNetNuke website, but the updated change to the file has not yet come through on the main css file.
Tried clearing the cache within DNN and no luck...
I'm not overly familiar with DNN and how it works, but isn't it supposed to get merged into the rest of the CSS files with the DependencyHandler.axd. This does not seem to have happened.
Anyone any ideas?
When you say it isn't showing up in the Main.CSS file, I am going to assume you are using the CDF functionality in the platform. If so, you can go to the Host/Host Settings page, and look for the Client Dependency Framework portion of the settings.
In those settings you can "increase" the version number, which should cause the files to be regenerated, you can also turn off CDF to allow DNN to just load the CSS and JS files normally which generally makes debugging things a little bit easier.
Bounty: Bounty given to whoever share a standalone command-line CSS minifier for Windows (that is, run just like JSMin and CSSTidy, but actually minifies rather than 'prettify' and remove properties
Using Visual Studio 2010 Post-Build Events, I'm currently working to reduce our CSS/JS framework by merging and minifying the files into .min for production when building the solution/project.
For the JS I'm using JSmin.exe while for CSS, CSSTidy.exe
All okay for JSmin, but CSSTidy is removing all IE7 *property hacks and other properties used by display-table.htc (-dt-display:). If I use the --preserve_css=true setting, it keeps the comments (which I don't want) and the *property have the * stripped out (which I want).
Example:
.row-fluid .span1 {width: 6.382978723%; *width: 6.329787233638298%;}
Becomes (note it added linebreak as well):
.row-fluid .span1 {
width:6.382979%;
width:6.329787%
}
The question made here is what I'm looking for BUT the answer was given for HTML Purifier (which I don't use) instead of a CSSTidy alternative.
So the questions:
Is it possible to make CSSTidy NOT remove the IE7 hacks nor other invalid properties (which I actually use)?
Is there any other standalone/command-line CSS compressor (specially one which actually minifies rather than just tidy it)? (bounty for that)
Obs.:
The VS solution is TFS shared, can't make all devs install YUI or whatever other framework which isn't standalone, nor other languages frameworks like Ruby/PHP. Currently the jsmin.exe and csstidy.exe were the best since I just added both to the solution and call them on post-events.
After spending all Friday searching and not finding a good tool, today I gave a new shot and finally found a tool that minify both CSS and JS.
The name isn't much straightforward, that's why was hard to find: Microsoft Ajax Minifier
While asks for install, I just copied the folder contents to the project and worked like a charm.
For those who want to use it as Post-Event build:
Considering you have a .js folder and you want to concatenate and minify all .js files that end with .debug.js.
type "$(ProjectDir)\Scripts\*.debug.js" | "$(ProjectDir)tools\AjaxMin" -JS -comments:none –global:jQuery,$ -out "$(ProjectDir)\Scripts\myProject.min.js" -clobber
$(ProjectDir) is the project folder;
type is a cmd.exe command for displaying the contents of one or more files. So I order to get the contents of all *.debug.js files and leave in the STDIN;
Invoke AjaxMin.exe (no need for the .exe that I copied to my \tools\ folder;
pass arguments as needed with -argName:argValue;
use -out and a pathname with a file that will be outputted;
add -clobber to overwrite if file exists
Now everytime I need to update my css and js files, I re/build the project and voilá, minified CSS and JS.
The LESS docs here
http://lesscss.org/#usage
say: "Make sure you include your stylesheets before the script."
However, BlogEngine.net seems to make that impossible by rewriting all the links to *.js file and putting them before the style sheets.
I've tried everything I can think of including putting the files in a subdirectory and using a relative path. I'm very hesitant to mess with the BlogEngine.Net code.
Is there any way to get LESS to work with CSS in BlogEngine.Net? Any way to force the engine to allow me to order the Javascript entry after the *.less reference?
Perhaps you could use the Tracking Script or the "Add custom code to the HTML head section" fields (you can find them in Admin -> Settings -> Custom code).
From what I can see in the code, these fields are rendered in the HEAD section after the stylesheets.
Is there any way to get LESS to work with CSS in BlogEngine.Net?
If you are willing to consider a different approach than using the client side less parser than I recommend trying the design time less parser in either Visual Studio 2012.2 or The Web Essentials Extension in Prior releases of Visual Studio 2012. It allows you to write your less file and have it compiled to css and minified css every time you save. Then you can just reference the output min.css file in your theme.
I am trying to use LESS CSS to write my CSS. I have imported the style.less and less.js file in that order.
Now i wanna extract the CSS that LESS generates.. is there any way i can do that ? i dont want to use the script to generate it dynamically in production. just for development.
You can extract the CSS using the Firebug extension in Firefox. The compiled CSS appears under the menu choice "inline" in the CSS tab.
http://incident57.com/less/ if you're fortunate enough to use OS X, and there's a ruby gem too http://rubygems.org/gems/less although this has been superseded by the node.js implementation installed through npm. Check http://lesscss.org/ for more information.
There's also http://www.dotlesscss.org/ for windows, but not sure how useful it is.
And in 2013 we have:
http://less2css.org/
Seems to work just fine for me. Just copy/paste.
Chances are you'll want to minify your CSS after this, so:
http://cssminifier.com/
For others who'd stumble here, in modern browser you can see it in the LocalStorage. I use Chrome and it's in the dev toolbar under Resources.
In my case we also want to save the css file automatically (we have a tool that generates a template), we can do it easily with javascript.
This returns the generated CSS, just replace it with the right path, as you see it under the Resources tab:
localStorage.getItem('http://domain.com/css/main.less');
Then we send that through Ajax to save it in a css file. When switching to production we remove the less and replace it by the generated css file.