Question

145

How do I remove some javascript during grunt-usemin compilation

rated 0 times [ 147] [ 2] / answers: 1 / hits: 7861 / 11 Years ago, sun, december 8, 2013, 12:00:00

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

Only authorized users can answer the question. Please sign in first, or register a free account.

scarlett

Add To Favorites

Follow

Total Points: 491

Total Questions: 94

Total Answers: 100

Location: New Caledonia

Member since Thu, Mar 23, 2023

1 Year ago

answered 11 Years ago elishaannac · Accepted Answer

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