Using Gulp with Visual Studio Team Services - build

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?

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.

Related

Expo won't build with locally installed NPM packages

I am using expo#43.0.3 (and expo-cli#5.0.3) to manage my react native project and I have to install an npm package from local source:
$ npm install /path/to/mypackage
In my package.json the package is successfully linked via
"dependencies": {
...
"myPackage": "file:../../mypackage",
...
}
I can also confirm the package works when installing to a new plain node project (same node version 14.8.2)
Now when I start expo via expo start and navigate to the app it does not throw any error but only a warning:
› Reloading apps
warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.
When using the package from registry everything builds, however.
I tried to use the private packages section form the expo docs, but they only describe how to use private packages from registry but not local.
Anything I'm missing here?
edit:
After resetting the expo network adapters it loads the bundle but it now says it can't find the package:
Unable to resolve module myPackage from /home/user/path/to/myPackage/file.js: myPackage could not be found within the project or in these directories:
node_modules
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
However, I'm not using watchman and I'm not using yarn and rmoving metro- folders from /tmp did not make a difference.
As it turned out in this issue on GitHub it can be solved via npm pack:
run npm pack inside of your library and then npm install path/to/the/packed/file.tgz from your project
Which worked fine for the setup I described in the question.

Why should I use ember install over NPM or yarn?

I'm new to ember and I discover the command ember install pkg and I'm wondering why such package instead of using external package manager such as yarn or npm which are industry-wide/de-facto standard.
Question
Why should I use ember install over NPM or yarn?
ember install addon-name is a short hand for npm install --save-dev addon-name && ember g addon-name
The documentation provides the answer for this one (ctrl + f ember install):
Installs the given addon into your project and saves it to the
package.json file. If provided, the command will run the addon’s
default blueprint.
The release notes for version 0.1.5 provide a clue for this as well:
#2805 Added the install:addon command, which installs an addon with NPM and then runs the included generator of the same name if it
provides one.
So, ember install is just a replacement for npm in most cases but when a blueprint is provided it will run those as well.

VSTS Bower not found

We are using Visual Studio Team Services for build and deployment of several sites. Some .NET and some are not. All working fine when using the hosted agent. Due to performance issues and long queue times for the hosted agent we need to use our own build agent.
Here comes the problem:
When running the VSTS builds we get an error when running bower:
******************************************************************************
Starting: bower install
******************************************************************************
C:\Program Files (x86)\nodejs\npm.cmd install -g bower
C:\Windows\ServiceProfiles\NetworkService\AppData\Roaming\npm\bower -> C:\Windows\ServiceProfiles\NetworkService\AppData\Roaming\npm\node_modules\bower\bin\bower
bower#1.7.9 C:\Windows\ServiceProfiles\NetworkService\AppData\Roaming\npm\node_modules\bower
Not found bower: null
******************************************************************************
Finishing: bower install
******************************************************************************
The problem is that bower is actually in that location:
And here are the actual bower build step:
How can we fix this Not found bower: null error?
There are known issues with tools installed into profile folders it has to do with permissions. It's easier to install the tool from an administrative console with the -g parameter. And ensure that the central NPM version is added to the service or system's %path% environment variable.
Or pass in a specific location by adding additional parameters to the call to npm: npm install --prefix "$(Agent.WorkFolder)" Bower Then specify the same location in the Advanced section of the Bower task.
Bower CLI location: $(Agent.WorkFolder)\node_modules\
(You'd need to check the exact location the package is installed to, I'm slightly guessing at the moment ;)).

ENOENT error when doing ionic start

I upgraded to beta.23 and started to get an error when created a new project using 'ionic start foo --v2 --verbose'.
The error in red says
"Unable to spawn commandError: spawn npm ENOENT (CLI v2.0.0-beta.23)."
I have npm installed and can run from Windows 8 cmd line.
I tried upgrade to node v5.9.1.
I confirmed npm is in the PATH environment variable and can run npm from cmd shell.
Any ideas how to fix or debug further would be appreciated.
Here is the complete output:
C:\ionic2>ionic start foo --v2 --verbose
Task setting: title=start, name=start, summary=Starts a new Ionic project in the
specified PATH, [options]=any flags for the command, <PATH>=directory for the n
ew project, [template]=Starter templates can either come from a named template,
(ex: tabs, sidemenu, blank),
a Github repo, a Codepen url, or a local directory.
Codepen url,
Defaults to Ionic "tabs" starter template, --appname|-a=Human readable name for
the app (Use quotes around the name), --id|-i=Package name for <widget id> confi
g, ex: com.mycompany.myapp, title=Skip npm package installation, boolean=true, t
itle=Create a basic structure without Cordova requirements, boolean=true, title=
Setup the project to use Sass CSS precompiling, boolean=true, title=List starter
templates available, boolean=true, --io-app-id=The Ionic.io app ID to use, --te
mplate|-t=Project starter template, boolean=true, title=Start a Ionic v2 project
, boolean=true, title=(with --v2 only) Use TypeScript in starter, --zip-file|-z=
URL to download zipfile for starter template, module=./ionic/start, disableChang
ePwd=true
Utils.preprocessCliOptions _=[start, foo], skip-npm=false, no-cordova=false, w=f
alse, sass=false, s=false, list=false, l=false, v2=true, v=false, typescript=fal
se, -ts=false, verbose=true, $0=C:\Program Files\nodejs\node.exe C:\Users\bradtk
e\AppData\Roaming\npm\node_modules\ionic\bin\ionic
One awesome Ionic app coming right up...
Creating Ionic app in folder C:\ionic2\foo based on tabs project
Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip
[=============================] 100% 0.0s
Downloading: https://github.com/driftyco/ionic2-starter-
tabs/archive/master.zip
[=============================] 100% 0.0s
Installing npm packages...
Running exec command: npminstall
Utils.fail Unable to run spawn commandError: spawn npm ENOENT undefined
Utils.fail stack undefined
Utils.errorHandler is set, calling that now
Cli.Utils.errorHandler msg Unable to run spawn commandError: spawn npm ENOENT st
ring
Unable to run spawn commandError: spawn npm ENOENT (CLI v2.0.0-beta.23)
Your system information:
Cordova CLI: 6.1.0 (cordova-lib#undefined)
Ionic CLI Version: 2.0.0-beta.23
Ionic App Lib Version: 2.0.0-beta.13
OS: Windows 8.1
Node Version: v5.9.1
Regards,
bruce
I have the exact same issue. Worked in beta 22.
Reverting to the earlier beta resolved the issue:
npm install -g ionic#2.0.0-beta.22
Move into folder of your application and run npm install. I don't know what is happening but sound like start script trying to execute npminstall rather than npm install:
Installing npm packages...
Running exec command: npminstall
This is a known issue with the CLI on windows. Downgrading to cli beta22 can work as workaround for now, but this will be fixed in the next release
Upgrading npm worked for me.
npm install -g npm

How do I use my fork of ember-data in ember-cli?

I'm working on a pull-request for ember-data, and I'd like to be able to test these changes in my ember-cli app.
It doesn't work to follow the directions for using canary here or here, as my fork does not get built my components.
I've tried referencing my fork and branch in packages.json as well as bower.json; then I get this error:
Path or pattern "bower_components/ember-data/ember-data.js" did not match any files
I can then build ember-data manually and copy the file to bower_components/ember-data/ember-data.js. However, I would like a streamlined way to use a fork of ember-data so I can use and test my pull-request without a lengthy install process.
Is there a better way?
Thanks!
You can use a symlink to your local version of a bower and/or npm dependency.
Go to your local (forked) version of ember-data and
npm link
bower link
This will make a global symlink to your local version.
Then go to where you're using the dependency and
npm link ember-data
bower link ember-data
This will make node_modules/ember-data and bower_components/ember-data a symlink to your local version.
See https://docs.npmjs.com/cli/link and http://bower.io/docs/api/#link for more details on how these work.
You are getting that error because you are trying to use the NPM package of ember-data with Bower, and Bower needs ember-data to be precompiled. You were correct to fork emberjs/data and reference your fork in package.json. Here is how I compiled my fork for bower:
In your forked repo, run npm install and npm run build:production to compile your fork in the dist directory.
Then fork the ember-data shim for bower: components/ember-data. Copy the following files from your ember-data fork's dist directory into the shim's directory:
bower.json
component.json
composer.json
ember-data.js
ember-data.js.map
ember-data.min.js
ember-data.prod.js
package.json
Edit the bower/package files if you want to add your own version tag. Commit the shim repo to a branch or master, and then reference that commit in your ember-cli app's bower.json file. Then run npm install and bower install in your ember-cli app.