Grunt.js: Tips and Tricks | Hacker News Reader

Grunt.js: Tips and Tricks

quickleft.com

48 pointsmissbikesalot18 comments

http://webcache.googleusercontent.com/search?q=cache:http://...

Site's back up, we scaled up some dynos. Thanks Heroku :-)

The article suggests splitting the configuration in many parts using the grunt.config method. Another interesting way to organize it in a larger project is to define config for each task in a separate module. I first saw this used in React: https://github.com/facebook/react/blob/9182100/Gruntfile.js#...

It's important to note that Grunt can be used in 2 (more?) ways:

1.) As a build tool

2.) As a continuous build tool (with watch and live reload)

React's Gruntfile is well organized and is a great option for #1.

However, use of this approach for #2 will cause a slower development process. Obviously, part of the performance hit could be offset by conditionally including only the files required for each task. However, reading files from disk will result in a slower reload.

Can someone please tell me what exactly they are using Grunt for? I just don't see what problem it solves.

I'm using it to automatically watch for changes to CoffeeScript and SASS files and then run the appropriate preprocessor when they change and tell my browser to refresh via LiveReload.

brunch does all this, without the need for a ~100 line config file.

mikewhy: see my large post. Can brunch do all of that? I have no idea what brunch is and it's hard to google. What language is it for? Ruby?

I'm using it to automate testing/concatenating/minifying a front-end library I'm working on.

I do the same with a PHP project, it's nice because I just don't include the original JS source files when I push to staging/production

I use it outside of a Rails project when I don't have the asset pipeline available in my tool chain. It gives me the scalpel to define exactly what happens to my code and files vs. a one-size-fits-all option like LiveReload or Brunch where I need to match a specific filesystem layout.

Should be noted that paths in brunch aren't set in stone. app/ gets some special treatment is all. For instance our current project has app.js, vendor.js, test.js, test-vendor.js, admin.js, admin-vendor.js

I wish you would have elaborated on your question because it seems pretty obvious to me and I'm not sure what your experience level is (or what language you're using). Or maybe you're thinking, "I don't get the point of Grunt, isn't X better?" I can't tell.

Grunt is to JavaScript as Ant is to Java. "The main usage of Ant is to build Java applications." So, "The main usage of Grunt is to build JavaScript applications".

I'm making a game and I use it for many different tasks:

1. Every time a coffeescript file changes, compile that file to javascript

2. Every time a js file is added or deleted, change the list of script tags in the html file

3. Every time a sass file changes, run compass to compile it into a css file

4. I've got a test suite (qunit, it runs off an html file) that uses the same script list that my main game uses (and more). I've turned the script list into a variable so I don't have to modify either html file by hand if I add/remove a coffeescript file.

5. Every time a js file changes, is added or deleted, run unit tests in the background using phantomjs

6. If a unit test fails, beep 3 times

7. Every time a coffescript file changes, is added or deleted, reload the page so I can see my change. This is configurable so I can turn this feature off.

8. When I build for production, concatenate all the files and minify them.

9. Every time any file changes, update the html file to have a new build-time variable.

I would be super unproductive if I had to do these tasks by hand. Grunt.js lets me automate these tasks and reuse them as many times as I want. For example, I used to run my qunit tests by hand by going to the .html file and refreshing the browser. But sometimes I forgot or I didn't want to lose my train of thought. Sometimes this would lead to me accidentally committing broken code. That's why I automated the tests to run in the background whenever a file changes. Now I can't forget to run the unit tests and I don't have to lose my train of thought.

Grunt has done nothing, but piss me off since I've used it. The one plugin that it is missing is a JS library dependency resolver (put in the file paths, put in the dependencies, and spit out the file paths in the optimal load order). I've used grunt standalone (which sucked when I spent half the day in the config), I've used it with Yeoman (which suffers the same problem as using Grunt standalone), and I've used it with Lineman (which essentially sidesteps the problem by concatenating all the files together in an order you specify).

Grunt is simply too complicated for a lightweight such as myself and I wish the tooling existed to make the pain go away.

I feel your pain with JS dependency resolution and management, I have yet to get it with grunt, either. I solved that problem with RequireJS. Have you given that a shot?

RequireJS is incredible when it comes to managing dependencies and organizing JS code in general. Combine it with a requirejs task in Grunt to automatically optimize your JS code and you've got a real slick development-to-production JS pipeline on your hands.

Granted, RequireJS may seem a little funky at first, but I promise you taking the couple of hours necessary to learn its basics will make your life (at least when it comes to developing JS) much easier.

Yeah I totally agree with you here. I had to come up with my own solution to this which took a lot of mental effort. Basically I leveraged the grunt-include-replace* plugin to specify a variable in my template file. This variable gets expanded to all the files I depend on. I specify those files with a grunt globbing pattern. There's some logic in between this that converts the file path to script tags.

I really hate the amount of effort this took but it was worth it. I feel like this should be a first class feature/plugin. The problem with lineman's solution is that when you concatenate everything, your stack traces are obfuscated. EG: "An error occurred on line 1,000,000 of concatenated.js". Also, it slows your feedback loop to wait for the concatenation to occur. Also it slows my IDE to view and index a huge concatenated file.

Another thing I hate about grunt's watch plugin is how much code it takes to make the watch plugin only act on the changed files instead of all the files it's watching. EG: When a coffeescript file changes, only compile that file, not all the coffeescript files. That takes like 5 lines of code. It should be an option I can set to true.

* https://github.com/alanshaw/grunt-include-replace

HN continues to amaze me. I was just looking for a solution to creating multiple build files using grunt and requirejs. Found out how exactly under the "Dynamic Tasks" section.

I know this is off-topic, but I really liked this site's page title banner interaction. I haven't seen anything like it before!

Reply on news.ycombinator.com