29

I am looking for a tool or a way to minify (similar to Compress my code and this question on Stack) all of the code in my .xml, .css, .html and .js files through Ubuntu's terminal. Eventually I will bash script the process, but at the moment I would like to just find something to test. Is there a tool out there that I can use to compress all these file formats through the terminal?

  • 2
    Have you tried something like tar -czvf compressed.tar.gz *.xml *.css *.html *.php ? – roadmr Jul 17 '13 at 14:52
  • 1
    I am looking to compress the code itself. Something like CSS Minify – DᴀʀᴛʜVᴀᴅᴇʀ Jul 17 '13 at 15:10
  • 1
    Then I think you're not asking for compression. By compression on regular files (non-media like music/videos) we mostly only consider lossless compression, but you're looking for a way to minimize the whitespace (in which you lose this data). And because minifying is lossy, you can't decompress (because it's not reversible). To me this makes it "unclear what you're asking". – gertvdijk Jul 17 '13 at 15:31
40

This is not the best option but it's probably the easiest. The YUI compressor was long thought to be the best compressor for Javascript and CSS, offering 20-40% improvements over other minifiers.

It has since been superseded by newer projects like Uglify.JS (which Grunt will probably suggest) but it's still a fairly easy thing to get up and running in Ubuntu.

sudo apt-get install yui-compressor

That's it. Now you can run yui-compressor myfile.js and it'll do its magic, just not as well, or as conveniently as a properly install Node/Grunt/Uglify+YUI stack.

  • 10
    Not everyone who uses js or css is using node.js or doing node.js projects. It is yet another framework to learn and configure if you want to use grunt. Yes grunt is cool. But now-a-days, we already have enough to learn before we can even start coding. So node/grunt is not always convenient. :) I myself am going to try your suggestion of yui-compressor. – Bill Rosmus Sep 28 '14 at 7:06
  • 2
    @BillR I sort of agree with the sentiment but while I don't have any node.js projects, I still use things like lessc and uglify.js because they are the best tools for the job. I don't use Grunt because I've replaced it with my own tooling but for the actual work, I'd never hobble myself just to avoid Node. If you want to stay in the industry, you have to keep up with best practices. – Oli Jan 20 '15 at 9:53
  • You are making the assumption that using node is best practice. Maybe in your world which is not everyone's world. – Bill Rosmus Jan 20 '15 at 18:07
  • In many cases the output (the minification, or whatever) is the best. Objectively. That's what I'm taking about here. If you only ever use what's easiest for what you currently know, you'll go extinct faster than a dinosaur. – Oli Jan 20 '15 at 21:01
  • 2
    You've got five years on me but I don't know what your point is... Are you still using static HTML4 with a bit of "DHTML" and perl CGI scripts? Still using ASP? Or have you switched things up as better technologies have made themselves available? We've got two separate points going on in this; it's getting a little silly. I don't care if you don't like retraining, but I do care that you're making out that using the more-css NPM package to minify your CSS is any more intrusive than using yui-compressor. It isn't. It's just another command that does the same thing better. – Oli Jan 20 '15 at 21:41
8

You can minify js easily with node and uglify-js from command line:

  • install uglify-js with npm install uglify-js -g

  • run it uglifyjs app-test.js > app-test.min.js


For css I would suggest clean-css (probably the most stable css minifier on npm)
example usage:

cleancss -o public-min.css public.css

As far as html is concerned usually minification is not usually worth the time you invest in setting it up, but I have tried html-minifier and it's an awesome tool.

Whatever you do just be sure that you gzip what you're serving.

  • 1
    uglify can be directly installed with sudo apt-get install node-uglify – Gery Dec 1 '16 at 17:02
  • Note that uglify-js is only for Javascript, and not for css or other files. – Jose Gómez Dec 1 '16 at 20:36
  • 2
    @Gery if you want to install uglify with apt you also need to install node-legacy, so run sudo apt install node-uglify node-legacy – mxdsp Mar 20 '17 at 10:03
5

Use minify - unlike the other suggestions, this tool minifies a lot more file types:

CSS     text/css
HTM     text/html
HTML    text/html
JS      text/javascript
JSON    application/json
SVG     image/svg+xml
XML     text/xml
3

There is no reason to minify php files (except you have very limited disk space and want to use every bit of it).

If you could add a goal (What do you want to accomplish and why?), somebody might show you a better way.

JS and CSS files are minified on runtime and cached in most webprojects. There is minify (https://github.com/mrclay/minify), a php "library" which is able to do exactly this. (can also be executed with php from the terminal)

But keep in mind that one big javascript file does not necessary load faster than 5 small files. If you need a reason and a solution for this statement, take a look at http://headjs.com/

May the source be with you...

2

I would recommend using Grunt.js. It's an automation tool that has minifiers available as plugins and can be run in your terminal via Node.js. It should not be necessary to minify PHP as the code executes on the server side and only its HTML output is sent to the client.

You can find available plugins here

  • 2
    Be aware that choosing Grunt implies a learning curve. – Rick-777 Jan 4 '15 at 18:04
2

I have had good results with Closure Compiler.

The Closure Compiler is a tool for making JavaScript download and run faster. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

It’s developed by Google and written in Java. It’s packaged for Debian-based systems as closure-compiler and is easily installed on Ubuntu systems. As it doesn’t use a GUI, it requires the more lightweight default-jre-headless package.

It’s slower that YUI compressor but the resulting filesize is (slightly) smaller. It also prints useful warning messages, similar to compilers for other programming languages.

Documentation: Getting started

Usage:

closure-compiler --js input.js --js_output_file output.js
  • The closure is really good if you start your project with it and extend your objects in separate files, etc. But for an existing project, it's rather terrible. – Alexis Wilke Sep 10 '17 at 7:22
0

Another option is to use npx command from Node.js. npx runs a command of a Node.js package without installing it explicitly.

# Minify JS
npx -p uglify-js uglifyjs -o app.min.js app.js common.js

# Minify CSS
npx clean-css-cli -o style.min.css css/bootstrap.css style.css

# Minify HTML
npx html-minifier index-2.html -o index.html --remove-comments --collapse-whitespace

# XML
npx pretty-data-cli --type xml --minify input.xml > input.min.xml

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.