Combining Javascript files using a Javascript preprocessor? [closed]

Question

I recently started using SASS (a preprocessor for CSS) and I'm really liking it. My favorite feature is being able to split my stylesheets into separate files so everything is more organized.

I'm wondering if there's something like SASS for Javascript. My Javascript files are getting huge and I'm spending a lot of time just trying to find stuff. I want to be able to split my file into smaller files and have them automatically combined to serve to the clients. How would I do this?

Answer 1

Absolutely GruntJS http://gruntjs.com/.

What you are to embark on here is a journey into real professional web development and quite frankly front-end engineering :) There will be no turning back.

Essentially you create a Gruntfile.js with common tasks like file concatenation and perhaps minify/uglifying your final javascript. You could even have the grunt tasks handle your SASS as well. There is a plethora of Grunt tasks you'll find useful in your professional workflow.

In order to use Grunt you'll need to install Node http://nodejs.org/; in particular its package manager npm https://www.npmjs.org/ to use Grunt but that's super simple to setup with something like homebrew http://brew.sh/.

I know all this can seem a bit daunting at first, but trust me it all comes together quite seamlessly once you get the hang of it.

Take your time, all the sites referenced do a good job in explaining how to use them and what's required to get started.

Enjoy