different scripts in html in development and production

Question

I am using the concat grunt task:

concat: {
    dist: {
        src: [
            '../assets/js/jquery.js',
            '../assets/js/underscore.js',
            '../assets/js/pusher.js',
            '../assets/js/angular.js',
            '../assets/js/angular-resource.js',
            '../assets/js/angular-sanitize.js',

            '../core/module.js',
            '../core/**/*.js',

            'src/js/**/*.js'
        ],
        dest: 'dist/embed.js'
    }
},

Eventually I get one script file that contains all the scripts in dist/embed.js.
I also have an html file in src/index.html.
I am looking for a way to inject all those script file when running development tasks and inject only dist/embed.js on production task. I am trying nor to write again all the scripts in the index.html, but I want to use the list of scripts from the concat task.
Does anyone have idea how to handle this?
I'll appreciate examples very much.

Just use a condition -> if (process.env.NODE_ENV == 'development') — adeneo
I'm not aware of how to exactly achieve this, but you should check out grunt-env, which allows you to define environment variables for future tasks in the chain. — Paul Mougel
@adeneo: But this way I would have to add all my dev scripts tags manually also to index.html! — Naor

bevacqua bevacqua · Accepted Answer · 2013-12-02T14:04:22

What I do in unbox is loop through a context variable in my view layout, loading all the necessary CSS and JS.

Those are passed to the Grunt task which compiles Jade views statically, so you could share the configuration to generate both ../assets/js/jquery.js and /js/jquery.js style strings for each case.

Another option would be using grunt-usemin, although I only used it to update revved files, I know it can be used to transform these tags too. If you do want use usemin with Jade files, usemin-patterns might come in handy.

different scripts in html in development and production

1 Answers