Using Gulp with Visual Studio Team Services

Question

I'm looking to set up automated builds with Visual Studio Team Services but I keep running into trouble. My build definition:

npm install gulp
npm install --save-dev jshint gulp-jshint ruby
npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
gem install sass
gulp

The build fails when attempting to install the sass gem with "'gem' is not recognized as an internal or external command". If I build without installing the sass gem first, gulp will fail with "'sass' is not recognized as an internal or external command". Anyone have experience with getting sass to work in Visual Studio Team Services?

Answer 1

There seem to be several issue here. First you might need to make you familiar how npm works, whats the meaning of --save-dev and whats the difference between local and globally installed modules.

--save-dev is used to save the package for development purpose, while --save is used to save the package required for the application to run. Both are commands which you run on your development machine and you put the resulting package.json under version control. On the build server you will just run an npm install which will restore all the packages listed in the package.json.

These is for local modules. You can also install modules globally using the -g flag. This will store them outside of your current project, and binaries will be available in your PATH variable. Modules which you need inside your project (using require) need to be installed locally. Modules you'll call from the shell (eg gulp-cli) need to be installed globally.

Therefore what you need to do:

• On your development machine add all local npm modules using npm install with either the --save or --save-dev flag.
• Put the resulting package.json file under version control.
• On the build server you need to make sure that all required global npm modules are installed.
• Call npm install using the VSTS npm task to restore the local npm modules. You won't need to specify which modules need to be installed, since they're already listed in the package.json file.
• Call gulp using the VSTS gulp task with the appropriate arguments.