Try to understand how to use RequireJS with tools creating single minified-concatenated script file.

requirejs-with-grunt.md

Context

I have a bit experience in JavaScript development but I'm quite new in modern development tools such as Yeoman, Grunt or Bower. But I can create webapps with RequireJS, separate logic with Backbone.js and use templating with Handlebars. I am aware of what's going on.

I saw that these tools leads you to concat files, which is great, in my case I want to speak about JavaScript files. I can't understand how it works.

I love RequireJS

With RequireJS, I can separate files, for example if I'm using Backbone.js, every model, every view can be a file. If my application is big enough, some pages will need some models and some other pages will need some other models. And thanks to RequireJS I can load only the models (I mean the files, then) I need.

The problem

So, how can RequireJS work with modern tools ? Grunt will make me a single application.js file which content all the concatenated and minified JavaScript files in my scripts directory. In these scripts are some RequireJS instructions like :

require(['my-model'], function (MyModel) {/* some code here */})

But know I have one single JavaScript file and my application is serving only this one. I got a 404 error answer from my my-model RequireJS instruction. Moreover, all my application's JavaScript code is now loaded in every pages, even models I don't need.

Is something wrong with me ?

I can see how powerful these tools are and how the JavaScript (and generally develoment) community is active on them, so I guess I missed something. I guess something is wrong with what I just said because I can find blog articles speaking of "Grunt using RequireJS" but I never find in these articles part of what I'm saying. So I guess I ask wrong questions.

Discussion

I'm looking for someone to explain me why I'm wrong and how to use these wonderful tools. I want Grunt to manage my projects and I want RequireJS to load only code I need and work in develoment and production.

Thank you to all and let's talk!

The only difference between my dev and my prod should be the call of the main js.

In prod:

<script src="app.js">

In dev:

<script src="config.js" data-main="app.js"> or something like that.

It means that js are called dynamically by require.js

I will manage it via grunt-replace with a template. :)