How to upgrade to Gulp 4 through some npm script? - node.js

I am using gulp version 3.9.0.
I want to upgrade it to version 4 in order to make use of features like gulp.series etc.
However on executing npm install command I want to make sure whether gulp version is minimum 4.x and if not it should upgrade itself to gulp 4.x but better through some separate .js script file, present in the root folder of my app.
Now I guess because 4.x is not yet official for gulp, so the file should execute the following commands as indicated in Mike Street's Blog (see link), in order to remove gulp locally.
npm uninstall gulp --save-dev
npm install 'gulpjs/gulp.git#4.0' --save-dev
How can I do that?
Note: The upgrade of gulp should only occur if version of gulp present in node_modules folder is less than 4.x. Please consider me a novice in node/npm.

Related

How to fix "ReferenceError: primordials is not defined" in Node.js

I have installed Node.js modules by 'npm install', and then I tried to do gulp sass-watch in a command prompt. After that, I got the below response.
[18:18:32] Requiring external module babel-register
fs.js:27
const { Math, Object, Reflect } = primordials;
^
ReferenceError: primordials is not defined
I have tried this before gulp sass-watch:
npm -g install gulp-cli
I hit the same error. I suspect you're using Node.js 12 and Gulp.js 3. That combination does not work: Gulp.js 3 is broken on Node.js 12 #2324
A previous workaround from Jan. does not work either: After update to Node.js 11.0.0 running Gulp.js exits with 'ReferenceError: internalBinding is not defined' #2246
Solution: Either upgrade to Gulp.js 4 or downgrade to an earlier version of Node.js.
We encountered the same issue when updating a legacy project depending on gulp#3.9.1 to Node.js 12+.
These fixes enable you to use Node.js 12+ with gulp#3.9.1 by overriding graceful-fs to version ^4.2.10.
If you are using pnpm
pnpm supports overriding some dependencies versions. To do it, you should add a pnpm section in your package.json file:
{
"pnpm": {
"overrides": {
"graceful-fs": "^4.2.10"
}
}
}
If you are using yarn v1
Yarn v1 supports resolving a package to a defined version.
You need to add a resolutions section to your package.json:
{
"resolutions": {
"graceful-fs": "^4.2.10"
}
}
Thanks #jazd for this way to solve the issue.
If you are using npm
Run this command to know which version of Node.js you are using:
node -v
It will return a version number <major>.<minor>.<patch> such as 18.11.0.
If your version is v16.14.0 or above, then you can override the version of graceful-fs by adding an overrides section in your package.json file:
{
"overrides": {
"graceful-fs": "^4.2.10"
}
}
Otherwise, you need to use npm-force-resolutions as a preinstall script to be able to override the version of graceful-fs by changing your package.json file like this:
{
"scripts": {
"preinstall": "npx npm-force-resolutions"
},
"resolutions": {
"graceful-fs": "^4.2.10"
}
}
npm-force-resolutions will alter the package-lock.json file to set graceful-fsto the wanted version before the install is done.
If you are using a custom .npmrc file in your project and it contains either a proxy or custom registry, you might need to change npx npm-force-resolutions to npx --userconfig .npmrc npm-force-resolutions because some versions of npx don't use the current folder .npmrc file by default.
Origin of the problem
This issue stems from the fact that gulp#3.9.1 depends on graceful-fs#^3.0.0 which monkeypatches Node.js fs module.
This used to work with Node.js until version 11.15 (which is a version from a development branch and shouldn't be used in production).
graceful-fs#^4.0.0 does not monkeypatch Node.js fs module anymore, which makes it compatible with Node.js > 11.15 (tested and working with versions 12, 14 and 16).
Note that this is not a perennial solution but it helps when you don't have the time to update to gulp#^4.0.0.
Fix it in one minute:
Just follow these steps. I'm on Windows 10 and it worked perfectly for me!
In the same directory where you have package.json create a npm-shrinkwrap.json file with the following contents:
{
"dependencies": {
"graceful-fs": {
"version": "4.2.2"
}
}
}
Run npm install, and don't worry, it will update npm-shrinkwrap.json with a bunch of content.
Run gulp to start the project.
Use the following commands and install Node.js v11.15.0:
npm install -g n
sudo n 11.15.0
will solve
ReferenceError: primordials is not defined in node
Referred from #Terje Norderhaug #Tom Corelis answers.
Use the following commands to install Node.js v11.15.0 and Gulp.js v3.9.1:
npm install -g n
sudo n 11.15.0
npm install gulp#^3.9.1
npm install
npm rebuild node-sass
It will solve this issue:
ReferenceError: primordials is not defined in node
For me, Diego Fortes' answer works with one small change.
Here is my workflow if this error appears:
npm install
npm install gulp
create file npm-shrinkwrap.json with
{
"dependencies": {
"graceful-fs": {
"version": "4.2.2"
}
}
}
npm install (again) (Not npm install gulp again! Very important - otherwise the error will be come back)
gulp (now working)
Using NVM to manage what Node.js version you're using, running the following commands worked for me:
cd /to/your/project/
nvm install lts/dubnium
nvm use lts/dubnium
yarn upgrade # or `npm install`
Simple and elegant solution
Just follow these steps. It worked perfectly with npm install running multiple times or installing any other modules or even publishing project to artifactory.
In the same directory where you have package.json create a npm-shrinkwrap.json file with the following contents:
{
"dependencies": {
"graceful-fs": {
"version": "4.2.2"
}
}
}
Run npm install, and don't worry, it'll update npm-shrinkwrap.json with a bunch of content. Let's get rid of this updates by updating package.json scripts options.
"scripts": {
"preshrinkwrap": "git checkout -- npm-shrinkwrap.json",
"postshrinkwrap": "git checkout -- npm-shrinkwrap.json"
}
Now you can run npm install and your npm-shrinkwrap.json will be intact and will work forever.
Gulp 3.9.1 doesn't work with Node v12.x.x, and if you upgrade to Gulp 4.0.2, you have to completely change gulpfile.js with the new syntax (series & parallels). So your best bet is to downgrade to Node.js v 11.x.x (the 11.15.0 version worked fine for me) by simply using the following code in a terminal:
nvm install 11.15.0
nvm use 11.15.0 # Just in case it didn't automatically select the 11.15.0 as the main node.
nvm uninstall 13.1.0
npm rebuild node-sass
TL:DR
Gulp 3.* doesn't work on Node.js 12.* or above. You have to downgrade Node.js, or upgrade Gulp.
If you are short on time, downgrade Node.js to v11.* or below; if you need newer features, and have time to possibly fix a load of broken dependencies, upgrade Gulp to 4.* or above!
As others have already mentioned, Gulp 3.* is not supported on Node.js 12 or above, so you will have to downgrade your Node version to 11.* or below, OR upgrade your Gulp to 4.0.
The best option depends ultimately on how much time you have, as upgrading Gulp brings benefits of cleaner gulpfiles and in-built control over having tasks run in series or parallel, but also relies on you rewriting your gulpfile to a new syntax, and might (read: probably will - see end of this comment) cause conflicts with some dependencies.
Downgrading Node.js
This is the easiest and quickest option. Especially if you use n or nvm, as these allow you to very quick install and switch between Node.js versions.
Installing Node.js version on N
n 10.16.0
Installing a Node.js version on NVM
nvm install 10.16.0
Once you have done this, you may need to rebuild your npm dependencies or alternatively remove both your node_modules folder and your package-lock.json file and reinstalling your dependencies. Though if you are merely reverting to a preexisting Node.js version, you should probably be fine.
Upgrading Gulp
As mentioned above, this is a more time-intensive task, but it might bring benefits in the long run. For example, Node.js 12 has now introduced native support for ES Modules (behind an experimental flag) and full support in Node.js 13.
You may need to upgrade Node.js to use that, forcing you to upgrade Gulp. Or you may simply want the benefits of using Gulp 4, as it offers better and more efficient control over writing tasks.
There are a number of articles on this already, so I won't elaborate any further on the specifics, but to reiterate - this is not a quick job. Depending on the size of your project, there may be some notable rewriting required, and you may have dependencies that break. If you are in short supply of time, you should opt for simply downgrading Node.js, at least temporarily.
But I already have Gulp 4, and it still doesn't work!
If, like me, you are already using Gulp 4+ (I was using Gulp 4.0.2, originally on Node.js 10) and have recently upgraded (I upgraded to Node.js 13.8.0) are you are still getting the issue, it may be because a dependency is relying on an older version of Gulp, and that is getting caught in the pipeline.
In my case, gulp-combine-mq was a dependency using Gulp 3.9.*. Disabling this task in my gulpfile allowed Gulp to run again.
If this happens, you have a few options. You can,
Go without the plugin if it's not absolutely necessary
Find an alternative,
Fix the plugin
Needless to say, if you have several plugins that rely on an older version of Gulp - especially if these plugins are vital for your application - this is where there can be a huge additional chunk of time spent in upgrading Gulp (hence the warnings above).
If this happens, it is best to just downgrade Node.js, at least until patches can be issued.
I had the same error. I finally fixed that when I updated all packages and then mentioned the same Node.js engine version and npm version in package.json as it is in my local working system.
"engines": {
"node": "10.15.3",
"npm": "6.9.0"
}
I was getting this error when deploying on Heroku.
For more, check out Heroku support.
Check Node.js version:
node --version
Check gulp version:
gulp -v
If Node.js >=12 and gulp <= 3, do one of the following:
Upgrade gulp
sudo npm install -g gulp
Downgrade node
sudo npm install -g n
sudo n 11.15.0
How to Upgrade (or Downgrade) Node.js Using npm
In case the problem is not from gulp then check the unzip npm module. It's been around six years since the last time it was updated. It doesn't work with Node.js > v11.
Try this:
npm install -g n
sudo n 11.15.0
The problem occurred for me in Visual Studio's Task Runner Explorer only and not when running from the command line or PowerShell.
I realised that VS was ignoring the Node version I had set with NVM.
This post gave the answer: Configure which NPM is used by Visual Studio's Task Runner Explorer? by setting the PATH variable as a higher priority than external tools in VS, it used the Node version set by NVM and not the version installed with VS.
This error is because of the new version of Node.js (12) and an old version of Gulp (less than 4).
Downgrading Node.js and other dependencies isn't recommended. I solved this by updating package.json file, fetching the latest version of all dependencies. For this, I use npm-check-updates. It is a module that updates the package.json with the latest version of all dependencies.
Reference: https://www.npmjs.com/package/npm-check-updates
npm i -g npm-check-updates
ncu -u
npm install
In most cases, we will have to update the gulpfile.js as well like the following:
Reference: Gulp 4: The new task execution system - gulp.parallel and gulp.series, Migration
Before:
gulp.task(
'sass', function () {
return gulp.src([sourcePath + '/sass/**/*.scss', "!" + sourcePath + "/sass/**/_*.scss"])
....
}
);
Other configuration...
gulp.task(
'watch', function () {
gulp.watch(sourcePath + '/sass/**/*.scss', ['sass']);
}
);
After:
gulp.task('sass', gulp.series(function(done) {
return gulp.src([sourcePath + '/sass/**/*.scss', "!" + sourcePath + "/sass/**/_*.scss"])
...
done();
}));
Other config...
gulp.task(
'watch', function () {
gulp.watch(sourcePath + '/sass/**/*.scss', gulp.series('sass'));
}
);
Downgrading to Node.js stable fixed this issue for me, as it occurred after I upgraded to Node.js 12:
sudo n 10.16.0
I faced the same issue. What I tried and what worked for me:
Check the version of Node.js and Gulp.js (a combination of Node.js v12 and Gulp.js less than v4 doesn't work)
I downgraded the NPM version by:
sudo NPM install -g n
sudo n 10.16.0
It worked fine. Then just follow the instructions of your console.
Upgrade to 4.0.1 and make sure to migrate https://fettblog.eu/gulp-4-parallel-and-series/#migration
I was getting this error on Windows 10. It turned out to be a corrupted roaming profile.
npm ERR! node v12.4.0
npm ERR! npm v3.3.12
npm ERR! primordials is not defined
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
Deleting the C:\Users\{user}\AppData\Roaming\npm folder fixed my issue.
If keeping Node.js v12 while using the latest gulp ^4.0, follow these steps:
Update the command-line interface (just for precaution) using:
npm i gulp-cli -g
Add/Update the gulp under dependencies section of your package.json file
"dependencies": {
"gulp": "^4.0.0"
}
Delete your package-lock.json file.
Delete your node_modules folder.
Finally, run npm i to upgrade and recreate a brand new node_modules folder and package-lock.json file with correct parameters for Gulp ^4.0:
npm i
Note Gulp.js 4.0 introduces the series() and parallel() methods to combine tasks instead of the array methods used in Gulp 3, and so you may or may not encounter an error in your old gulpfile.js script.
To learn more about applying these new features, this site have really done justice to it: How to Migrate to Gulp.js 4.0
I fixed this issue on Windows 10 by uninstalling Node.js from Add or Remove Programs → Node.js.
Then I installed version 11.15.0 from https://nodejs.org/download/release/v11.15.0/
Choose node-v11.15.0-x64.msi if you're running Windows 64-bit.
If you're trying to install semantic-ui and the following error occurs then try downloading the latest version of Node.js js(13.5.0) with the latest features, from Node.js.org.
Moreover, rather than trying the NPM install semantic, you should just add the link (which you can find from the cdnjs link) to the header of your index.html file.
Gulp is making issue with Node.js version 11 and above. Uninstall your current Node.js version and reinstall the v10.15.1 version. Here is the link for that version. This helps me and it will solve your problem too.
https://nodejs.org/download/release/v10.15.1/
Install gulp and add your Node.js version to the package.json file like so:
{
"dependencies": {
"node": "^10.16.3"
}
}
I have tried a lot of suggestions to fix this problem for an existing project on my Windows 10 machine and ended up following these steps to fix it;
Uninstall Node.js from "Add or remove programs". Fire up a new Command prompt and type gulp -v and then node -v to check that it has been uninstalled completely.
Download and install Node.js v10.16.0 - not the latest as latest node & gulp combination is causing the problem as far as I see. During installation I didn't change the installation path which I normally do(C:\Program Files\nodejs).
Open up a new Command prompt, go to your project's directory where you have got your gulpfile.js and start gulp as shown in the image.
Please note sometimes when I switch between git branches I might need to close my Visual Studio and run it as Admin again in order to see this solution working again.
As far as I see this problem started to happen after I installed the latest recommended version(12.18.4) of Node.js for a new project and I only realised this when some FE changes weren't reflected on the existing web project.
Update: Today I had the same problem while setting up one of my existing projects on my new PC and I did the same steps + went to the directory where I have the gulpfile and then run npm install.
It seems you've upgraded your nodejs's version to be +12 and still using gulp 3.9.1
You can use one of the below solutions
Upgrade you glup version to be +4
Or simply you use NVM Node version Manager
To run multiple nodejs versions on the same machine.
I had this very same error, but it was caused by a different issue.
OS: windows 10
nodejs version: 15.12.0
npm version: 7.6.3
The cause of the problem was graceful-fs package.
Whenever I tried to run npm, even running npm-v was firing "ReferenceError: primordials is not defined".
I tried running npm install graceful-fs#latest, but it still didn't work, even though the package was latest version.
So what helped me?
run npm ls graceful-fs
This way you'll find all packages on which graceful-fs is dependency and which version it has. In my case it was mostly version 3.0, even though I've installed version 4.2.6
So how to fix it?
Open npm-shrinkwrap.json (not sure about packages-lock.json) and change search for graceful-fs - you'll see that it has older versions on a few places. Replace it with ^4.2.6 (or newer).
Then npm audit fix --force which will forcefully install the newer version everywhere.
Hope this works for you, it took me a few hours to find out how to fix it.
Since my project was using gulp version 4, I had to do the following to solve this
Delete folder node_modules
open package.json and update version
Here is the detail of version I am using
Now run npm install and then run gulp default. The error should be gone and you may see:
Task never defined: default only.
Remove package-lock.json or yarn.lock file.
Then remove node_modules.
After that modify the package.json file-
"dependencies": {
"gulp": "^4.0.0"
}
Then run- npm install
It will be enough to solve this problem.
This is because the compatibility issue between node and gulp in your system. Downgrading the node or upgrading the gulp will fix this issue.
sudo npm i -g n
sudo n 11.15.0
Try removing the node_modules folder and package-lock.json file and installing again using npm i command if still not working.

NPM Experts! Does NPM need to be installed with every JointsWP Gulp Sass project

I'm using JointsWP (an excellent Foundation 6 port to Wordpress).
I'm using the Sass version and it's working great. However, I seem to have to install npm with every project. Is this nessesary?
Is there a way to install npm globally and link to it from my project? Or have the project find it automatically?
I think you are confused about what the command npm install actually does. npm install installs all the npm dependencies for your project into the node_modules directory. It doesn't actually install npm. To run npm install you have to have Node.js installed (npm is included with node).
So to answer your question, yes it is necessary to run npm install for every project.
Relevant Article: Global vs Local installation
The article above shared by Colin Marshall is great and sums up the answer perfectly.
In general, the rule of thumb is:
If you’re installing something that you want to use in your program,
using require('whatever'), then install it locally, at the root of
your project. If you’re installing something that you want to use in
your shell, on the command line or something, install it globally, so
that its binaries end up in your PATH environment variable.
So to answer your question, is it possible? Yes.
Is it recommended? No.
https://nodejs.org/en/blog/npm/npm-1-0-global-vs-local-installation/
You can install gulp sass globally with the command:
npm install -g gulp-sass

NPM install package without nested node_modules

I am running into the Windows Path character limit.
When I run an install of 'gulp' for example, via
npm install --save-dev gulp
in a folder such as "C:\Users\MyUsername\Visual Studio 2015\Projects\MyProject", I find that all the dependencies are deeply nested, such as:
C:\Users\MyUsername\Visual Studio
2015\Projects\MyProject\node_modules\gulp\node_modules\gulp-util\node_modules\dateformat\node_modules\meow\node_modules\loud-rejection\node_modules\signal-exit
Is there a way to avoid this? How do other Windows developers get past this?
Are you using a NPM version 3.x.
According to this Node npm windows file paths are too long to install packages most problems with nesting is solved in version 3.x

Error: Cannot find module 'dateformat' in gulp

I'm working with nodejs (version v4.2.1)
I would like to work with gulp
I've installed gulp (3.9.0)
But when I try my default script with an empty function (script below) with the command
gulp
I get the error
Error: Cannot find module 'dateformat'
I've tried to install dateformat with
npm install -g dateformat
I can check that dateformat is installed with the command
dateformat --help
But the gulp script produce the same error
Error: Cannot find module 'dateformat'
I'm working with Windows 7
Any help?
==================== script
var gulp = require('gulp');
gulp.task('default', function() {
});
Had a similar issue and reinstalling gulp globally indeed fixed the issue, however, see my details regarding prior installations of node (since you mention it as well)
npm uninstall gulp -g
npm install gulp -g
The explanation is difficult to precisely offer, since I embarked on an entire troubleshooting effort, but if it is of any help - I suspect the issue is a result of installing node, but the installer is not overwriting prior versions of npm - somehow causing an internal issue somewhere. Troubleshooting flow:
uninstall node
delete the nodejs folder, located by default at ~\Program Files\ (orphaned node_modules with npm folder found here)
reinstall node
globally uninstall/reinstall gulp
Some more details on the issue can be found here: npm 3 broken when installed from official OS X Node.js installer #10434. While this is specific to OSX, I found the situation identical to myself on the Windows side.
I had the same problem. I resolved it by
Delete node_modules folder
npm install

npm/grunt: is it possible to install grunt without npm?

I am having so much problems with the proxy system of my entertprise
I was changing parameter using npm config set changing the variable proxy and http-proxy.
I installed in my .npmrc next lines
npm config set proxy http://my_user:my_password#10.3.12.130:8080 -g
npm config set https-proxy http://my_user:my_password#10.3.12.130:8080 -g
What I have in my mind it is try to install grunt in VS2012 without using npm, maybe like nuget.
Is it possible?
I am getting this error page when I am using npm install -g grunt-cli:
Yes it is possible, you can download grunt and run it in your node.js environment, if your only problem is proxy or firewall but you have working node.js environment then just download it from the github.
You can download any npm package which is published also on the github and then copy it manually to you node_modules folder. Just beware that those packages may have dependencies on their own. SO that means you should run npm install in those downloaded folders and if it doesn't work do it manually for every dependency recursively until you are finished.
No, it is not possible.
This is from the Grunt getting started guide:
Grunt and Grunt plugins are installed and managed via npm, the Node.js
package manager. Grunt 0.4.x requires stable Node.js versions >=
0.8.0. Odd version numbers of Node.js are considered unstable development versions.

Resources