We Keep Coding

How do I run npx commands without prefixing `npx`

For example when I run gulp I don't have to do npx gulp.
I can omit the npx and just run gulp
How do I do this for my own package?
I've added mycommand to the package npm bin config, but I still always have to do npx mycommand for it to work.

It depends on your operating system. On a UNIX-based OS (ie. Linux or Mac) you can use the alias command:
$ alias gulp="npx gulp"
For the rest of your terminal session, you can then run:
$ gulp
to run npx gulp. However, whenever you restart your terminal program, you'll lose the alias.
To make the alias permanent, you need to add the alias command to the appropriate start-up file (eg. .bashrc, .profile, etc.) for your OS. Simply copy/paste the exact command you used before, at the end of that file, save, and restart your terminal. You'll have the alias permanently.
Aliases in Windows are also possible, but are a bit trickier; see Aliases in Windows command prompt.

You don't have to use npx gulp for gulp because it is installed globally
So, there's gulp.cmd, gulp.ps1 and gulp starting npx gulp somewhere in PATH, so you can run them from there
this answer is low effort, feel free to edit it

if you install gulp globally:
npm i -g gulp
you will be able to just run gulp

I would avoid answers suggesting global installs (npm install -g). Global installs guarantee that everyone working on a project has their own unique set of tools, and the reason companies end up with huge wiki pages on "how to get the project working locally".
You mention the "bin config", but perhaps you're misunderstanding that one. That's not for specifying commands that your app will use. If you were making a cli application, the bin section in package.json is where you would specify the commands exported by your project. For example, gulp exports the gulp command like:
"bin": {
"gulp": "./bin/gulp.js"
},
Instead, you would add dependencies needed by your application to devDependencies. This ensures that everyone using the project will get the same version of all of the tools, such as gulp, tsc
Using npx is a far better solution because you can add everything the project needs in devDependencies, and npx will use that version. For the common command line tools, an alias such as #machineghost suggests is a better way to go, but to expand on it a bit:
Sometimes, the name of the command is different from the name of the package. In those cases, the alias can use:
alias tsc='npx --package=typescript tsc'
Normally, when running npx, it will prompt to install if there is not a version found in the current project. This is often a good safeguard, because it reminds you to add it to the devDependencies of the project. However, if you really want it to "just work" like a global install, you can add the "yes" flag:
alias command=`npx -y gulp`
This will use the version specified in the current project if present, but install it and run it directly if not.

How could the vue-cli-service crash because of the '#vue/cli-plugin-babel' module, if the node module is there?

Some background:
I started my project with a clone of this repository. Here's an example of the code. After some time, I realized that the vue-cli-service it used appeared to be old. (They even renamed it to '#vue/cli-service'). So, I ran npm update. The code has me use npm run serve to start the service. It's apparently equivalent to npx vue-cli-service serve. When I did that, it couldn't load some bootstrap stuff. I reinstalled bootstrap (npm install bootstrap#version (don't have access to the exact line I used). It then said it couldn't find '#vue/cli-plugin-babel'. I saw it right in the node_modules folder.
I fixed it using this process:
I ran npm update.
It first said that it could not find a font (no longer have the specific details). The error directed to the bootstrap.css file.
I reinstalled bootstrap.
I run npm run serve, and it says "Cannot find module '#vue/cli-plugin-babel'"
I see '#vue/cli-plugin-babel' showing in the node_modules folder
I run npm list --depth=0, and '#vue/cli-plugin-babel' does not show up.
I*’m seeing this
npm cache clean --force alone did not cause the site to resume. It still said “ Cannot find module '#vue/cli-plugin-babel'”.
Following the top SO answer here got my site to work again.
rm -rf node_modules/
npm cache clean (then replaced with npm cache verify on npm's prompt)
npm install (I wonder if it was possible to ignore ‘rm -rf node_modules/’ and just do the last two steps).
I run npm run serve, and the site works again.
After running npm list --depth=0 again, there are no more UNMET DEPENDENCY issues, like with #6.
Also on that SO Q&A, people talked about restructuring (reordering) the package.json file. In the top answer he says that a possible solution is to “Re-structure your package.json. Place all the high-level modules (serves as a dependency for others modules) at the bottom.”. I wonder if that relates to my issue.
My expected vs. actual results:
When I updated it, I actually sort of expected it to break. I got that.
But what I also expected was:
If the node module is there, it will not give me an error.
If I run npm install, all dependencies will be handled automatically.
If npm install doesn't do the trick, then npm cache clean --force should do the trick. (Note: I later learned about npm cache verify).
I got:
The '#vue/cli-plugin-babel' module was there and it gave an error saying it couldn't find it.
(And also 3.) Running npm install and npm install [unmet-dependency] did not work until after 'rm -rf node_modules/' -> `npm verify cache' and THEN -> 'npm install'.
Here are my guesses:
#vue/cli service doesn’t check the folders directly to see if a module exists (75% chance it’s true)
#vue/cli service uses a proxy, something like the packages.json file (but different) to see if a node exists (40%).
#vue/cli service caches commonly used stuff. So, when I ran it again after the update, it didn’t check the new stuff in my folder, it checked its cache. It didn’t line up. (10%).
For everything above, replace #vue/cli service with npm (10%).
Again, my biggest question is "How could the vue-cli-service crash because of the '#vue/cli-plugin-babel' module, if the node module is there?"
And "How did removing the node_modules folder, verifying the cache, and reinstalling with npm cause npx vue-cli-service serve to successfully run my site again (and find #vue/vue-plugin-babel)?".

Gulp install works but gulp is not responding

I am following the "gulp quick start" and everything is getting installed without error messages neither warnings. But when I try to check the gulp version on the end of the "gulp quick start" it returns
'gulp' is not recognized as an internal or external command,operable program or batch file.
The gulp quick start: GULP
When I check the first things in the "gulp quick start" the "check for node,npm and npx" it all works fine. I am getting normal responses.
The next step is installing gulp
When I install gulp evereything goes whell, the files are being created there our no error/ warnings displayed.
BUT when I am trying to run a gulp command on the end of the installation to test if gulp works. it returns gulp' is not recognized as an internal or external command,operable program or batch file.
I tried installing it multiple times. I have no idea what i am doing wrong.
Any help is welcome.
My device is running windows 10

I have no idea why but... my npm was broken.
I tried to download something with npm but that did not work ass well so I figured my npm was broken.
When I reinstalled npm everything worked fine.

Trouble in installing Grunt in my windows machine

I am trying to install grunt-cli in my pc globally by command
npm install -g grunt-cli
after this I am not getting any error. But when I try to run grunt command I am getting error.
Screen shot has been attached.

Please check Grunt on Windows 8: 'grunt' is not recognized.
You need to correct PATH from environment variable.

Here you have installed grunt but not configured it. You will have to create a Gruntfile.js which is read by grunt and it should have a default task. This default task will be run when you are typing "grunt". And this file should be exactly in the folder from where you are running "grunt" command.
For a kick start go through the following url:
http://www.thegeekstuff.com/2014/08/grunt-introduction/
It gives a very easy and minimized introduction to getting started with grunt avoiding all the complexities which you can explore later once you are comfortable.

Kishore,
It looks like grunt isn't in your path. Try running path=%PATH%;%APPDATA%\npm in your shell.

Why does grunt not work when installed globally?

I have installed grunt and grunt-cli globally using sudo npm install -g grunt... commands.
My working folder is `/opt/web', please don't ask why :)
Checking grunt version inside `/opt/web' works:
$ grunt --version
grunt-cli v0.1.13
However, I can't actually run a grunt task from there:
$ grunt
grunt-cli: The grunt command line interface. (v0.1.13)
Fatal error: Unable to find local grunt.
If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project.
If I install grunt locally, it then asks to install all it's dependencies locally (that are already installed globally (!)).
This behavior seems strange to me.
My question is:
Is this a bug or a feature? Is this by design that grunt wants to work with locally installed things only?

This is by design. See the grunt-cli readme.
The cli doesn't do anything except find and run a local copy of grunt.
This means that each project can use a version of grunt that the project specifies and is know/tested to work correctly. Given the number of critical things grunt can do, this compatibility promise is a big deal.
There is also a good blog post on the node site that talks a bit more about module installation locations.