How to minify Javascript and CSS with command-line using minify tool?

After searching and implementing it, I give the answer here through a bash file.

I use the npm packages uglifyjs and uglifycss for compressing JS and CSS files respectively. I use command find to loop through those files. I assume js and css files are in a js/ and a css/ folder respectively.

#minification of JS files
find js/ -type f \
    -name "*.js" ! -name "*.min.*" ! -name "vfs_fonts*" \
    -exec echo {} \; \
    -exec uglifyjs -o {}.min {} \;

#minification of CSS files
find css/ -type f \
    -name "*.css" ! -name "*.min.*" \
    -exec echo {} \; \
    -exec uglifycss --output {}.min {} \;

This will minify all js and css files in respective js/ and css/ directories. If you want to exclude some particular folders or patterns within them use the option ! -name

If you want to simply replace the minified file by the original file, that is, removing original file:

#minification of JS files
find js/ -type f \
    -name "*.js" ! -name "*.min.*" ! -name "vfs_fonts*" \
    -exec echo {} \; \
    -exec uglifyjs -o {}.min {} \; \
    -exec rm {} \; \
    -exec mv {}.min {} \;

#minification of CSS files
find css/ -type f \
    -name "*.css" ! -name "*.min.*" \
    -exec echo {} \; \
    -exec uglifycss --output {}.min {} \; \
    -exec rm {} \; \
    -exec mv {}.min {} \;


sudo apt-get install yui-compressor
yui-compressor finename.css > filename.min.css

Sources :

  • Humblix
  • AskUbuntu

Tags:

Javascript

Shell

Recent Posts