javascriptgruntjsgrunt-usemin

How do I remove some javascript during grunt-usemin compilation


I have code that makes it easy and fast to write/test code, that code does not belong in my production code (mostly it mocks out the server so I only need the grunt server).

Two parts to this, one is how to I remove parts of a script

angular.module('nglaborcallApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'server_mocks',  // Don't want this line in the production build
'dialogs'

]

and then a section of index.html that needs to go away

<!-- build:js({.tmp,app}) scripts/mocks/mocks.js -->
<script type='text/javascript'>var Mocks = {};</script>
<script src='scripts/mocks/jobs.js'></script>
<script src='scripts/mock.js'></script>
<!-- endbuild -->

So this might be 2 questions. I don't see anything in the usemin documentation about this so I'm guessing there is some other tool, but I don't know what the name of that tool is.

The other possibility is I'm doing it wrong and rather than inject this mocking object, I should be doing it with the grunt server. What is everyone else doing?


Solution

  • Ok, so stumbled on the answer while looking for something else and since no one had yet responded. Here is how I solved it:

    You get a copy of Grunt Preprocess with

    npm install --save-dev grunt-preprocess
    

    Then you modify your GruntFile.js like so (this is for an angular project, YMMV)

    module.exports = function (grunt) {
        grunt.loadNpmTasks('grunt-preprocess');      <-- Add this line near the top of the file
    

    add this in your list of subtasks

        preprocess : {
            options: {
                inline: true,
                context : {
                    DEBUG: false
                }
            },
            html : {
                src : [
                    '<%= yeoman.dist %>/index.html', 
                    '<%= yeoman.dist %>/views/*.html'
                ]
            },
            js : {
                src: '.tmp/concat/scripts/*.js'
            }
        },
    

    Modify your registered tasks (at the bottom of the file) like thils:

    grunt.registerTask('build', [
        'clean:dist',
        'useminPrepare',
        'concurrent:dist',
        'autoprefixer',
        'concat',
        'preprocess:js',  // Remove DEBUG code from production builds
        'preprocess:html',  // Remove DEBUG code from production builds
        'ngmin',
        'copy:dist',
        'cdnify',
        'cssmin',
        'uglify',
        'rev',
        'usemin'
    ]);
    

    Then modify your existing javascript code something like this:

    // @if DEBUG
    'server_mocks',  // Won't be included in production builds
    // @endif
    

    and your existing html code something like this:

    <!-- @if DEBUG -->
    <script src='scripts/mock.js'></script>  <!-- Won't be included in production builds -->
    <!-- @endif -->