Gulp in Visual Studio and building with TeamCity

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

GulpStaticContent

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

Nodejsnpmstepbuild

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

gulpstepbuild

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.

Teamcitybuildgulp

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.

gulpoutputfilesystem

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>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s