Inspired by nino-porcino's ifdev-loader. gulp-ifdef can process not only js/ts files but also html/less files.

Installation

Install package with NPM and add it to your development dependencies:

npm install --save-dev gulp-ifdef

Information

Package	gulp-ifdef
Description	Conditional compilation
Node Version	>= 6.0.0

Usage

gulp-ifdef can delete the source code conditionally according to the condition value in JSON.

Let's say you have below js and html code in src folder

index.js

doSomething()
/// #if DEBUG
outputLog()

function outputLog() {
    // print the debug log to console
}
/// #endif

/// #if version < 2
printVersionWarning();
/// #else
goodToGo();
/// #endif
doSomethingElse();

index.html

<div>
    <!-- #if DEBUG -->
    <div>
        The following is log list
    </div>
    <!-- #endif -->
</div>

So in you gulpfile

var ifdef = require('gulp-ifdef');

gulp.task('ifdef-copy', function() {
  return gulp.src([
    'src/**/*'
  ], {cwd: './'})
  .pipe(ifdef({
    'DEBUG': true,
    "version": 2
  }, {
    extname: ['js', 'html']
  }))
  .pipe(gulp.dest('./dist'));
}

This will conditionally compile the source according to a JSON condition and the ext file name list(this is optinal. if not present then all the files will be processed)

The above index.js and index.html file in the dist folder will change to the following

index.js

doSomething()



goodToGo();

doSomethingElse();

index.html

<div>

</div>

The files type that are not declared in "extname" will be kept same in the stream.

Now the supported condition syntax is /// (in js/ts/less) or <!-- --> (in html)