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:
- 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
- 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
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.
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.
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>