Im looking for the better way to minify those files but im still noob , currently im working with atom editor so im using a plugin called atom-minify whichs minify my css and js but not the html , after this i have to compress the proyecto to upload to the server or it is not necesary ?
Probably best is to use Gulp/ Grunt for such a thing. Here is how to set it up Grunt.
And then use plugin such as Grunt-minified to do your minifications(not sure if minifications is a real word but... :D).
In any case, its better if you use Grunt/ Gulp in your projects as they help you with:
1) Work in as small chunks of CSS and JavaScript as makes sense to you, then concatenate them together for the production website.
2) Compress your CSS and minify your JavaScript to make their file sizes as small as possible for your production website.
3) Optimize your images to reduce their file size without affecting quality.
4) Use Sass for CSS authoring because of all the useful abstraction it allows.
Related
I am trying to optimize my website and have found one issue of minification with the CSS file:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css
I thought of minifiying the script normally using minification tools but no effect. Tried to minify with the help of plugins but there is nothing changed in the Google insights result.
Hence would like to know hwat could be done to minify such css files.
Download the code from the url and then paste it to a local css file. Call the css file on your code after doing minification. You're done.
There are some options you may choose from:
Very Basic: Use an online minifier like https://cssminifier.com/. You can enter the css content in a text area and minify it or you could it's API and
Extend your bulid pipeline to use a plugin that handles css: gulp-cssmin or gulp-clean-css are examples for gulp.
Int this answer you see an easy usage example on how to compile less to css and then minify it. Using less is of course optional.
Some editors like atom support minifying a css file without any plugins. Other editors like Visual Studio Code may need an extension to support that.
Regarding that you want to minify an external file:
I'd try to minify it when building your project and not on client side since the client would likely have to download your script before minifying, making the minifying useless.
I recommend just downloading it, maybe with bower, and then minifying it.
I am using a bought theme for wordpress, which has multiple css and javascript (unfortunately). Something like 5-6 css files and 6-7 js files. I have tried some plugins that combine css/js files but it seems that those plugins make things worse. Actually it combines it okay, but some scripts become messy and even not working. What do you use for combining files in Wordpress? I have tried using: JS & CSS Script Optimizer.
Best, Simon
My suggestion would be to take a look at Grunt.
It is a Javascript Task runner that can be configured to do all kinds of things for you, like compiling Sass & Less, combining Javascript and CSS, minifying and so on. Depending on your experience it might take some time to get into, but in the long run it is worth it. There are a lot of great Tutorials, like this one that will get you started.
Side Note: You might already have a local Dev setup, but if not I strongly encourage you to set one up and only upload concatenated and minified files to Production, as I would not recommend running tasks like this on the live server.
I'm trying to optimize the shopify website and GoogleSpeed Insights recommends me to minify css and js files.
The recommended files are all generated by liquid template generator, so I can't use the popular minify tools available.
If anyone have experience in this issue, please advise me.
Thank you.
If you try to minify such file, you will see an error because of Liquid templating code. Here is a trick which can help you to minify JavaScript files containing Liquid templating code. But this involves little manual labor.
Replace all Liquid templating code with some random unique string. Remember all the replacements. You can use a file diff app to find the difference of a .js.liquid file and the generated .js file so that it will be easy to find where you need to replace. Now you can minify this modified file without any error using any JavaScript minification tool. After the minification is over, you can replace the random unique strings with their corresponding replacements.
I am optimizing a theme for a good PageSpeed Insights score. This trick helped me to minify, combine and compress many .js.liquid files.
I haven't tested this with pagespeed, but it looks like it works html level.
In Business Catalyst I am able to do the following with liquid
{% assign allthedata = {{myData|json}} -%}
{{allthedata | remove: ' '}}
I don't know if this would affect pagespeed, but it is simple enough to try it
This removes all the spaces I have in myData.json which is generated dynamically.
https://prepros.io/
I've been using this app for like 7 months, and I absolutely love it. It can convert and compress your files.
I'm using SASS as my CSS preprocessor, and this app helps me to keep my code clean, here's my way how I make 10 files into one file and compress it:
Create 10 .sass files
Create one more .sass file where you will import all these files into one, I call it main.sass
Use prepros to import all the files into one and then convert it to main.css
So, for debugging I leave the main.css and create another css files called main-dist.css
Use prepros to compress main.css to main-dist.css.
And here you go, you got 2 different css files, one compressed and one not. You can use main.css when creating the website, for debugging purposes and later, when you're done and your website works perfectly, you can use main-dist.css and have your styles compressed.
Oh, btw I don't know how to work with Grunt or Gulp, and I love this app because of it's simplicity
P.S I'm using trial version (it's free) and planning to buy this app as soon as I get some work to do for clients.
Is there some simple way to minify and concatenate bunch of JS files in the same folder + folders in the folder? I only want that, nothing else.
Tried HTML5 Boilerplate ant build script. It is way too complex for this job, though it works somehow. I couldn't figure out how to skip the images optimization part, even when specifying images.default.bypass value in project.properties.
So I need some script to run from a console, so it would minify and concatenate recursively all JS files it can find.
You could use the Microsoft solution http://ajaxmin.codeplex.com/
This can minify CSS and JS. It also has the 'wildcard' option.
Sounds like a job for a Makefile. Most recent versions of make have a built-in wildcard facility like you're asking for. Go with GNU make if you don't know anything about this tool, since its very widely available and well-known.
I am not even sure if something like I want is possible, so I am asking you guys to just let me know if anyone did that before. So, my goal is to when I click on "Publish" website in VS2010, to have all javascript files compressed into one, same with css and then in my layout file change the references from all different js and css files to only those two merged ones. Is that doable? Or maybe it's doable but in more manual way?
Of course the goal here is to have only two calls to external files on the website, but when I develop I need to see all files so that I can actually work with it. I guess I could do it manually before each push, but I'd rather have it done automatically using some script or something. I didn't try anything yet, and I am not looking for ready solution, I am just looking to get to know the problem better and maybe some tips.
Thanks a lot!
This is built into ASP.net 4.5. But in the mean time, you should look at the following projects
YUI Compressor
The objective of this project is to compress any Javascript and Cascading Style Sheets to an efficient level that works exactly as the original source, before it was minified.
Cassette
Cassette automatically sorts, concatenates, minifies, caches and versions all your JavaScript, CoffeeScript, CSS, LESS and HTML templates.
RequestReduce
Super Simple Auto Spriting, Minification and Bundling solution
No need to tell RequestReduce where your resources are
Your CSS and Javascript can be anywhere - even on an external host
RequestReduce finds them at runtime automatically
SquishIt
SquishIt lets you squish some JavaScript and CSS. And also some LESS and CoffeeScript.
Combres
.NET library which enables minification, compression, combination, and caching of JavaScript and CSS resources for ASP.NET and ASP.NET MVC web applications. Simply put, it helps your applications rank better with YSlow and PageSpeed.
Chirpy
Mashes, minifies, and validates your javascript, stylesheet, and dotless files. Chirpy can also auto-update T4MVC and other T4 templates.
Scott Hanselman wrote a good overview blog post about this topic a while back.
I voted up the answer that mentioned Cassette but I'll detail that particular choice a little more. Cassette is pretty configurable, but under the most common option, it allows you to reference CSS and Javascript resources through syntax like this:
Bundles.Reference("Scripts/aFolderOfScriptsThatNeedsToLoadFirst", "first");
Bundles.Reference("Scripts/aFolderOfScripts");
Bundles.Reference("Styles/aFolderOfStyles");
You would then render these in your master or layout pages like this:
#Bundles.RenderStylesheets()
#Bundles.RenderScripts("first")
#Bundles.RenderScripts()
During development, your scripts and styles will be included as individual files, and Cassette will try to help you out by detecting changes and trying to make the browser reload those files. This approach is great for debugging into libraries like knockout when they're doing something you don't expect. And, the best part, when you launch the site, you just change the web.config and Cassette will minify and bundle all your files into as few bundles as possible.
You can find more detail in their documentation (which is pretty good though sometimes lags behind development): http://getcassette.net/documentation/getting-started
Have a look at YUI compressor # codeplex.com this could be really helpful.
What I have done before is setup a post-build event, have it run a simple batch file which minimizes your source files. Then if you're in release mode (not in debug mode), you would reference the minimized source files. http://www.west-wind.com/weblog/posts/2007/Jan/19/Detecting-ASPNET-Debug-mode
I haven't heard about publish minification. I think use should choose between dynamical minification like SquishIt or compile time like YuiCompressor or AjaxMinifier.
I prefer compile time. I don't think it's very critical to have to compile time changing files. If you have huge css/js code lines you can choose this action only for release compilation and if it helps publish this files only in needed build cinfigurations.
I don't know if there is any possible way to somehow hook into the functionality from that 'Publish' button/whatever it is, but it's surely possible to have that kind of 'static build process'.
Personally I'm using Apache ANT to script exactly what you've described there. So you're developing on your uncompressed js/html/css files and when you're done, you call like ant build which then minifies, compresses, stripes and publishes your whole web application.
Example script: https://github.com/jAndreas/typeof-NaN-2.0/blob/master/build/build.xml