how to fix global gulp not working on mac - gulp

I am having problem with installing npm global package
for example
npm install --global gulp-cli
but when i want to run "gulp" it won't run
Local gulp not found in ~
Try running: npm install gulp
running which gulp => /usr/local/bin/gulp

as you can find here in the guide,
you have to install gulp also in your project dependencies
npm install --save-dev gulp
if you try gulp outside a project with gulp instlled as depedency you'll recevie that error
hope this helps

Related

package.json does not update dependencies

I recently tried to run my friend's project on my machine using the angular-cli. The dependencies in the package.json were old on his machine so I tried to update them using the following commands:
npm i -g npm-check-updates
npm-check-updates -u
npm install
The commang ng serve did render a few modules but I get these errors.
What should I do?
Install and save the angular animations to the package.json file.
npm install #angular/animations#latest --save

Trying to run gulp

I'm trying to install gulp in my windows 8 system. When I install npm install -g, it's working fine.
After that, when I install gulp in the required folder, it throws the errors of npm install. When I again install npm in the folder it also throws the errors.

Gulp - Babel - EcmaScript-6 - Redux / Unhandled stream error in pipe

I have a problem with gulp trying to get this app I found on GitHub up and running.
https://github.com/simpulton/eggly-redux
I appreciate if anyone would be interested to have a look at this.
Many thanks in advance.
My repo for this with adjusted package.json and added .babelrc file is here.
https://github.com/mehmettugrulsahin/eggly-redux
Configuration files for quick look are here:
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/package.json
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/webpack.config.js
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/gulpfile.babel.js
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/.babelrc
It should normally be starting up with the following instructions indicated in the ReadMe file, but this did not work out for me.
git clone https://github.com/simpulton/eggly-redux.git
cd eggly-redux
npm i
gulp
Similar questions are already been asked. I have gone through all I
could find from answers to those here, but no luck. That's why I am
asking a new question.
Here is what I have done when it did not work out along with all my findings
I got the following installed just in case when it did not work in the
first place..
npm install -g npm
npm install -g webpack
npm install -g gulp
npm install -g babel
npm install -g browser-sync
npm install browser-sync --save-dev
npm install babel --save-dev
npm install babel-register --save-dev
npm install babel-preset-es2015 --save-dev
npm uninstall babel
npm install --global babel-cli
npm install babel-cli --save-dev
And gulp still gives me the same error
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: ModuleBuildError: Module build failed: ReferenceError: [BABEL] C:\projects-mts\#eggly-redux\client\app\app.js: Unknown option: C:\projects-mts\#eggly-redux\.babelrc.presets
at Logger.error (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\logger.js:58:11)
at OptionManager.mergeOptions (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:126:29)
at OptionManager.addConfig (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:107:10)
at OptionManager.findConfigs (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:168:35)
at OptionManager.init (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:229:12)
at File.initOptions (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\index.js:147:75)
at new File (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\index.js:137:22)
at Pipeline.transform (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\pipeline.js:164:16)
at transpile (C:\projects-mts\#eggly-redux\node_modules\babel-loader\index.js:12:22)
at Object.module.exports (C:\projects-mts\#eggly-redux\node_modules\babel-loader\index.js:71:12)
I figured out that this is something to do with this task in
gulpfile.babel.js
// use webpack.config.js to build modules
gulp.task('webpack', () => {
return gulp.src(paths.entry)
.pipe(webpack(require('./webpack.config')))
.pipe(gulp.dest(paths.output));
});
so I changed
.pipe(webpack(require('./webpack.config')))
to
.pipe(webpack(require('webpack-stream')))
in gulpfile.babel.js. Then gulp gives me the following:
[20:52:57] Requiring external module babel-register
(node:9156) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[20:52:58] Using gulpfile C:\projects-mts\#eggly-redux\gulpfile.babel.js
[20:52:58] Starting 'default'...
[20:52:58] Starting 'webpack'...
[20:52:58] Version: webpack 1.13.1
Asset Size Chunks Chunk Names
43db048c592b328cbb29.js 2.16 kB 0 [emitted] main
[20:52:58] Finished 'webpack' after 366 ms
[20:52:58] Starting 'serve'...
[20:52:59] Finished 'serve' after 75 ms
[20:52:59] Starting 'watch'...
[20:52:59] Finished 'watch' after 46 ms
[20:52:59] Finished 'default' after 494 ms
[BS] Access URLs:
------------------------------------
Local: http://localhost:3000
External: http://192.168.2.2:3000
------------------------------------
UI: http://localhost:3001
UI External: http://192.168.2.2:3001
------------------------------------
[BS] Serving files from: client
along with a file called
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/client/43db048c592b328cbb29.js
instead of bundle.js and my browser says
"NetworkError: 404 Not Found - http://localhost:3000/bundle.js"
if I rename that file to bundle.js then browser gives me
SyntaxError: import declarations may only appear at top level of a module
import 'bootstrap-css-only';
My versions are as follows:
$ npm -v
3.9.5
$ gulp -version
[20:59:02] Requiring external module babel-register
[20:59:02] CLI version 3.9.1
[20:59:02] Local version 3.9.1
$ webpack -v
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.1
Time: 15ms
I noticed your comments after I tried the following :
Deleted the node_modules directory
npm install babel babel-register babel-cli babel-core babel-loader babel-preset-es2015 babel-preset-es2015-webpack browser-sync gulp gulp-rename gulp-template webpack webpack-stream css-loader raw-loader style-loader stylus-loader url-loader --save-dev
npm i
and now I get some other error. I think I made some progress
$ gulp
[15:24:35] Requiring external module babel-register
(node:12704) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[15:24:36] Using gulpfile C:\projects-mts\eggly-redux\gulpfile.babel.js
[15:24:36] Starting 'default'...
[15:24:36] Starting 'webpack'...
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: ./~/css-loader!./~/stylus-loader!./client/app/app.styl
Module build failed: TypeError: C:\projects-mts\eggly-redux\client\app\app.styl:37:1
33| from
34| opacity 0
35| to
36| opacity 1
37|
-------^
Path must be a string. Received undefined
at assertPath (path.js:7:11)
at extname (path.js:887:5)
at new SourceMapper (C:\projects-mts\eggly-redux\node_modules\stylus\lib\visitor\sourcemapper.js:41:7)
at Renderer.render (C:\projects-mts\eggly-redux\node_modules\stylus\lib\renderer.js:94:9)
at C:\projects-mts\eggly-redux\node_modules\stylus-loader\index.js:149:12
at tryCatchReject (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:840:30)
at runContinuation1 (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:799:4)
at Fulfilled.when (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:590:4)
at Pending.run (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:481:13)
at Scheduler._drain (C:\projects-mts\eggly-redux\node_modules\when\lib\Scheduler.js:62:19)
# ./client/app/app.styl 4:14-122./~/css-loader!./~/stylus-loader!./client/app/components/categories/categories.styl
Module build failed: TypeError: C:\projects-mts\eggly-redux\client\app\components\categories\categories.styl:35:1
31| overflow-x hidden
32| overflow-y auto /* Scrollable contents if viewport is shorter than content. */
33| background-color #2B2828
34| border-right 1px solid #7B807E
35|
-------^
The first error you get "Unknown option: .babelrc.presets" comes from the wrong version of babel-core used to build your project. Update the version to 6.9. The version must be equal to the babel-preset-es2015 version
Yes, #Damien Leroux is right.
You altered the original project with a .babelrc file. The babel version that is in the project doesn't understand the presets setting yet. If you update babel-core to the current version it will work. Note that you have to update babel-loader as well:
npm uninstall babel-core --save-dev
npm uninstall babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
After this it worked for me. Your package.json should now be updated:
"devDependencies": {
"babel-core": "^5.4.2",
"babel-loader": "^5.0.0",
Is now
"devDependencies": {
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
I got the app up and running like this
$ gulp
[21:16:33] Requiring external module babel-register
(node:10132) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[21:16:34] Using gulpfile C:\projects-mts\eggly-redux\gulpfile.babel.js
[21:16:34] Starting 'default'...
[21:16:34] Starting 'webpack'...
[21:16:40] Version: webpack 1.13.1
Asset Size Chunks Chunk Names
bundle.js 2.36 MB 0 [emitted] main
bundle.js.map 2.74 MB 0 [emitted] main
[21:16:40] Finished 'webpack' after 5.19 s
[21:16:40] Starting 'serve'...
[21:16:40] Finished 'serve' after 102 ms
[21:16:40] Starting 'watch'...
[21:16:40] Finished 'watch' after 56 ms
[21:16:40] Finished 'default' after 5.37 s
[BS] Serving files from: client
by applying the following:
npm uninstall babel-core --save-dev
npm uninstall babel-loader --save-dev
npm uninstall stylus --save-dev
npm uninstall stylus-loader --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install stylus --save-dev
npm install stylus-loader --save-dev
Many thanks for the inspiration and valuable answers!

Gulp not installed globally?

I've installed Gulp like this:
npm install gulp -g
When I try gulp -v I get this:
[16:19:03] CLI version 3.9.1
But when I try to use gulp in my project by running gulp enter code here I receive:
[16:20:40] Local gulp not found in ~/Code/gulp
[16:20:40] Try running: npm install gulp
What is wrong?
Gulp requires two parts to work in any project:
the gulp object that has the 5 functions attached, (src,dest, watch, run, task). this is installed locally for a project, as well as all the plugins necessary, because it is included in your taskfiles such as gulpfile.js. Its a locally imported module.
npm install --save-dev gulp
the gulp-cli, because this is a command line utility, that can be called from anywhere on your computer. Its a globally accessible cli command. You console needs to be able to see it. You do not import this.
npm install -g --save gulp-cli
you can see more here:
https://www.npmjs.com/package/gulp-cli/tutorial
You have to install gulp inside your project:
npm install --save-dev gulp

Error with gulp serve: Requiring external module babel-register

Running yeoman generator "Webapp", I'm getting an error when running gulp serve. Here are the following versions for a better background :
sw_vers && node -e 'console.log(process.platform, process.versions)'
ProductName: Mac OS X
ProductVersion: 10.11.3
BuildVersion: 15D21
darwin { http_parser: '2.6.0',
node: '5.2.0',
v8: '4.6.85.31',
uv: '1.7.5',
zlib: '1.2.8',
ares: '1.10.1-DEV',
icu: '56.1',
modules: '47',
openssl: '1.0.2e' }
node -v
v5.2.0
gulp -v
Requiring external module babel-register
CLI version 3.9.1
Local version 3.9.1
Finally the gulp serve error:
gulp serve
Requiring external module babel-register
\node_modules/babel-core/lib/transformation/file/options/option-manager.js:372
throw new Error("Couldn't find preset " + JSON.stringify(val) + " relative to directory " + JSON.stringify(dirname));
Does anybody have any idea what the problem could be, any suggestions?
Here's what I've tried:
npm uninstall gulp
npm install gulp
//with global flag and not
npm install --save-dev gulp
//installing babel-register manually w/wo global flag and --save-dev
npm install babel-register
npm cache clean
Also read through several of other posts with similar problem with no success, some of the following :
gulp serve: Failed to load external module babel-core/register
Requiring external module babel/register #726
babel was renamed to babel-core #727
Angular-Fullstack Requiring external module babel-register
yep, after running npm install --global gulp-cli I run gulp -v and I’ve got
Failed to load external module babel-register
Requiring external module babel-core/register
CLI version 1.2.1
Local version 3.9.1
then I updated CLI version to 3.9.1 (same as I have locally) but it did not help.
but when I downgrade CLI version to 3.9.0 it started work correct and message “Failed to load external module babel-register” not shown anymore.
Looks like 3.9.1 is buggy.
Run:
npm install -g gulp#3.9.0
hopefully it'll help you.
maybe this can help.
create .babelrc in your projects, and put this:
{
"presets": [
"es2015"
]
}
I have tried many ways explaining above, including
npm install --global gulp
npm install --save-dev gulp
etc for installation of gulp, but finally found solution by running below command, which change gulp to something gulp-cli on phpStorm command line.
npm install -D babel
npm install babel-cli babel-preset-es2015
me helped when i deleted and again installed both same version as global as local in the project directory the gulp and deleted and reinstal the babel-register.
sudo npm uninstall -g gulp
npm uninstall gulp
sudo npm install -g gulp#3.9.0
npm install gulp#3.9.0
npm uninstall babel-register
npm install babel-register