What tools can minify JS/CSS files after saving files without using console? I want something like SimpLESS. Write and update some js and css files and they minify and concatenate in two "build" files like that daemon program do automatically with LESS.
For Windows: Smalify works for me, if I'm not using CoffeeScript. I haven't tried them, but there are several other CodeKit alternatives here.
You can always find a plugin for your Text Editor. I don't know which editor you are using, but most of the popular ones either have build systems, have strong plugin communities, or both.
Sublime Text 2: Tons of plugins, and you can customize a build and save script.
Notepad++: Vibrant community, has minification plugins that would work for you as well.
CodeKit for Mac.
Check this python script.
http://github.com/hkasera/minify
It minifies js as well as css files too. It stores detailed log files and you can add this script as a git hook and save yourself from doing it manually everytime.
Hope it may help!
Related
I have many JS snippets and files shared across multiple projects. I have to either copy-past them into a single file for each project, or serve them as individual files on cdn. Both are bad ideas.
Is there any dependency management and build tool like Maven for JavaScript? Ideally it would take a set of js dependencies and build a single js file which can be served on cdn.
I can write a script to do that. But I'm looking to find if anything comparable to Maven exists for JS.
Update 2014: Based on answers here and my research following are most popular tools:
Bower, NPM, RequireJS, Browserify, Webpack, Grunt, Gulp
There's RequireJS, but that's kind of a different thing than Maven, and what you're asking it to do is different than Maven too. There are any number of JS combiner/minifiers, like jekyll-combiner and a zillion others.
If you're using Maven, the JavaScript Maven Tools might be of interest. If you're not, I don't know of a unified way to specifiy, download, combine, etc. for arbitrary build systems. Some of the node.js stuff might be useful, but I've never used that outside of a node.js context, so I'm not sure.
http://webjars.org/ packages JS libraries as JAR files and makes them available under Maven.
RequireJS is not a replacement to WebJars; it complements it.RequireJS will use public JS files (on CDNs) at runtime, whereas Webjars will download the necessary files at build-time and have you host them yourself.
Because most JS files are not hosted on CDNs, I use Webjars to download the necessary JS files at build-time, and reference them using RequireJS. That way I get the best of both worlds.
Take a look to grunt. It's very flexible build tool for javascript projects. Used by jquery team and other big projects. It combine, minify, test, lint js files, wtitten in javascript, have dozens plugins for whatever you want
In my project, for example, I have this structure:
/public/js/src/ /* many jquery plugins there */
/public/css/src/ /* many css files there, that describe different things */
After changes have been made, I would like to type in command line something like:
root#hostname:/var/www/test/public# ./build
which would generate two files:
/public/css/build.css - all files from /public/css/src/ folder with minified source
/public/js/build.js - all files from /public/js/src folder with minified source
For the moment I am using less css, which is working on node. I would like to have one script that will do everything, for css as for javascript. Could you please advise the best way to "build" dev-source javascript & css files?
You can use YUI Compressor. I'm sure it's also available for Linux.
It works from the command line. Read here how it works.
Example:
java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8
I'm sure you can setup a simple Bash script that executes two commands, one for CSS and one for JS by using parameters as input.
YUI-Compressor is available as a package in any Ubuntu version.
apt-get install yui-compressor
Hope it helps
You can use Apache ANT and YUI Compressor to set up your own build process. You can minify all your JS and CSS files with a single command.
EDIT: if you want a sample project try H5bp's ant build scripts http://html5boilerplate.com/
I know this is an old question, but for those getting here through Google. You can easily use Compass for this.
compass compile --output-style compressed --force
More info: http://compass-style.org/help/tutorials/production-css/
Use ACCSS for css compression, its compression rate is better than YUI-Compressors and its written in c with automake installation, so it is portable to almost every system.
Like above, you can use a shell script to combine less and accss. accss support reading from stdin, so you can combine them with
lessc styles.less | accss > out.css
It also has severeal compatibility options, especially for Internet Explorer.
https://github.com/acwtools/accss
Is there anyway to easily compile CoffeeScript on save? I'm using TextMate or Sublime Text 2.
Coffeescript has a 'watch' feature. You could set up, as a semi-permanent process:
coffee –wc -o media/js/ src/coffee/*.coffee
And for every file with an extension ".coffee", the corresponding compiled ".js" file will be put into the target directory every time you save.
That said, I use a makefile and a fabfile, because my HTML is HAML, my CSS is LessCSS, and my development directory is not my test path, so I needed something smart enough to "build and deploy."
If your machine supports inotify, you could use inotifywait to watch your entire work path, and call Make as needed. But at that point, you're into hard-core geekery.
You can also accomplish this without the command line:
Add a build process to Sublime Text.
Make sure that Save All on Build is selected in the Tools menu.
Use ⌘B instead of ⌘S when saving.
So instead of compiling on save, you're saving on compile.
The most straightforward solution with Sublime, is to install the Sublime package called Better Coffeescript (preferences --> package control --> install package...), and then make sure that its configuration includes "compileOnSave": true (preferences --> package settings --> Better Coffeescript...). Then restart Sublime.
For Sublime, anything else is not enough or too much extra components. Just came here after upgrading to Sublime 3, and it works like charm for Sublime 3 (as it did for Sublime 2, I just forgot about it at first).
Well coffee --watch has 2 major flaws:
New files created after command has been issued aren't being watched
Requires manual initiation so there can be a chance you forget to do it, which doesn't sound more brilliant than forget to compile before you git commit it
The solution I came up with is a rather simple Bash script that takes coffee --watch a few steps further which will allow your working directory tree to be watched ever since system login, and automatically get compiled into JavaScript on each file save/change
or new file creation:
http://blog.gantrithor.com/post/11609373640/carefree-coffeescript-auto-compiler
There may be more elegant way to do this, but this implementation works great =)
If you also want bundling, buildr offers watching and bundling too: https://github.com/balupton/buildr.npm
The (Java|Coffee)Script and (CSS|Less) (Builder|Bundler|Packer|Minifier|Merger|Checker)
gem install stasis
stasis -d
The best solution I have found compared with all other static compilation tools like StaticMatic, Middleman, etc.
Very flexible and configurable and does not rely on any preset folder structure. Just add controller.rb and write some Ruby. Lots of helpers for doing clever things before/after compilation.
https://github.com/winton/stasis
I like codekit :) Simple and effective way to compile coffeescript, sass, less, haml, and more, with lots of niceties. http://incident57.com/codekit/
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.
I'm looking for a visual studio plugin with the following functionality:
On building the project or executing the tool, the plugin looks for all *.js and *.css files in your project and compresses/minimizes them into *.min.js and *.min.css files.
Executing the tool on project build would enable you to keep the references to *.min.js in your pages while changes to the *.js files would be instantly written to the *.min.js files.
Is there such thing available?
If not what's the closest thing to automize tasks like that?
Extra question:
How about auto combining files?
Check out these two links:
An MS build script for YUI compressor
YUI compressor for VS
You probably be better off doing it with NAnt and coding it to run the compression. Automated process is always better than a manual one.
Web Essentials is best program for that, I really like it, and it has a lot of other nice features: http://vswebessentials.com/