gulpfile.js is not run on Azure VSBuild

Question

I have a .NET MVC project that executes the gulpfile.js after each build /// <binding AfterBuild='default' />. This works well if I build the project locally in Visual Studio. But I have to set up the auto build on Azure Pipeline after each commit. The VSBuild@1 task completes successfully but the gulpfile.js does not get executed.

gulpfile.js

/// <binding AfterBuild='default' />
'use strict'
//include gulp
var gulp = require('gulp'),

//include plugins
templateCache = require('gulp-angular-templatecache'),
rimraf = require('rimraf'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
gutil = require('gulp-util'),
path = require('path');

//concatenate & minify JS Files
function scripts() {
    return gulp.src([...])
.pipe(concat('main.js'))
        .pipe(rename('main.min.js')) 
        .pipe(uglify()) 
        .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
        .pipe(gulp.dest('Build/js'))//put main.js in this folder
}

exports.scripts = scripts;
exports.default = gulp.series(scripts);

Azure pipeline yaml

trigger:
- develop

pool:
  vmImage: 'windows-latest'

variables:
  solution: '**/*.sln'
  buildPlatform: 'Any CPU'
  buildConfiguration: 'Release'

steps:
- task: NuGetToolInstaller@1

- task: NuGetCommand@2
  inputs:
    restoreSolution: '$(solution)'
    
- task: VSBuild@1
  inputs:
    solution: '$(solution)'
    msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:PackageLocation="$(build.artifactStagingDirectory)"'
    platform: '$(buildPlatform)'
    configuration: '$(buildConfiguration)'

Answer 1

According to your comment, you can add a task just do the npm install before the gulp build:

steps:
- task: Npm@1
  displayName: 'npm install'
  inputs:
    command: install
    workingDir: '$(Build.SourcesDirectory)'
    verbose: false

See thread: Azure DevOps gulp step fails with Local modules not found for more details.

Update>> The directory of artifact is $(Build.ArtifactStagingDirectory), so it should be D:\a\1\a. If the js file is not included in the artifact, you could use the Copy Files task to copy the js file to this directory before the Publish Build Artifacts task.

Answer 2

What I ended up doing was to have Azure to deploy the artifacts to my webserver. Then I have a batch file to unzip and move the built files to the IIS directory. Then in the batch file, I have the following:

CD <<IIS directory>>
npm install
gulp --gulpfile "path\to\gulpfile.js"

This way, it executes the gulfile.js to combine and minimize the javascript files when it deploys to IIS. The reason it did not work with Azure pipeline was that it was not in the correct directory to find the gulpfilejs path