I'm using SquishIt and have a .less file which I add to a CSS bundle with the following line
.Add("~/content/styles/dev.less")
This compiles as dev.less.debug.css when I build the solution, however I'd like to be able to just save the .less file and it automatically compiles the css (so I see the change instantly in my browser as I would with a traditional CSS file).
I have looked at a number of extensions to achieve this (such as LessExtension and LessCssForVisualStudio) but these require the file to be added to the bundle as dev.css rather than dev.less. Mindscape Web Workbench does not compile LESS files in its free version so I do not know if it also requires dev.css.
I can't change the link to the file as the project will be worked on across teams, where some won't install an extension and will be happy to build the solution to compile.
Is there and extension that automatically compiles LESS that is built to work with SquishIt?
If you use it on non-production site, I would suggest using less.js (It will render css with js on client-side).
Squishit uses dotless under the hood, so you could use that directly.. either set it up so that you request the less file and a handler returns CSS or you can use the exe to compile on build and also the watch mode... I'm not sure what's best for you, but you can find more information on the dotless wiki (https://github.com/dotless/dotless/wiki/Using-.less)
Web essentials does this job perfectly and its free.
http://vswebessentials.com/
Related
I'm dealing with an ASP.net project that's maintained by a couple of people via git.
We're looking to minify the CSS files at build time and have checked out the bundle and minify addon however this doesn't appear to offer an option for the minified code to be regenerated from the source files at each build.
Is there a better way for us to minify our source css files on each build?
Understanding your question right, you want to concat and minify your css sources and time you build or deploy.
I do not now how your build stack look like, so I can guess only, but using css files I would use something like grunt or gulp.
On my self I prefer gulp. It is easy to create a task which concat, minify or also auto prefix your css files.
Once your task is created you can add it to your build script, task or bash.
This way works also fine with CI like wercker or travis.
You can use Microsoft Ajax Minifier after build.
Explained here: https://www.codeproject.com/Articles/182690/Minify-Javascript-and-CSS-using-Microsoft-Ajax-Min
Or if you have integration with Jenkins then after build step you can call bat file and run minification on folder of your build directory.
For multiple technology projects, You can create exe based on Microsoft Ajax Minifier and after all builds are done, Run this exe using bat command from Jenking only to minify all the css and js files.
I have integrated this with PHP, ASP.Net and Silverlight code after build of these projects.
One better way is to make your file to online file (like CDN link github can help you in that) and next rather then adding all those css add that link which will be saving much of the build time.
Try to minify your file.
Try to make an online link file.
I'm running JetBrains ReSharper 8.2 on a project that uses SASS for styling.
I compile my seperate scss files into one file "common.css". This file is not included in the project, but gets compiled on build on the server (grunt + compass takes care of this).
I don't want to include this file, but only my SCSS files in the project. This however causes ReSharper to report a lot of errors ("Unknown CSS class"...) in my views because the file isn't included.
Is there a workaround for this (without disabling css errors in settings)?
I've tried the "ReSharper.ExternalCode" extension (https://resharper-plugins.jetbrains.com/packages/ReSharper.ExternalCode), but without any luck.
Sadly, there isn't a workaround for this. ReSharper doesn't know about SCSS files, and doesn't know anything about files that aren't included in the project, so it can only assume the CSS classes are undefined.
The external code plugin should work and allow ReSharper to process the resulting css file. However, I'm not sure how flexible it is - I think it needs everything to be configured before the solution is opened. That is, it only tells ReSharper about the generated file when the solution is being opened. Configuring things while a solution is open probably won't be reflected immediately (but I haven't tried it). Similarly, it doesn't notify ReSharper of changes to the file, and I don't think that ReSharper sets up any monitoring. So if the file isn't available when the solution opens, or changes while it's open, ReSharper won't have correct information. I'd try and configure it, close the solution and reopen.
I am working on a rails app and I would like to include some custom css files inside my rails application. I would like to separate out the css from bootstrap and the css that I wrote. Could I just put the custom css files inside vendor/assets/bower_components folder in my own css folder?
Is there anything else that I need to do for my css files to be picked up?
There are several ways you can achieve bower functionality in a Rails application.
Although having said that, I'm not sure about your wanting to use it on your custom.css file. The file itself will work just as well if you keep it in your app/assets/stylesheets folder, which will concatenate it to the asset pipeline
Bower-Rails
You'll may wish to consider using bower-rails, which seems to just give you the ability to use bower within your Rails app. This seems to be specifically for helping you keep your dependencies up to date:
Dependency file is bower.json in Rails root dir or Bowerfile if you
use DSL. Check out changelog for the latest changes and releases.
RailsAssets
Another amazing piece of functionality we found recently is "RailsAssets"
This works really well (we use it in production), as it keeps your dependent assets completely up to date. You can use it very simply:
#Gemfile
source https://rails-assets.org
gem 'rails-assets-BOWER_PACKAGE_NAME'
#app/assets/javascripts/application.js
//= require BOWER_PACKAGE_NAME
When running bundle update, this will then give you the ability to update your assets in line with your app!
TL;DR: IItemTransform isn't getting executed when a minified file already exists in the same folder as the original (non-minified) file.
Problem explanation
I'm having this issue mainly because of CSS relative image references. If you used IItemTransform with Javascript files, the same applies.
This is what I'm using:
I'm using Visual Studio with Web Essentials addin to have support for LESS files
I'm writing LESS files and have Web Essentials addin automatically minify files on save
I'm also using bundling and minification in my project
When creating CSS bundles I'm using CssRewriteUrlTransform to make CSS URLs absolute (i.e. background images) so that images still work after bundling several CSS files together
Nothing unusual here so far, but it doesn't work.
What seems to be the problem?
The way that bundling and minification works is it tries to avoid excessive processing. This means that when a minified file exists in the same folder as the original one it won't run its own minification and rather serve existing file.
This would be all right as long as it would at least run transforms over those preexisting minified files. But it doesn't. So I end up with relative URLs in a bundle which breaks pretty much all those resources.
Workarounds
Always provide absolute paths in LESS files
Disable file minification on save in Web Essentials settings
Refer to minified files when defining my bundles because they don't have a minified version (*.min.css doens't have a *.min.min.css) so minifier actually picks up the file and minifies while also running transformations over it.
From the standpoint of my development process and tools used (and configured the way they are) this looks like a bug. If those files would be the result of the same minification process this wouldn't be a bug at all as transformations would be executed when minification would execute. It's true that such functionality doesn't exist and likely never will as app would need write permissions to make it work. Outcome: this is a bug. Existing minified files should be processed through transformations before being cached.
Question
Is it possible to somehow convince bundling and minification to either:
not use existing minified file versions
run transformations over existing minified versions
Have you considered using Grunt? http://gruntjs.com/
It has a learning curve, but, the information pool is huge. The issues that you are having with web essentials wouldn't be a problem with grunt.
I'm using it in VS, now, to minify, bundle and transpile both css and javascript as well as reorganize files into a deployment directory. Once you've set up a directory structure, a grunt file could very easily be reused.
With the add-on in VS (linked, below), you can right click on the grunt file and select the grunt tasks to run from a popup menu.
https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff
Grunt "tasks" as they are called can be created by downloading various plugins i.e. https://www.npmjs.com/package/grunt-contrib-less.
I have never used LESS or web essentials, so please take this post for what it is worth (not much.) Could you add a pre-build command to simply delete the old files, then do a rebuild when you need to update the CSS.
I was hoping to find a way to create my css files from my less files using web essentials or something of the sort. When create a new less file it will create the css to match, however on some of my older files I removed the css files permanently and I am looking to readd them.
grunt-contrib-less is a great solution for continuously converting LESS to CSS, as is assemble-less (I'm a maintainer of the latter).
So I was able to answer my own problem. When using VS2012 Web Essentials your .less file will not compile and create the matching .css and .min.css if errors exist. My errors were occurring because some of my variables were not recognized due to the fact that I wasn't dragging in the #import of the my .less file that contained these variables. I took a quick look at the libraries you mentioned and they did look pretty cool. Thanks for the answer.
It's important to say that if you installed the Web Essentials plug-in you must restart the Visual Studio, otherwise the .min.css and .css will not be generated, either.