I have a project written on PHP and JavaScript.
For example, I have two main JavaScript files
main1.js and main2.js.
They use the same functions, and I want to extract the functions to lib.js etc.
On develop environment it's more useful to use 3 different files, but on production i'd like to have 2 minifyied files with lib.js included.
I want to see changes on dev immediately without any preprocessing, and I want to use some preprocessing on production.
For example I can write a javascript function require(filename) that loads needed js file, but how to tell minifyer to include the file inline on production?
You should look into YUI Compressor
and also into creating makefiles
you can also compress CSS with YUI Compressor
If you are using netbeans then you can use the plugin from here
Plugin
Also you can use
minifycss
YUI
For online compression
Coffee Script is used for caching the js files on browser side. It create a single js file from all files, and minify the resultant code.
you can try these for minify javascript and css online.
http://minify.avivo.si/#results
http://gtmetrix.com/minify-javascript-and-css.html
http://www.minifycss.com/
Related
I have two javascript
ol.js minify version 400kb
ol-debug.js original version 3000kb
app.js my script using ol functions.
For development I need to use ol-debug.js so I can use the real name properties and functions.
So how I can develop my app.js using the debug version and then minify both?
For example when I use Jquery or Jquery-min dont have that problem, the function name doesnt get minify. So what is different here?
What you want to do is to take several source JavaScript files (not minified) and minify all of them into a single minified file.
You need a minifier - software that takes your JavaScript files, minify and combines them into a single minified file.
One example is:
https://github.com/mrclay/minify
I hope it helps a bit!
What is the difference between "gulp-browserify" and "uglify.minify". Both are used to minify the files. I am trying to compress a group of JS file to a single file both serves good which is preferable.
gulp-browserify (which is no longer being maintained by the way) is used to concatenate (or to use the browserify vernacular "bundle") application files that have been written using commonJS in order to use them in the browser (which otherwise you wouldn't be able to do). The browserify application itself doesn't appear to actually have a minify option, but there is a plugin you can use that does minify the files after they have been bundled.
Uglify will just minify "normal" JavaScript files. If you want them concatenated then you would also need to add something like gulp-concat to your gulp configuration in order to do that.
I have a huge javascript framework with sub directories that contains a lot of JavaScript includes to other JavaScript files, how can I take these JavaScript files and compress them to a single or very few compressed JavaScript
files?
You will want to do this through some sort of build process. JavaScript has tools for this like grunt or gulp. Using these tools you will write a build script that uses something like uglify to do the actual minification.
You can do that with "jsmin" or "closure-compiler".
http://www.crockford.com/javascript/jsmin.html
https://developers.google.com/closure/compiler/
What is the best way to compress or minify jQuery, javascript and CSS files?
I am new with the compressions and minify features of web development please help me.
I personally use Yahoo Compressor and would recommend it. Why? Because it works.
An example of how to execute it at the command line:
java -jar yuicompressor-2.4.7.jar javascriptfile.js -o outputfile.js --charset utf-8
Do the same on a CSS file:
java -jar yuicompressor-2.4.7.jar style.css -o outputstyle.css --charset utf-8
Actually, I just realized I use a thing called htmlcompressor for HTML files:
java -jar htmlcompressor-1.5.3.jar hmlfile.html --remove-intertag-spaces --compress-js
Google's Closure Compiler looks good as well, but I have not personally used it yet so I'm not sure if it does CSS and HTML as well as Javascript.
I recommend using a tool which is provided or can integrate with your framework/toolset, to handle this automatically.
If you are using django, I recommend spaceless template tag or django-htmlmin app for html templates and django_compressor for js/css.
You can try http://www.jasob.com/ it allow you to Obfuscation and compression for JS and CSS
You can use require.js optimizer within node.js or Java, which supports both optimize the code itself and also minimize it [ If you are using require.js ]
You can use Google Web Toolkit restful api to increase performance of your codes and also for minifying purposes
You can use ASP.NET bundling for minifying
You can use Grunt to automate you unit tests and minifying
Single Page Javascript Application
I have built a sophisticated ajax-driven single page webapp that uses a RESTful backend web service serving JSON. The javascript is split into many different files, each file representing some sort of feature or component.
While the service has been in alpha testing, I've just be serving all these files separately without minification. But now that I'd like to launch a beta version, I really need to combine files, minify them, and version them. I want to add this to my build process, using Maven.
Javascript File Types
I'm using the following "types" of javascript files, of which #3 and #4 are my concerns:
External files, such a jquery and jquery-ui served from the Google CDN. Rarely change these versions, can be handled manually.
Jquery plugins that I'm hosting myself, such as fullcalendar or ui-layout. Again, I rarely update these to new versions and can handle it manually.
Application-wide javascript code. Custom javascript that is spread across many files and can change occasionally. All of these files need to be loaded for the app to work.
Feature-specific javascript code. Custom javascript that is loaded on demand when a specific feature is requested. This code can change quite frequently and is not loaded at startup.
Build Objectives
I'd like to do the following during my build process:
Concatenate all type 3 javascript files together, minify them, and save as a single file with a version number. For instance: app-2.0.6.min.js, where 2.0.6 is the maven project version.
All type 4 files should be individually minified and saved as separate files with version numbers in the name. For instance: feature-abc-56ab32de29.min.js, where 56ab32de29 is the version number of that specific file.
Update HTML files with <script> tags to point to javascript files with the correct version numbers.
Update Javscript files that load type 4 feature javascript files to point to the right versions.
Questions
Is there a maven plugin that will assist with the concatenation?
Is there a maven plugin that will assist with the minification? Ideally, I'd like to use Google Closure Compiler, but would work with others if simpler.
Is there a maven plugin that will assist with the versioning?
Is there a way to have the type 4 javascript files have independent version numbers? Ideally, if a file doesn't change between version 2.0.5 and 2.0.6, there is no need for users to download a new version and their cached version would work fine. I'm using GIT for source control, so would there be a way to use a file's GIT hashcode for versioning?
Is there a solution that will compress the javascript that is inline in regular HTML files without killing the HTML?
Is there a solution that will compress and version my CSS files as well?
Take a look at the yuicompressor-maven-plugin. It can aggregate various js (as well as css) files as well as minify and obfuscate them.
Here's a brand-new Maven plugin that targets this task: http://mojo.codehaus.org/webminifier-maven-plugin/
I've successfully incorporated RequireJS optimization (uses Google Closure compiler + does concatenation) in a Maven environment (for single page JS app). See my question and the follow up answer for details: RequireJS Compilation in Maven project with external JS dependencies
You could probably expand on that to version and archive the minified JS artifacts.