I want to minify Razor views (.cshtml files) on compile-time.
Currently, I use WebMarkupMin, but it minifies the HTML on runtime,
So, how can I minify .cshtml files on compile-time?
I built a very trivial and easy to set up and easy to understand minifier for Razor and ASP.NET MVC 5. It just replaces multiple spaces with one, but that often has the biggest impact while having the least amount of side-effects.
Have a look if you're interested: https://github.com/tompazourek/RazorHtmlMinifier.Mvc5
Usually, it's recommended to use gzip encoding to minify HTTP responses, but I found out that if you minify the HTML before gzipping, you can still get around 11% smaller responses on average. In my opinion, it's still worth it.
You can choose to minify your files at anytime (build-time) using the method outlined in this post: https://debugandrelease.blogspot.com/2018/11/automatically-minifying-cshtml-files-in.html
It makes use of a task runner to create minified .cshtml files. In development, you will work with the unminified versions of the files, but in higher environments, the minified .cshtml files will automatically be used. Please see the post for more details on how to set it up, or view the sample github sample repository linked at the end of the post.
Related
I have written a static site and want to use github-pages to host it.
The source code is ready, it involves html page, css files, js files, images ... I have linked the resource in the html page.
But the problem is the page loading speed is rather slow, it takes a lot of time loading all the above resources.
So I want to optimize the resources in my page. I know there're small pieces of npm modules doing different jobs for different resources. But it costs me ages to go through all the document for these modules and set up a build job myself.
So I'm wondering if there're already some ready to use solution which I can immediately adopt, my requirements is simple:
minify images, and convert image to base64 and input them in html page
minify js, and concat them all together
minify css, and concat them
minify html
Every project has its own requirements, its own folder structure, etc, so you'll want something customized for your setup. But this is easy to set up once you know how. For example you'll be able to do this with Gulp after a little study. Read https://css-tricks.com/gulp-for-beginners/, then use gulp-imagemin gulp-clean-css, gulp-concat, gulp-uglify, gulp-htmlmin, and probably gulp-rename
I'm using rails with compass.
When using rails without compass, rails has a css per each controller, which contains things that are only relevant to the views in that controller.
I couldn't get the same behavior with compass, which resulted in having a big monolithic file instead of separate files per controller.
What is the recommended approach to solving that problem?
Rails (since 3.1) does create a css file per controller but it's only for practical code separation, all code assets get compiled into one master file per format (.css, .js..), and this is the best practice 90% of the time.
If you want to use this approach with SCSS or SASS code, just change the file extension to .css.scss or .css.sass (ie: mycontroller.css.scss)
If you want to separate the compiled files per controller (you probably don't need it, so i'd advise that you understand the asset pipeline before doing it), you'll have to implement the custom behavior yourself. take a look here http://guides.rubyonrails.org/asset_pipeline.html
I'm considering using less in an upcoming project but have been trying to figure out the best way to work with it while in development.
Usually when developing a site I'll write my html and css then start testing it in the browser, see how it looks, refine, reload, and repeat the whole process until I'm happy with how everything looks.
A crucial part of the process is using the Inspect Element feature in the browser to identify the piece of CSS I need to change. Usually just by looking at the line number I know exactly where to go in my CSS file.
But if I use Less (or any other method of combining/compressing my CSS) it makes the line numbers useless. I know I could use Find to search for the section of code but line numbers are much faster.
This is especially true when working on a project that involves other developers or large CSS files.
I just wondered how others deal with this, or maybe there's a better process?
Minified CSS really should only be going out to the production version of your site. When you're performing tests/changes etc, this should all be done in some test or development version of your site in a secondary server area where you can have the line-numbers version of css available. The same would go for JavaScript. On the production viewable copy, you want it minified. In development, you don't.
In any event, you should always have 2 copies of your css. The first copy is the primary source copy that is your development copy. It has all of your properly formatted styles with line-breaks in it. The other is the very latest minified version of your css that went to production. This will allow you to switch between the 2 files rapidly in the event that you need to work something out, assuming your site uses some sort of templated delivery (layout pages, master pages, or whatever).
The minified version will only be useful in the final delivery. All other needs should use the master copy. It might not be a bad idea to put a configuration in server-side portion of your site that determines what style sheet to use. That way you can simply change a configuration setting and go into a "debug" mode.
I agree with Joel - that's how I handle it. A build script minifies the CSS (and JS) before each release is FTP'ed to production. I just have a switch in PHP like:
if ($config->prod()) {
// incldue the minfied css
} else {
// include all the original files
}
Personnaly, I use an ant build script to make a production version:
it "condense" multiple css files in one
then it minify them with YUI compressor
same for scripts
(page recomposition to point to the newly generated files)
this way you divide your http request for those files, and gain some bandwith from 30% to 70% i'd say. depends on gzip also.
in my case, the dev version have:
18 css weighting 178ko
reduced down to 1 css at 96ko in the production version
I personally use tools to minify and inject the CSS into the browser each time i save my Less file. So i see each change immediately. This way it's pretty clear what just happened. I don't need the referencing line numbers that much any more.
I recently started using source maps, to see the correct file and line numbers (of my less files) when inspecting CSS in the browser again. I think that is what you are looking for. I personally don't need this extra fanciness that much.
my scenario:
large amount of JSP (about 3000)
not too much css files (about 100)
Today I have a lot of bundles that includes a couple of css files, as needed.
Then the jsp includes: or the bundles or the css files.
Is Jawr the best choice for me?
How do you handle you css files?
You can either bundle your web resources on the runtime (using a servlet/filter) or buildtime (maven plugin or ant). There are several tools which help you to do that. I will just list some of them:
Jawr
JSO
wro4j
Jawr can be your best choice as long as it does exactly what you need.
Disclaimer: I'm a member of one of these project, however this answer is not biased.
We have a handful of ASP.net pages that include more than 50+ lines of javascript specific to that page. We'd like to minify that javascript during our CruiseControl build process.
We already use the YUI Compressor to compress our full javascript and css files. But we can't figure out how to do the Inline javascript.
Is there an MSBuild task to spin through asp.net pages and minify the javascript?
There is an interesting blog and NuGet package called undleMinifyInlineJsCss to handle this
http://weblogs.asp.net/imranbaloch/archive/2012/07/25/bundling-and-minifying-inline-css-and-js.aspx
I would extract javascript into methods and move them into .js files. and call the functions instead with the relevant parameters from the pages. Not a complicated procedure and much easier to maintain (less code). You can also benefit from client side content caching.
Also: Not sure if it helps but Google's Closure looks really good.
http://code.google.com/closure/
Compression options: http://code.google.com/closure/compiler/docs/api-tutorial3.html
Available as Java executable or web service.
You won't be able to do this without custom coding. Easiest way would probably to create a PreBuild step in the msbuild file which spits through all the .aspx files and regexes all the javascript out. Then use YUI to minify the content and replace the original by the minified version.
You might also want to check MbCompression which compresses alot including your asp.net pages, although I don't believe it also minifies the inline javascript.
It is possible to bundle and minify inline javascript. With templated Razor helpers you could create an extension method like the one below:
public static MvcHtmlString AddScriptSource(this HtmlHelper helper, Func<dynamic, HelperResult> source, string key)
{
string scriptSource = source(null).ToHtmlString();
// Cache scriptSource here
return MvcHtmlString.Empty;
}
Which you would use like this:
#Html.AddScriptSource(#<text>$(document).ready(function() { $('h1').text('The current controller is #ViewContext.RouteData.Values["controller"].ToString()'); });</text>, "test")
I created a bundler and minifier around this a few weeks ago at:
https://github.com/philpeace/CodePeace.StrawberryJam
ASP.NET now has bundling and minification built in as of MVC 4 (it is also available for web forms and web pages as well)
http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification