Error in plugin "gulp-sass" when deploy Liferay 7.4 theme - gulp

While migrating my Liferay 7 theme to 7.4 version, I got warnings like
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2) or calc($spacer / 2)
In-order to fix those warnings, I updated my package.json by adding
"liferayTheme": { "baseTheme": "styled", "templateLanguage":
"ftl", "version": "7.4", "sassOptions": { "dartSass": false
} }
but after updating this, I did npm install and gulp deploy, it throws the below error
I tried deleting node-modules/package-lock.json file and updated gulpfile.js by adding and installing through npm
const sass = require('gulp-sass')(require('sass'));
I also tried the suggestion here, but nothing works.
I am running
node v16.13.0 (npm v8.1.0) (Can't downgrade as this is recommended for
7.4)
Gulp 4.0.2
gulp-sass 5.1.0
sass 1.58.0
liferay-theme-tasks 11.4.0
I assume node-sass is deprecated and any pointers in fixing this issue would be really appreciated.
Thanks

Related

Getting errors on creating new project using command 'ng new <project_name>' after upgrading to version 9

Please find the stack over here...
Installing packages...npm WARN deprecated tslint#6.1.2: TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint/issues/4534 for more information.
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents#1.2.12: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm ERR! Unexpected end of JSON input while parsing near '...iERRHPyU8nBqZB1+iv2Uh'
I had the exact same error and was able to fix it through following steps.
Run npm cache clean --force
Manually delete npm and npm-cache folders from AppData/Roaming folder (Win + R, Type %AppData% and enter)
Run Node Installer and repair
Reinstall npm install -g #angular/cli
Rerun ng new newApp
Worked :)
Use node V12.4.0 and npm V6.9.0
i was getting the same issue please try reinstall angular CLI after installing previous one
I think this can only be achieved if we first update the version to 8 and then move from 8 to 9.
I had the same Issue and Following steps worked for me.
Delete npm-cache in AppData/Roaming
Reinstall the angular cli by 'npm install -g #angular/cli'
Then Create the project
Run npm cache clean --force
Manually delete npm and npm-cache folders from AppData/Roaming folder (Win + R, Type %AppData% and enter)
Run Node Installer and repair
4.Reinstall npm install -g #angular/cli
Rerun ng new newApp
Worked :)
https://github.com/npm/cli/issues/1191
Delete the AppData\Roaming\npm-cache folder and then try creating the project again. This is really gonna work =)

How to fix a Gulp compilation error of "Task function must be specified"?

I'm setting up Silverstriper frame work with ZURB Foundation. I have tried to compile my gulp file, but I have this error. I have already installed Gulp locally and CLI.
This is my gulp version
C:\Users\ss-dk13\Work\sample-site>gulp -v
[11:38:15] CLI version 2.0.1
[11:38:15] Local version 4.0.0

Gulp fails after VSO / VSTS upgrade

Since yesterday's update on VSO / VSTS (17 Aug update) our gulp tasks fail.
The failing part is where we overwrite existing files using gulp.dest() in a gulp build step.
I've tried to delete the file first and then use gulp.dest and this works, however this practice can't be used on all places because we need to inject code into existing files.
We use Gulp version 3.9.0
Error: EPERM: operation not permitted, open 'C:\a\1\s\Source\Project\Project.Web\index.cshtml'
Since the last update of VSO all source files are now readonly. We solved our issue by removing the readonly flag on the source files.
Based on my test, the issue is related to Gulp 3.9.0, I can reproduce that issue with Gulp 3.9.0 (npm install task, Command: install, Arguments: gulp#3.9.0), the Gulp 3.9.1 works fine. So you can update to gulp 3.9.1.
You could add npm install task to install latest version. (Command: install; Argument: gulp)

what does gulp-"cli" stands for?

Can someone please explain what exactly are the differences between the following two methods of gulp installation:
$ npm install --global gulp-cli
and
$ sudo npm install -g gulp
It looks to me that both do the same thing except that the first method gives me a version 1.2.1, and the later gives me version 3.9.1
Can someone put into simple terms what exactly are the differences? and plus what is "cli" stands for?
The goal of gulp-cli is to let you use gulp like a global program, but without installing gulp globally.
For example if you installed gulp 3.9.1 globally and your project testGulp4 has gulp 4.0 installed locally, what would happen if you run gulp -v into testGulp4?
Without gulp-cli globally installed :
CLI version 3.9.1
In this case the version displayed is the global version of gulp. The local version 4.0 is totally ignored.
With gulp-cli globally installed :
CLI version 1.2.1
Local version 4.0.0-alpha.2
In this case the version displayed is the global version of gulp-cli and the local version of gulp. The global gulp 3.9.1 is totally ignored.
Conclusion :
gulp-cli: is preferred because it allows you to use different versions of gulp.
gulp: needs a local version of gulp installed.
CLI stands for Command Line Interface.
gulp is a JavaScript library. It lets you use gulp from JavaScript code.
gulp-cli is a utility program that lets you access gulp from your shell.

Mismatch in gulp local and CLI versions

I had previously installed gulp globally using npm install gulp -g. Then I cloned an existing project, and that required me to use its own gulp. Now when I do a gulp -v from outside my project folder, I get a mismatch like this.
C:\Users\userme>
[11:14:05] CLI version 3.8.11
[11:14:05] Local version 1.0.0
And when I do a gulp from my project folder, I get this.
C:\project\new\tools>
[11:14:26] CLI version 3.8.11
[11:14:26] Local version 3.8.11
Now I have not been able to merge my JS files properly using gulp (I'm getting some weird formatting errors in the min file) and I suspect it has something to do with this mismatch.
Is there a way to remove the global gulp version, but keep the project specific gulp?
Or can I update my global version gulp to #3.8.11?
Note - I did try updating the global gulp by using npm update gulp#3.8.11 -g but nothing happened. i still get the mismatch.
Update to describe the issue:
I am using gulp to merge multiple JS files into 1 single main.js file. The formatting that I get in the merged file has a syntactical error in it.
Expected output in merged file -
...
define('utils/knockoutBindings/slider',['require','ko','jquery'],function(require) {
'use strict';
var ko = require('ko');
var $ = require('jquery');
...
Actual output in merged file (this 1 line of code below is wrongly replacing the entire 4 lines above) -
...
var'utils/knockoutBindings/slider',['require','ko','jquery'],function(require) {
...
It might seem that there is an issue in the gulp code, but the same code is used by other users and it works well on their end. The only difference we have found is in the mismatch in my gulp versions.
I am answering my own question, just so it is useful for others.
Is there a way to remove the global gulp version, but keep the project specific gulp?
No. AFAIK, you are required to install gulp globally as well as one specific to your project.
More info on gulp versions here.
Why do we need to install gulp globally and locally?
http://blog.dwaynecrooks.com/post/110903139442/why-do-we-need-to-install-gulp-globally-and
https://github.com/gulpjs/gulp/issues/171
https://github.com/gulpjs/gulp/issues/140
Or can I update my global version gulp to #3.8.11?
Since I was facing a mismatch in my local version, I had to update it from the project folder itself.
npm install gulp#3.8.11 --save
More info on this here.
http://www.eskocruz.com/gulp-version-mismatch
To update your Local version npm install gulp#version_you_need
To update CLI version npm install -g gulp#version_you_need
Removing node_modules folder and running npm install gulp within that dir sorted my issue out.
npm install -g gulp wasn't fixing it for me, from either in or out of the project folder. My gulp version was already correct in my package.json file. All I had to do was run npm install from within the project folder, and the gulp version from in the project folder was corrected.
Updating both the local version same as that of the global version fixed the issue. My initial gulp -v yielded CLI version 3.9.1 and Local version 4.0.0. I updated the local version from within the project folder npm install gulp#3.9.1 --save. This resolved my issue .
Gulp 4 uses an updated CLI which needs to be updated globally. This CLI is backwards compatible with any Gulp 3.X projects you may have locally - Read more.
It seems that the latest version (at the time of this post) of gulp-cli is 2.3.0 which means there will always be a mismatch.
If you run npm install -g gulp, then the latest version of the CLI will be installed. If you have any other version installed then it will update to the latest version.
The local version's latest release (at the time of this post) is 4.0.2.
Run npm install --save-dev gulp to install the latest version of Gulp in your project folder as a dev-dependency. Like with the CLI version it will update if you have an older version.
Mismatched versions work like normal.
SIDE NOTE: Remember to prefix global installs with sudo if you're working on a Mac and you have admin rights e.g. sudo npm install -g gulp.
BUT if you don't have admin rights and you can update the local version, but not the global version, then you can run node ./node_modules/gulp/bin/gulp.js from your project folder and it will execute the gulp file, even if you have the wrong CLI version, but you need to have the default task set up.