1

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?

Mike
  • 517
  • 2
  • 5
  • 21
  • What VSTS tasks are you using and with what settings? Also running `npm install` with `--save-dev` doesn't make sense on a build server. – Pascal Berger Oct 05 '16 at 22:26
  • I'm using npm, command line, and gulp with the default settings. I have almost no experience with setting up automated builds and no experience with gulp so everything is sort of cobbled together with tutorials I found. Why does `--save-dev` not make sense on a build server? – Mike Oct 06 '16 at 12:51
  • So to what does the above command line statements relate to? – Pascal Berger Oct 06 '16 at 17:43
  • Are you using hosted build agent? – Eddie Chen - MSFT Oct 11 '16 at 02:16

1 Answers1

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.
Pascal Berger
  • 4,262
  • 2
  • 30
  • 54
  • 1
    I'm still getting them same problem. My package.json: `"devDependencies": { "del": "^2.2.2", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", "gulp-cache": "^0.4.5", "gulp-concat": "^2.6.0", "gulp-cssnano": "^2.1.2", "gulp-imagemin": "^3.0.3", "gulp-jshint": "^2.0.1", "gulp-livereload": "^3.8.1", "gulp-notify": "^2.2.0", "gulp-rename": "^1.2.2", "gulp-ruby-sass": "^2.1.0", "gulp-uglify": "^2.0.0", "jshint": "^2.9.3", "ruby": "^0.6.1" }` – Mike Oct 08 '16 at 20:54
  • Sorry, I need much more information to being able to help: What's the exact error you get? How does your gulp file looks like? Does the gulp task run locally? Which modules have you installed globally? – Pascal Berger Oct 08 '16 at 22:01
  • Do you still try to call `gem install sass` which fails? In this case, whats the reason you wan't to use Ruby Sass and not LibSass with the node-sass binding and the gulp-sass module? – Pascal Berger Oct 08 '16 at 22:08
  • Honestly I just went with that because it was what I found on a tutorial. Anyway, I used LibSass instead and got a stylesheet to compile on my dev machine. However, in VSTS everything seems to go fine but there is no file output to the repository. Are the built files put somewhere else? – Mike Oct 09 '16 at 01:54
  • We're leaving the scope of this question :) What is done really depends on your gulp script and VSTS task. What do you mean by "no file output to the repository"? Do you expect your generated files to be put under version control? What's the reason for this? I would suggest to not do this since this leads to different problems, like that you eg. no longer can automatically trigger builds on commits, since commits also happen during build and this would lead to infinite builds. – Pascal Berger Oct 09 '16 at 13:07
  • The most common scenario is like this: - Run your gulp task which processes all files and writes them to a build or dist directory - Use the VSTS publish task to publish the files from the build or dist directory as build artifacts – Pascal Berger Oct 09 '16 at 13:08
  • I'm not sure I understand. If I'm compiling everything into style.css, where is it going? – Mike Oct 11 '16 at 01:09
  • As said, it depends what you are doing in your gulp script... But I cannot help you without knowing what you are trying to do, what you are doing in your gulp script and what your real question is. Since it seems like this all looks very new to you, and you don't have any specifc questions, I would suggest that you use one of the many available resources on the internet to learn gulp and VSTS first, and come back if you have any specific questions. – Pascal Berger Oct 11 '16 at 09:33