Using Gulp while Publishing to CRM.

While linking or editing a web resource, you can specify a Gulp task to run prior to the web resource being published to CRM. This allows you to minify, merge your file with other files, or perform any other Gulp operation to the file prior to being published to CRM. The following file types are supported:

  • TypeScript (including TSX files)
  • JavaScript (including JSX files)
  • Html
  • CSS
  • LESS
  • SASS (scss)
  • XML
  1. Gulp Output File - This is the file that should be uploaded to CRM for the web resource. This can be any valid file for the web resource type.
  2. Gulp Task Name - The is the name of the Gulp task that you want to be performed prior to publishing the web resource.
Note:
When the dialog loads, XrmToolkit will attempt to run the Gulp file found in the project. If none is found, or the Gulp file has any errors, then you will not get a dropdown showing all the available Gulp tasks. Please ensure that a Gulp file is present and configured property before trying to use this feature.

XrmToolkit also passes the following two parameters to the Gulp command line that you can use within your Gulp task.

  • sourcefile - This is the name of the file that is linked to CRM.
  • jsoutputfile - For TypeScript files, this is the name of the JavaScript file that Visual Studio automatically produces for you when the file is saved.
  • buildConfiguration - Name of the current build configuration, ie 'Debug' or 'Release'.

Using these parameters allows you to create re-usable tasks that can be used for any file. An example is shown below demonstrating a Gulp task that simply moves both the source and jsoutputfile to two different locations. Most likely your tasks will contain more logic to minify or combine multiple files into a single file.

var gulp = require('gulp');   
var argv = require('yargs').argv;

gulp.task('copyScripts:tsCopyIndividualPage', function () {
    var sourceFile = argv.sourcefile;
    var jsoutputfile = argv.jsoutputfile;
    var buildConfig = argv.buildConfiguration;

    gulp.src(sourceFile)
       .pipe(gulp.dest('./Web/scripts/forms/src/'));

    if(buildConfig == 'Debug')
    {
        gulp.src(jsoutputfile)
            .pipe(gulp.dest('./Web/scripts/forms/debug/'));
    }
    else
    {
        gulp.src(jsoutputfile)
            .pipe(gulp.dest('./Web/scripts/forms/release/'));
    }
});
Note:
In order to use either of these parameters, you will need to use a Gulp plugin that can read the command line args. One such plugin is Yargs, which is used in the example above.