Using grunt on a large Javascript project with multiple subdirectories

Question

I have a Javascript project with multiple subdirectories, each its own individual project. I could just use one massive Gruntfile with different tasks for each project, but I'd rather have a Gruntfile in each subfolder. A typical file structure would be this

main_folder/
    project_1
        src
            js/
        dist/
        doc/
        Gruntfile.js
        package.json
    package.json
    node_modules/

And then repeat the file structure for each project

Here is my Gruntfile inside project_1

module.exports = function(grunt) {



    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        }
    });

    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');


    grunt.registerTask('default', ['uglify']);

};

It has fewer tasks than I will use, but the errors are still there. Whenever I try to run grunt, I get the error message Local Npm module "grunt-contrib-uglify" not found. Is it installed?, even though I have it installed in node_modules.

How can I specify the location of node_modules, or do I have to reinstall node_modules inside each folder?

I see that you have another package.json inside your subdirectories, but no node_modules directory with them. Maybe you can include the grunt-contrib-uglify inside the subdirectories' package.json devDependencies, then run npm install from inside the subdirectories? — Arnelle Balane
– Arnelle Balane, Commented Aug 10, 2014 at 4:23

Andrew Miner · Accepted Answer · 2014-08-04 17:42:52Z

3

+50

I think you can still keep everything in the same place if you tell Grunt more explicitly where to find your plugins. For example, here's a bit from one of my Gruntfiles:

grunt.loadTasks tasks for tasks in grunt.file.expand '../node_modules/grunt-*/tasks'

As a side note: I faced exactly the same choice you did, but made the opposite choice: a single Gruntfile for the whole project and created a symlink to it from each project sub-directory. It's turned out to be a very easy way to keep things together in one place, and side-steps a lot of confusing issues like the one you're facing.

edited Aug 4, 2014 at 17:42

answered Aug 1, 2014 at 19:34

Andrew Miner

6,2232 gold badges25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

scrblnrd3 Over a year ago

OK, but then I would have to have hundreds of nearly identical tasks, just with a different name and folder. Is there a way around that, where I could use just one or two tasks?

Andrew Miner Over a year ago

I should clarify... I add a symlink to the Gruntfile for each project so that it's working directory is based in each project's own subdirectory, but there's still just one Gruntfile.

Yannick Block · Accepted Answer · 2015-12-21 15:57:18Z

0

Another good way to solve this might be the use of subgrunt. It let's you configure various targets for your subprojects and has the option npmInstall, which "Determines wether npm install will be ran for the sub-project (thus installing dev dependencies)."

answered Dec 21, 2015 at 15:57

Yannick Block

513 bronze badges

Collectives™ on Stack Overflow

Using grunt on a large Javascript project with multiple subdirectories

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related