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?

Answers


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 -->

Need Your Help

Javascript Onclick with Table Rows

javascript javascript-events onclick

I am having problems with my JScript code. I am trying to loop through all of the rows in a table and add an onclick event. I can get the onclick event to add but have a couple of problems.

URL mapping in PHP?

php apache rest

I come from a Java background and with any servlets-based technology, it's trivial to map a range of URLs (eg /reports/, /secure/.do) to a specified servlet. Now I'm less familiar with PHP but I h...