Cannot use grunt on simple Yeoman angular - angularjs

Trying to just startup a simple angular app via Yeoman, using steps in this guide
http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
and get this error when trying to run grunt or grunt server:
Loading "Gruntfile.js" tasks...ERROR
Error: Cannot find module 'load-grunt-tasks'
Warning: Task "default" not found. Use --force to continue.
Here are my versions:
yo --version && grunt --version && bower --version
1.1.2<
grunt-cli v0.1.13
grunt v0.4.4
1.3.1
See screencast of this in action:
http://screencast.com/t/4ToPw3SlL2

I just encountered the same problem today, managed to resolve it with the answers here.
Basically I needed to update npm to latest version,
by using this command (the npm which came with Node-v0.10.29 package was outdated)
npm update npm -g
or
sudo npm update npm -g (i used this command on my mac)
Then type this command
npm --version (it should show 1.5.0-alpha-4 or later version)
Then type the grunt serve command
grunt serve
If you still have issues, then try running these commands
npm install
or
sudo npm install (i used this command on my mac)
Then try grunt serve command again,
grunt serve
This time, it worked for me.
If it didn't, then try this command
bower install (i did not have to use this command)

Run the following commands from the directory that has the Gruntfile.js for your project:
npm install
npm install -g bower
bower install
This will install all npm and bower based dependencies for your project.
In the screencast at 1:18 it shows install errors tied to at least multimatch. load-grunt-taskis dependent on multimatch.

Installed "load-grunt-tasks" module locally
ie
npm install load-grunt-tasks
instead of
npm install -g load-grunt-tasks

Related

cannot read property 'apply' of undefined gulp

I am trying to use the ng-factory generator to scaffold a new project to build an angularjs component. After the project has been created with the yo ng-factory command, I tried to run it using the gulp serve task but found the following error:
c:\projects\bywebclient>gulp serve
[11:20:51] Loading C:\projects\bywebclient\gulp_tasks\browsersync.js
[11:20:52] Loading C:\projects\bywebclient\gulp_tasks\karma.js
[11:20:57] Loading C:\projects\bywebclient\gulp_tasks\misc.js
[11:20:57] Loading C:\projects\bywebclient\gulp_tasks\webpack.js
[11:21:07] Using gulpfile c:\projects\bywebclient\gulpfile.js
C:\Users\ATUL KALE\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129
gulpInst.start.apply(gulpInst, toRun);
^
TypeError: Cannot read property 'apply' of undefined
at C:\Users\ATUL KALE\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:
19
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Module.runMain (module.js:577:11)
at run (bootstrap_node.js:352:7)
at startup (bootstrap_node.js:144:9)
at bootstrap_node.js:467:3
Am I missing something? I already tried to run again the npm install
Thanks,
Atul Kale
Try to reinstall gulp-cli :
npm install -g gulp-cli
npm install -g gulp-cli
And important: after running that command, open a new terminal so it'll take effect.
Upgrade to 4.0 like this:
npm install --save-dev github:gulpjs/gulp#4.0
Uninstall the global gulp installation and local gulp-cli installation. While keeping global gulp-cli and local gulp packages.
npm uninstall -g gulp
npm uninstall -g gulp-cli
npm install -g gulp-cli
npm install --save-dev github:gulpjs/gulp#4.0
I get below error everytime i run
npm install gulp -g --save
TypeError: Cannot read property 'apply' of undefined
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
at _combinedTickCallback (internal/process/next_tick.js:132:7)
at process._tickDomainCallback (internal/process/next_tick.js:219:9)
I tried:
npm i -g gulp-cli
and it works for me.
If again i run
npm install gulp -g --save
the above error returns. I noted when i first installed Gulp it was saved in my package.json but now it's absent.
I tried uninstalling both gulp and gulp-cli from my machine (locally and globally), but after uninstall gulp -v, it still showed Gulp CLI 3.9.1, even in new terminal window.
In the end, these are the steps that finally worked for me (seems like CLI simply got cached hard):
Navigate to your project and delete node_modules folder.
Run following:
npm uninstall gulp --global
npm uninstall gulp-cli --global
apt-get remove npm
apt-get remove nodejs
apt-get install nodejs
apt-get install npm
npm install --global gulp-cli
Navigate to your project and run:
npm install
Close current terminal, open new one and check for success:
gulp -v
Should say CLI version 2.1.0 (as of time of writing).
Now you can run your gulp tasks without that error :)
In my case, I had an automated script which was doing npm install gulp (...) and until v3.9x it was fine.
After some time, that naive install would pick v4.0.0, which breaks my CI.
Changing the script to do npm install gulp#3.9.1 reverted things back to normal.
Reinstall gulp and gulp-cli, to install the last version.
npm uninstall -g gulp
npm uninstall -g gulp-cli
npm install -g gulp-cli
npm install -g gulp
And then, close the terminal and open new.
*This command no longer works: npm install --save-dev github:gulpjs/gulp#4.0

how can I get grunt running?

trying to build my angular app by calling grunt but receiving this error:
Warning: Task "build" not found. Use --force to continue.
Using the force option does not work. I tried to run :
npm install grunt --save-dev
This did not help either?
Did you install the grunt-cli from NPM? It's the command line interface for Grunt to run.
$ npm install -g grunt-cli

How install Start Angular template correctly?

I'm new in the Angular development, so I found this template and I would like to use it. So I'm doing this:
sudo apt-get install -y nodejs
sudo apt-get install -y npm
sudo npm install -g bower
sudo npm install -g grunt-cli
Clone the repository of the project:
git clone https://github.com/start-angular/sb-admin-angular.git
cd sb-admin-agular
npm install bower
But when I try to execute the command npm start, it gives me the follow error:
vagrant#TheMachine:~/sb-admin-angular$ npm start
> sb-admin#0.0.0 start /home/vagrant/sb-admin-angular
> grunt serve
/usr/bin/env: node: No such file or directory
npm ERR! weird error 127
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian
npm ERR! not ok code 0
vagrant#TheMachine:~/sb-admin-angular$
Any idea how to solve that ? Or what is causing it ?
You might be missing some dependencies. Looks like you only installed bower. Try installing all dependencies using
npm install
Re-follow the installation instructions on the Github page from 5-7:
npm install - bower install is ran from the postinstall
npm start - a shortcut for grunt serve
npm run dist - a shortcut for grunt serve:dist to minify the files for deployment
Some installation routines requires to find the binary "node".
But on Debian based systems the binary is named "nodejs".
To get around this problem I created a syslink.
But be aware that this may introduce other problems later.

Local Npm module "grunt-legacy-util" not found. Is it installed?

i have a problem with grunt serve,(i dont know if it's normal) grunt serve said me "works without errors" but the first message is local npm module "grunt-legacy-util" not found. Is it installed?", i need to delete node_modules folder and make npm install to can work with the server. i do grunt update, npm install grunt-legacy-util, npm install,npm update, but say same message...i use angularjs make with yeoman and webstorm, any idea please?
You can run a sudo command on it as perhaps the file isn't accessible/hidden (for some odd reason).
sudo npm install -g grunt-legacy-util
Check out this GitHub post should that not work: https://github.com/Widen/fine-uploader/issues/1165
It could also be that your NPM that is installed globally is clashing with the NPM in your root directory. Though unlikely.
This is what worked for me:
npm update
The running this following commands again fixed it for me:
npm install -g bower,
npm install -g grunt-cli,
bower install,
npm install.

Setting up grunt, bower, angular dev tools after cloning from github

I am trying to clone a project from github then set up the bower dependencies and grunt build / dev tools. When angular projects are initialy pushed to github, certain directories and files have been shed (since they are listed on the gitignore file). I am trying to figure out how to resurrect all these files necessary to locally run a project (that I find from browsing on github).
After cloning the project, I run the bower command so that it reads through bower.json:
% bower install
Then I run the grunt commands:
% npm install -g grunt-cli
% npm install grunt --save-dev
Why is the Gruntfile.js not automatically created when I run these terminal commands?
It also hangs up on an issue related to livereload but that evaporates after I run these:
% npm install --save-dev connect-livereload
% npm install
When I start a project from scratch with these yeoman and grunt commands, it automatically creates the Gruntfile.js and I can successfully get the project to auto-load in the browser:
% npm install -g generator-angular
% yo angular
% bower install angular-ui
% npm install --save-dev connect-livereload
% npm install
% grunt test
% grunt server
% grunt
But I am trying to master the technique of cloning a project from github and then setting up the project locally. I am close but currently I am also experiencing an issue with a missing Gruntfile.js. I would be very grateful for any direction you could provide. All the best,
Ben
Using Yeoman
You don't need to clone the project from GitHub.
You simply need to make a new (clean) project directory.
cd /new/project/directory
(Optional) Update NPM
npm update -g npm
Install angular scaffold
npm install -g generator-angular
Run yeoman scaffold
yo angular
Fire up a server
grunt server
Start building your app, perhaps with Angular sub-generators
yo angular:controller myController
yo angular:directive myDirective
yo angular:filter myFilter
yo angular:service myService
Using bower to install front-end dependencies
Search for repos to install
bower search dep-name
or, http://sindresorhus.com/bower-components/
See what all has been installed
bower list
or, see your bower.json file
Installing dependencies
bower install dep-name
or, add it to bower.json file then simply run bower install(Preferred)
Most of all, Read Documentation
Yeoman Getting Started
Bower
Grunt
I would recommend reading through Yeoman first. Get the hang of it, then move on to the other docs once you need more advanced customization for your project. Generally, the Yeoman docs cover bower and grunt well as it relates to your Yeoman project.
I get it working after do the following:
brew install nvm
source $(brew --prefix nvm)/nvm.sh
It will install nvm then you can controll your npm version (may you have problem with this with yo:angular project)
Then you should make sure that you are using npm 0.10
nvm install 0.10
nvm use 0.10
To avoid problems with previous npm installations cached you should use:
sudo npm -g cache clean
Now you are ready to get your yo:angular project working in your machine:
git clone <yourproject>
cd <your-project-directory>
npm install
It will install grunt and karma for you, then you should install all bower packages before start your dev server:
bower install
Then, finally, your project are done to be working so you can use:
grunt serve
:)

Resources