First published on MSDN on Aug 06, 2016
Authored by Jeffrey Chilberto
In
part 1
, a basic Azure Web App website was built and deployed using
VSTS Build.
Part 2
illustrated how additional files could be included when building a web project. In this post, Gulp will be added to the
VSTS Build
pipeline.
Gulp
Gulp is a task runner for automating routine development tasks. For example, a common use of Gulp is to minify the javascript and css files and/or perform other optimizations for a non-development environment. In this example we want to add the ability to alter the assembly version during the build.
Adding Gulp to Visual Studio
The ASP.Net template and Visual Studio added most of the references an setup we need to run Gulp. In order to add to our project, we need two files: Gulp.js and package.json. Gulp.js contains the defined tasks while package.json lists any referenced packages required. The first step is to add a Gulp.js and package.json file to your project (Add New Item -> Gulp Configuration File and Add New Item -> NPM Configuration File).
Depending on what install you have done you might need to perform an
npm install gulp
to get things to work. Please see references for how to get setup.
In the packages.json, we will bring in a couple of helpful packages for parsing supplied parameters (
Yargs
) and for updating the assembly file (
DotNet Assembly Info
):
[code lang="js"]
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"devDependencies": {
"gulp":"^3.9.1",
"gulp-dotnet-assembly-info": "^0.1.11",
"yargs": "^4.8.1"
}
}
[/code]
Working with Gulp is surprisingly simple. The defined task below will apply the supplied version number against the assembly version and the file version.
[code lang="js"]
var gulp = require('gulp');
var assemblyInfo = require('gulp-dotnet-assembly-info');
var argv = require('yargs').argv;
gulp.task('version', function () {
-- only
if (argv.version != undefined) {
gulp.src('*/AssemblyInfo.cs')
.pipe(assemblyInfo({
version: function (value) { return argv.version; },
fileVersion: function (value) { return argv.version; },
}))
.pipe(gulp.dest('.'));
}
});
[/code]
Tip: if you receive a
Cannot find module
error when running the Gulp task locally, verify you have have run
npm install
locally and the packages were downloaded successfully. You can review the modules in the
node_modules
sub-folder:
Adding Gulp to Build
Once the files have been pushed to the server, we need to add two tasks to our Build pipeline. First npm will be run to install the modules required to run Gulp. In the sample, project the working directory of the package file was specified:
Next a Gulp task will be added to the build process. The version argument is specified to include the BuildID
References
Summary
The following shows the current build pipeline:
Next Steps
In
Part 4
, Load Testing will be reviewed and brought into the build pipeline.