What is the recommended directory structure for Grunt projects

Question

I am setting up a Grunt project for the first time. Is there a recommended directory structure? For example, keep sources under /src, intermediate build artifacts in /stage and final concatenated, minified artifacts in /dist.

I am also using compass/sass. I assume my scss files should go under /src, but what's the correct way to set up the build workflow so that I am building and testing quickly while not cluttering my source directory with build artifacts.

Answer 1

I just have /src and /build (which is your /dist), and no /stage. I haven't found a real need for stage, probably because I don't have much integration testing to do. Let me know what you're using /stage for -- I'm curious. :)

/myproject
  /build
  /src
    /css
    /sass

I do have both a /sass and a /css. /css holds the single main.css compiled w/ SASS. In my Gruntfile.js, I have 2 SASS targets, sass:dev & sass:build. sass:dev compiles into /src/css and sass:build into /build/css. /src/css/main.css is git-/svn-ignored.

At the end of the day, Grunt doesn't care how you organize your sources. It just assumes Gruntfile.js and /node_modules are at project root, and that's it. It's actually NPM that assumes package.json's at root.

So, try different structures and settle on one that you like, which always depends on what tools you use.

Hope this helps! :)

Answer 2

Running grunt init:jquery or grunt init:node should give you a pretty good start on answering this question.

Here is the result of running grunt init:jquery inside a directory called init_test and selecting the default answer for grunt-init's prompts.

    Writing CONTRIBUTING.md...OK
    Writing grunt.js...OK
    Writing libs/jquery/jquery.js...OK
    Writing libs/jquery-loader.js...OK
    Writing libs/qunit/qunit.css...OK
    Writing libs/qunit/qunit.js...OK
    Writing README.md...OK
    Writing src/init_test.js...OK
    Writing test/init_test.html...OK
    Writing test/init_test_test.js...OK
    Writing LICENSE-MIT...OK

See https://github.com/gruntjs/grunt-init