CODEWITHSUNDEEP
javascriptcssminify
Lonimor
Lonimor

Reputation: 728

How do front end devs bundle and minify files?

What's the best practice for minifying and bundling js/css in a pure front end app, and how do the tools work?

I know how this can be done with server side apps like .NET/Java/LAMP/etc. But what about pure front end projects, SPA projects or backendless projects that are built with say, ember or angular these days? Say your entire project consists of HTML/css/js, which interfaces with a RESTful service elsewhere.

What kind of process or tool do you use to minify and bundle the resources for that?

I've seen grunt plugins that exist for this, but I find the documentation to be pretty magical and it's still unclear to me how they work.

Specifically, does the tool:

1) Replace src="/js/a.js",src="/js/b.js" with src="/js/bundle-a+b.min.js"? (and likewise with css?) in the source html files?

2) have different modes for dev and release, or is the tool only run when the project is released?

Or are the resource requests entirely managed by a js tool and js/css files have to be requested via a library function? Wouldn't the lag be noticeable in this case?

Thanks.

Upvotes: 3

Views: 2331

Answers (1)

J-Dizzle
J-Dizzle

Reputation: 3191

Through the use of Build tools front end devs can have minified javascript, css, or even images and html files automatically minified as they develop. The most common is grunt, with gulp close behind.

You configure grunt tasks, like grunt-contrib-uglify and grunt-contrib-copy, and put those tasks under a grunt-contrib-watch task. Have the grunt watch task watch the files you modify, and every time a change is detected those .min files are automatically generated.

These build tools have no impact on your application, they are run before the files are servered. You were correct to assume there was an easy way to do this. I suggest you look at grunt getting started, a sample gruntfile, or a project that uses grunt - here's mine, it does minification like you requested. Clone my repo, run sudo npm install, then sudo grunt. I don't have watch set up in my project but grunt is very well documented.

Upvotes: 6

Related Questions