How to develop Javascript and CSS and use minified versions when releasing?

Question

Hopefully, this is not a duplicate question.

I want to know the best practice, as i am very new to the whole front-end development, how people develop/test javascript/css and at the same time ship their code and all dependencies as minified. What kind of build process do you use? Here is an example: say you have style.css and app.js with dependencies to bootstrap.css and jquery.js.

How do you include full versions of these files in html when developing and then use the minified versions when releasing? Do you minify the third-party css/js such as jquery and bootstrap yourself using YUI compressor (or some other tool similar) or use the downloaded minified versions? How do you swap between full versions of code and the minified versions? Thanks.

Answer 1

I would maintain your codebase only uncompressed and use ant (http://ant.apache.org/) or something similar to create a build process which runs your tests, maybe runs jslint over your code, and then minifies it and copies it into a structure that is ready to be released.

The build could name the files as required so you dont have to worry about the minified filenames being different.

Answer 2

I do this by using pre-compilers for css and javascript. There are many ways to do this effectively, I write the code using SASS and use two apps: prepos (win) & scout (win/osx) to compile the code either minified or human readable.

I recommend that you watch this video on this topic by CSS Tricks: http://css-tricks.com/video-screencasts/124-a-modern-web-designers-workflow/