Is anybody aware of a plugin that can be used with Dreamweaver or any other coding utility that can minify your javascript/css as you upload the files?
So for instance, I create a file called functions-global.js, and then, when I upload the file, it uploads this file as it is and creates a minified duplicate called something like functions-global.minified.js?
I cannot imagine it would be a very hard plugin to write, as long as you have the minifying algorithm which is used here for js - Compress Javascript, and this one for CSS - Compress CSS
I use dreamweaver purely for familiarity purposes, if there is any other software out there that does this then please let me know.
Thanks in advance
This is a dreamweaver extension for minifying js:
http://www.dwbooster.com/miscellaneous/javascript-minify
Related
I've the need to generate some css / javascript at Runtime on my project. After generating this code ( probably with PHP) i need to get the string, minify them and then save the minified file.
I was searching for a tool to do that in Java/Scala, but all the tools i found are for minifying the project files, not plugin to do that on specific files as needed.
I looked at wro4j since it seems it could work that way, but couldn't find how to do that inside the java code and not at build time.
how to do that inside the java code and not at build time
I would recommend the following approach:
Generate the JavaScript and CSS files, unminified
Minify the files using an external tool like yuicompressor
If you don't want to generate the files first, yuicompressor offers a node.js version that can minify JavaScript strings directly. I'm not sure if that would work on CSS strings also.
Given the relative complexity of running node.js within Java, you might want to write a small node.js tcp server that you can send the JavaScript/CSS strings and return them minified. This approach also promises some nice scalability properties in terms of throughput.
I am using jquery fileupload plugin and it has 7-8 js files which it loads.
Now others developers are also working on site and sometime it cause confusion and difficult to find which js file is used where.
So i am thinking if i can combine 7 files in one file so that i can know that thats my file
Try this to compile your javascript file or code.
http://closure-compiler.appspot.com
While possibly overkill in this particular case, it might be worth checking out grunt. It will let you keep your files divided into multiple files for when you are working on them, and as soon as any file change compiling, minifying and combining them into a single/groups of files as desired, while also allowing you to define the load order of your code.
It requires some setup the first time you run it (which you can later use as a template) but greatly improves the process of combining/minifying files, and also has support for processing coffescript and sass among others, as well as writing unit tests for your code.
I use Rake to compile Javascript (and SASS to CSS, as well). It minifies the files in a unique JS. It's written in Ruby, but it's easy to configure and it works very fine.
But if more developers are working on the same code, another good idea I strongly suggest is to to use a SVN (sub-version control system), as TortoiseSVN or Git. This will allow many developers to work on the same source files, without losing any change.
I have a project which consist of a lot of static HTML and js files. I need a build tool that can concatenate and minify them.
I saw this great screencast that explains how to do it with ant and YUI. The only thing I'm missing is after the minified version is created , how can i replace references to the JS/CSS files in the HTML, so it will reference the new minified version?
Is there a better/easier tool for this (not GPL/LGPL license)?
Grunt is pretty good, and supports most of those things. This plugin will re-write your CSS link tags, though normally (and for JS) you'd just write the link/script tags to point straight to the minified version anyway, and continually have it build your files.
You can try minify JS and CSS. Minify JS can make 1 JS file merging multiple JS file and same for CSS.
I have a ASP.NET MVC 2 project on Visual Studio 2010. I want to be able to use my plain javascript files in debug mode so I can understand what's going on when debugging, but I want to used a minified/compressed version when using release mode.
I was planning to create some extenders to include the js files in each page, something like:
In that extender method I would determine whether I am on debug or release mode and pick the appropiate JS file. The disadvantage here is that I would end up manually compressing/minifying the JS every time I change something.
Is there an automated way to compress/minify and include the JS file when compiling in release mode?
The best option is to compress files by running a post build task from visual studio: Compressing JS files as part of your build process
You might want to take a look at the Yahoo YUI compressor.
You could use a post-build event and the Microsoft AJAX minifier or the YUI Compressor.
I manage a PHP development shop but we do this very same thing. In our development environments, our code is not obfuscated or minified. To push our changes to our live site, I coded a perl script that updates our version control and then invokes the YUI Compressor to minify the JavaScript and CSS before placing it in our live static directories.
As an aside, you may also want to look into merging your CSS and JavaScript on publish as well for added performance. After we minify our static content, we concatenate it into similar files based on purpose. For example, we have about 20 JavaScript files that end up in a file called 'global.js' on our production server. Our code is written such that development environments include all JavaScript files in our js/global/ folder separately, but on production it includes everything in js/global/ as 'js/global.js'. Then, we just iterate through the minified files during publish and concatenate their contents into js/global.js.
The benefit to the merge approach is fewer JavaScript and CSS files for the users to download which means faster page loads. This approach also allows you to split your JavaScript into separate files in your development environment by purpose for easier maintenance.
I am doing speed optimization for my website application. And I found some practises to do that.
For example Best Practices for Speeding Up Your Web Site from Yahoo.
Among them are:
Minify JavaScript and CSS.
Minimize number of HTTP Requests by combining several files (css, js) into one.
My question is what infrastructure, tools and building process you use or can recommend to perform that?
According to the JavaScript Compression Rater, the most efficient tool is the YUI Compressor or JSMin.
You can use YUI Compressor.
It can compress JavaScript as well as CSS. Just run it for all your files, then concatenate them into one 'package' file. You can either do that manually, write a Makefile or use some script to compress "just-in-time" on web request, although you might want to cache the resulting file.
The Yahoo tips are excellent. I use gomez to test the results of optimization efforts. Minification is a good step. I've found bigger impacts can usually be made by adjusting the way pages are put together (particularly in reducing how much images get cut up into little pieces to reduce the number of requests). Anyway, this yahoo blog gives a pretty good rundown of minification tools. I typically stay away from obfuscation unless there's a compelling reason beyond the relatively small performance kick. The actual steps to install and use a minification tool are relatively straightforward.
Or you could just configure your HTTP server to GZIP compress all text documents.
I do ASP.NET, so I use CruiseControl.NET with NAnt for my build process. A part of this build process is compressing with YUICompressor which in my experience is the best compressor out there.
If you don't do ASP.NET, theres still the original CruiseControl with Ant that you can use in the same capacity.
The reason I find this a superior set up is because a) all the tedious stuff is automated and b) if you're testing on your own machine you dont have to debug a single super long string of JS :)
I've integrated minification to my deployment process. I do it in perl with packages JavaScript::Minifier and CSS::Minifier.
During my development, I want to keep the script expanded. I put some comments in my HTML so that my script knows which files to put togetheer and minify:
<!--- MinifyJS[js/minified-1.js] -->
<script src="..."></script>
<script src="..."></script>
<!-- end[js/minified-1.js] -->
<!--- MinifyCSS[css/minified-1.css] -->
<link ...>
A couple of regular expression, and I quickly get a "production" version with minified files.
I wrote my own custom manager for this. It uses google's closure compiler and compresses files only when needed in release mode. Check it out:
http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx
Thanks
Guido Tapia
Big fan of Dean Edwards /packer/ myself - comes in a variety of flavours.
By following yahoo blog link I've found one real solution - "Make your pages load faster by combining and compressing javascript and css files" by Niels Leenheer.
For compressing everything before uploading it to web, this program is great both for CSS/JS/HTML:
http://www.w3compiler.com/
It's even possible to select areas not to compress, as it's not all MVC codes in your markup that supports getting compressed.
And it saves backup files each time it compress your files, so you can easily decompress it with just a click.
I've found Minify most useful for my PHP projects. Very easy to use, just saves time configuring minimization, compression and caching of CSS and JS files manually. Also has a neat grouping feature.
Some notes about YUI Compressor
YUI Compressor generates without line breaks at all while Minify has some.
Be careful if you have escaped strings. I've found out that YUI Compressor unescapes them. So strings like "\'" become "'".