Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set/Unset a debug flag during grunt/requirejs build

I am beginning with both requirejs and gruntjs. I have a debug flag in the app like:

var debugEnabled = true;

Is there some way this can be set to false, automatically from within the requirejs optimization being run from within a grunt build?

EDIT: To clarify, I have only one default task that runs the requirejs optimizer. The variable debugEnabled is within one of the modules within my app itself, say AppLogger, which is a dependency to main.

Is there some way the requirejs build can set this variable to false, so that the minified version of AppLogger would stop doing console.log etc.

like image 281
Hari Pachuveetil Avatar asked Mar 04 '13 02:03

Hari Pachuveetil


Video Answer


2 Answers

@asgoth's answer definitely would work, but figured out couple of other options as well to 'inject' (or remove rather) code during the build process.

As documented in the example build.js file, we could use the build pragmas to include/exclude code snippets during the build process.

//Specify build pragmas. If the source files contain comments like so:
//>>excludeStart("fooExclude", pragmas.fooExclude);
//>>excludeEnd("fooExclude");
//Then the comments that start with //>> are the build pragmas.
//excludeStart/excludeEnd and includeStart/includeEnd work, and the
//the pragmas value to the includeStart or excludeStart lines
//is evaluated to see if the code between the Start and End pragma
//lines should be included or excluded. If you have a choice to use
//"has" code or pragmas, use "has" code instead. Pragmas are harder
//to read, but they can be a bit more flexible on code removal vs.
//has-based code, which must follow JavaScript language rules.
//Pragmas also remove code in non-minified source, where has branch
//trimming is only done if the code is minified via UglifyJS or
//Closure Compiler.
pragmas: {
    fooExclude: true
},

//Same as "pragmas", but only applied once during the file save phase
//of an optimization. "pragmas" are applied both during the dependency
//mapping and file saving phases on an optimization. Some pragmas
//should not be processed during the dependency mapping phase of an
//operation, such as the pragma in the CoffeeScript loader plugin,
//which wants the CoffeeScript compiler during the dependency mapping
//phase, but once files are saved as plain JavaScript, the CoffeeScript
//compiler is no longer needed. In that case, pragmasOnSave would be used
//to exclude the compiler code during the save phase.
pragmasOnSave: {
    //Just an example
    excludeCoffeeScript: true
},

I could see this in action on the jquery.mobile code, which probably is a good place for learning AMD and requirejs from.

Here is what worked for me:

AppLogger.js:

/* global console: false */
define(function () {

  var debugEnabled = false;
//>>excludeStart('appBuildExclude', pragmas.appBuildExclude);
  debugEnabled = true;
//>>excludeEnd('appBuildExclude');
  return {
    log:function (message) {
      if (debugEnabled && console) {
        console.log('APP DEBUG: ' + message);
      }
    }
  };

});

Gruntfile.js:

requirejs:{
  compile:{
    options:{
      baseUrl:"js/",
      mainConfigFile:"js/main.js",
      name:'main',
      out:'js/main.min.js',
      pragmas:{ appBuildExclude:true }
    }
  }
}

With this configuration for the requirejs in my Gruntfile, the section within the pragmas of excludeStart and excludeEnd were stripped off from the compiled/built file.

I am still learning requirejs, so no claims that this is the best practice for this sort of thing, but this surely worked for me.

like image 117
Hari Pachuveetil Avatar answered Oct 14 '22 02:10

Hari Pachuveetil


Let's say you have two tasks:

  • development
  • production

development does all the stuff you need in development, like jshint, coffeescript compilation, ... production does requirejs optimization, css minification, ...

Then you could register a build task which checks your debug flag:

    grunt.registerTask('build', 'run build', function () {
        var task = debugEnabled ? 'development' : 'production';

        // run the targetted task
        grunt.task.run(task);
    });

On the commandline, grunt build will execute it.

Alternatively, you could use the option parameter in grunt:

    grunt.registerTask('build', 'run build', function () {
        // start development build by default
        var target = grunt.option('target') || 'development';

        // run the targetted task
        grunt.task.run(target);
    });

On the commandline, grunt build --target=production will execute it.

Edit:

Misunderstood the question a bit. The only way I see is to separate your debug flag in a separate module:

path/to/debug.js

define(function() {
   return true;
});

Then you create a production version (near your grunt tasks):

path/to/grunt/tasks/debug.js

define(function() {
   return false;
});

And in your requirejs task, you specify that version:

requirejs: {
   options: {
      paths: {
         debug: 'path/to/grunt/tasks/debug.js'
      }
   }
}
like image 31
asgoth Avatar answered Oct 14 '22 02:10

asgoth