NodeJS / Typescript / grunt development workflow

Question

I'm currently trying to setup a good and efficient dev environment using NodeJS and typescript and Grunt. I thought about the following project structure:

• MyProject
  • client
    • lib
    • index.html
  • server
    • routes
    • app.ts

Now i want to use Grunt for live compilation of my *.ts files. The problem is that i need to compile the client side sources with the "--module amd" flag and the server side sources with the "--module commonjs" flag. Is there any nice way how to achieve something like that? I thought about a gunt file similar to the following one, but this doesn't work:

grunt.initConfig({
    ts: {
        devServer: {
            src: ['server/**/*.ts'],
            watch: 'server',
            options: {
                module: 'commonjs',
                removeComments: false
            }
        },
        devClient: {
            src: ['client/**/*.ts'],
            watch: 'client',
            options: {
                module: 'amd',
                removeComments: false
            }
        }
    }
});
grunt.registerTask('default', ['ts:devServer', 'ts:devClient']);

EDIT: With this configuration only the devServer task is running and will start watching the server folder. Due to this it never reaches the client task and therefore client changes aren't detected. I want to have it the way that both folders are watched, but compiled with different compiler options (client folder with amd and server folder with commonjs)

Any ideas or hints are welcome, thank you!

Answer 1

With my little experience about grunt, I could suggest you some of code below :

grunt.initConfig({
        grunt.initConfig({
    ts: {
        devServer: {
            src: ['server/**/*.ts'],
           options: {
               module: 'commonjs',
               removeComments: false
           }
        },
       devClient: {
              src: ['client/**/*.ts'],
              options: {
                module: 'amd',
                removeComments: false
             }
        }
    },

    tsCompileTasks : {
            client: {
                    //what will you do for convert client ts
            },
            server: {
                    //what will you do for convert server ts
            }
    } 

    watch : {
             server: {
                    files: "<%= ts.devServer.src %>",
                    tasks: ["tsCompileTasks:server"],
                    options : "<%= ts.devServer.options %>"

             }
             client: {
                    files: "<%= ts.devClient.src %>",
                    tasks: ["tsCompileTasks:client"],
                    options : "<%= ts.devClient.options %>"
    }
}
});

grunt.registerTask('default', ['watch:server', 'watch:client']);

1/. I think registerTask has two params : (name,[watchArray]).

2/. In watch : you define the watch files and the tasks will be call if the watch files have changed.

So that, you should input a "watch" config as it would be. check its params here : https://github.com/gruntjs/grunt-contrib-watch

Sorry for my bad English and bad explain.