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.

If you are using VS please refer to http://stackoverflow.com/a/2681231/929902 — Teoman shipahi, Jul 12 '13 at 15:25

score 1 · Accepted Answer · answered Jul 12 '13 at 15:19

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.

answered Jul 12 '13 at 15:19

Tom Elmore

1,980
15
20

I am thinking about the same thing, but how do you keep the html updated in sync? – John Jul 12 '13 at 15:20
@John Have a look at `Continuous integration` (`Jenkins`, `Hudson`, `CruiseControl` etc) so you can push to a `QA server`. You can also integrate things into your build scripts which will minify your `CSS` and `JS` on deployments. Also `version control` is a must, if you don't use it already. – Nick R Jul 12 '13 at 15:34
my difficulty was naming minified versions as script-min.js style-min.js and not having an easy way to replace the script/style include elements in html to point to the correct file depending on development or release versions. so instead of having different file names for the minified versions, i am copying the file structure to a dist directory and minifying the assets there and keeping the same names so no need to update the html files. – John Jul 13 '13 at 01:23

score 0 · Answer 2 · answered Jul 12 '13 at 15:39

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/

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

2 Answers2