Starting from VS 2015 node is built in, along with the task runner explorer, though i still have occasional issues with the task runner explorer, but they are defiantly a must have.

These days in in Visual Studio i normally do a separate project for my static content, this is for a couple of reasons:

1. In my F5 experience means the static content is on a different site, this means that’s is closer to live as i generally send the static content to a CDN
2. The static content is packaged into a single separate package, so i don’t have to pull files out into a separate package for the CDN (personally I use octopack at the moment, which works per vs project)

The gulp file is easy, just throw in a js file with the correct name and it’ll get picked up

I find it easier to work with the uncompressed files locally so throw in a variable to cater for either accessing the live vs local

Dim compress_string As String = ".min"
#If DEBUG Then
 compress_string = ""
#End If

 Dim lk4 As New HtmlControls.HtmlGenericControl("script")
 lk4.Attributes.Add("src", StaticLocation & "js/default" & compress_string & ".js")
 lk4.Attributes.Add("language", "javascript")
 lk4.Attributes.Add("type", "text/javascript")
 ThePage.Header.Controls.Add(lk4)

NOTE: Please don’t troll at me for the VB code, just use a converter if you don’t understand or want to be a script kiddy 🙂

you can test it locally by running a build, you’ll want to add some liens into your .tfignore for the “node_modules” folder so it doesn’t pick up the npm files. I also add in a line for *.min.js so it doesn’t check-in my minified content when it builds locally

Below is an example file from one of my projects, im not using contcat on this one because i dont ahve a lot of js in this project, but if you’ve got more than 2 its generally good to concat them as well.

/// <binding AfterBuild='default, clean, scripts, minify' />

// include plug-ins
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var rename = require('gulp-rename');
var minifyCss = require('gulp-minify-css');

var config = {
 //Include all js files but exclude any min.js files
 src: ['js/**/*.js', '!js/**/*.min.js']
}

//delete the output file(s)
gulp.task('clean', function () {
 del(['js/*.min.js']);
 return del(['css/*.min.css']);
});

//Process javascript files
gulp.task('scripts', function () {
return gulp.src(config.src)
 .pipe(uglify())
 .pipe(rename({
 suffix: '.min'
 }))
 .pipe(gulp.dest('js/'));
});
//process css files
gulp.task('minify', function () {
 gulp.src('./css/*.css')
 .pipe(minifyCss())
 .pipe(rename({
 suffix: '.min'
 }))
 .pipe(gulp.dest('css/'))
 ;
});
//Set a default tasks
gulp.task('default', ['clean'], function () {
 gulp.start('minify', 'scripts');
 // do nothing 
});

This minifies all my css files to a new file named oldfilename.min.css and uglifies all js files to oldfilename.min.js

The Node plugin for teamcity is available here, this will give you npm steps in you build templates.

https://github.com/jonnyzzz/TeamCity.Node

You’ve need to add 2 steps to you project

1. Node.js NPM to install npm modules require

simply the install command will pick up the dependencies and get the files, NOTE: this is add a shitload of time to your builds (upwards of 2 minutes), I’m still looking at ways to solve this.

2. Gulp Step to run the gulp file

Just set the working directory to the root of the project that has the gulp file.

I haven’t tried doing gulp for multiple projects, so far I’ve been primarily using it for js and css, and i generally create one static content project per solution that all the other projects will share. So I can’t comment on this yet.

After that you should have a working solution, as you can see below the issue i have with build times now, 2 min 34 secs downloading to run a job that takes 4 seconds.

If you are using octopack, you will not get the outputed files in the nuget packages, because they aren’t included in the visual studio project file.

I’ve worked around this by adding a nuspec file to my solution. example below from one of my projects, shows including just the minified css and js content to the nuget package for octopus.

<?xml version="1.0"?>
<package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
<metadata>
<id>StaticContent</id>
<title>StaticContent</title>
<authors>Your name</authors>
<owners>Your name</owners>
<version>0.0.0.0</version>
<licenseUrl>http://yourcompany.com</licenseUrl>
<projectUrl>http://yourcompany.com</projectUrl>
<requireLicenseAcceptance>false</requireLicenseAcceptance>
<description>StaticContent</description>
</metadata>
<files>
<file src="css\*.min.css" target="css" />
<file src="js\*.min.js" target="js" />
<file src="img\**\*" target="img" />
<file src="Deploy.ps1" target="" />
<file src="Web.config" target="" />
</files>
</package>