Task 'details' is not in your gulpfile - gulp

Trying to install gulp. But when check using gulp details command, then getting error like Task 'details' is not in your gulpfile. Is anybody face similar issue.

It is looking for task "details" in your gulpfile.js. You can run gulp --tasks to see what tasks are available, but you are for sure not going to see "details".
Here's how to create and define gulp task
So basically, you at least need something similar to the following snippet within your gulpfile.js
function details(callback) {
callback();
}
exports.details = details;
Or, if using require-dir for better folder structure, you would need the previous code snippet within the referenced file :
require('require-dir')('./gulp/tasks/details');
And when using npm to run your task, like npm run details
You can find those scripts definition in your package.json file at your project root. There is a node scripts where you can define npm script, where you could be calling the gulp details task
...
"scripts": {
"details": "gulp details",
},
...
You could run npm run details, and it would behind the scene run the gulp task.

Related

How do I fix gulpfile.js to avoid "Did you forget to signal async completion?" when running "gulp ngrok-serve" and DO NOT have the task defined?

I used 2 tutorial clips from Microsoft (first, second) to build a sample Teams Message Extension.
I'm down to the final step of really starting the app with the gulp ngrok-serve command, but I get this error message:
...
[16:05:29] Watching .env
[16:05:29] The following tasks did not complete: ngrok-serve, serve, watch
[16:05:29] Did you forget to signal async completion?
I've read various suggestions on how to fix this, but the problem in my case is that I don't have the "ngrok-serve" task defined in my file. It seems to be running a "default" version of it.
So how should I define/overwrite it, so that I can fix it's implementation, in my gulpfile.js file ?
Thank you.
We were able to run the app successfully using gulp serve, as mentioned in the Build your first Microsoft Teams app using the Yeoman generator documentation. Please run the app using gulp serve.

Gulp "no command gulp found". PATH changed

I got my one website on WordPress and had no code at all to be written myself. And now I decided to move one, write my own website, but stuck with some issues with Gulp after installing ("no command 'gulp' found") The most common reason met for Windows is the wrong PATH, and I've changed it. Any other thoughts? That's supposed to be just a starter kit for an auto page reload when HTML, CSS, JS is changed.
this sounds like you only have gulp installed inside your current project.
First Solution:
Simply install gulp-cli globally. This will allow you to use gulp command
note: gulp still need to be installed per project basis.
npm install -g gulp-cli
Second Solution:
in case you don't want to install gulp-cli globally, you can add it as your build script inside your package.json. And then you can run npm run build from your terminal.
{
"script": {
"build": "gulp"
}
}

Gulp bundle --ship: The build failed because a task wrote output to stderr

I've been getting this error when trying to do a gulp bundle --ship command:
The build failed because a task wrote output to stderr.
Exiting with exit code: 1
I'm pretty new to this so have no idea how to proceed with it. It's happening even when I run through the helloworld webpart now. The gulp serve works and I can bundle and package the solution as long as I don't add a --ship to it. I've written and published apps before on the same machine so I don't know what is different now.
I've uninstalled every extension and re-installed the application but it's still doing it. Any help would be appreciated.
Just for quick win you can use --debug flag for bundling task instead of --ship until this bug will be fixed in future releases:
gulp bundle --debug
gulp package-solution --ship
The bundled file will be bigger, but at least you are not getting "The build failed because a task wrote output to stderr" error in CI/CD.
It normally happens because of the warnings. You can add suppression like mentioned below in gulpfile.js
build.addSuppression(Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.);
build.addSuppression(/Warning/gi);
I got this error because caniuse-lite needed a database update. It was confusing because there was no red error message.
Easy fix: npx browserslist#latest --update-db

How to use Gulp with PM2?

I'm using Gulp to compile and minify SCSS, Pug, JSX and that sort of things. So in the development process as usual I'm opening the terminal window and typing gulp and it watches my files. But I have to keep open the terminal window and Gulp tab, otherwise my files don't be compiled.
I'm using PM2 too. When I wanna start a Node job I just write pm2 start file.js --watch and pm2 startup in order to start the script on operating system opening. I wanna do the same thing for Gulp. I've tried like pm2 start gulpfile.js --watch, but it doesn't work.
How can I use Gulp with PM2?
I am no expert in gulp, but you can execute your gulp command via pm2 by defining it in the process file at your project root.
ecosystem.json
{
"apps": [
{
"name": <name_of_your_app>,
"script": "gulp"
}
]
}
Then, from terminal, run $ pm2 start ecosystem.json. You can also define watch options at that process file. See this for more details.

Passing a flag from a gulp series?

I can run a task with a flag via:
gulp build --production
Is there anyway to have a task set up like this:
gulp.task('deploy',
gulp.series('build'));
And also include the flag:
gulp.task('deploy',
gulp.series('build --production'));
So I could just call gulp deploy to run a production build?
Since this is not really possible using the built-in gulp functionality, I wrote a package that makes this as easy and convenient as possible: gulp-parameterized.
(Note: this is still a work in progress. For one thing it needs a comprehensive test suite. It's also severely lacking in documentation. However the core functionality has been tested and should work.)
Here's your example using gulp-parameterized:
var gulp = require('gulp');
var parameterized = require('gulp-parameterized');
gulp.task('build', parameterized(function(_) {
if (_.params.production) {
/* production build */
} else {
/* development build */
}
}));
gulp.task('deploy', parameterized.series('build --production'));
This also automatically parses command line flags, so you don't need to parse those yourself with yargs anymore.
The following commands create production builds:
$ gulp build --production
$ gulp deploy
While the following commands create development builds:
$ gulp build
$ gulp build --no-production