No gulpfile found error in SharePoint Framework (SPFx)

A few days ago, I was working with a client to retrieve the current user’s details from Azure Active Directory in an SPFx web part using Microsoft Graph. When the client tested the web part by running the gulp serve command, they saw this error:

[12:52:31] No gulpfile found

You can see the exact error message in the screenshot below:

At first, I had no idea why this was happening. They had already installed Gulp, and the version was correct.

Later, I realized the real reason: while preparing a ZIP file of the project (without the node_modules folder and the package-solution.json file), I had accidentally deleted the gulpfile.js file. So when the client unzipped the project, installed the packages using npm install, and ran gulp serve, the error appeared.

In this article, we’ll discuss the reasons for this error and how to solve it.

Root causes of the “No gulpfile found” error in SPFx

Let me explain here in which scenarios we will get the “No gulpfile found” error while running the gulp commands, such as:

gulp trust-dev-cert
gulp build
gulp serve

You can get this error for any of the following reasons.

• When the gulpfile.js is not found in the project directory.
• The gulpfile.js file was mistakenly renamed or deleted.
• The gulpfile.js is in the wrong folder
• You ran gulp commands from the wrong directory
• The gulpfile content is corrupted
• Node modules are not installed
• Wrong version of gulp installed globally

Check out PnP React Pagination Control in SharePoint Framework (SPFx) Web Part

Fix: No gulpfile found error in SPFx

Since we found the reason for this error was the missing gulpfile.js in our SPFx project. Run the code below to create an empty gulpfile.js file.

touch gulpfile.js

If you face any error while running the above command, then run the below command, and rerun the above command.

npm install touch-cli -g

This will install the touch command in Windows. In the image below, you can see that, after running the above command, an empty file was created.

Now, add the code below to that gulpfile.js, as shown in the image below, and then run the gulp serve command; it will work.

'use strict';

const build = require('@microsoft/sp-build-web');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

build.initialize(require('gulp'));

Note: If you are facing this error due to a version mismatch, please check the MSDN post, then uninstall the existing version and add the compatible Gulp version.

If in the dependency file, gulp is not there, then you can run the following command:

npm install --save-dev gulp

Apart from that, if you want, you can install the particular gulp version in your system, like:

npm install - gulp@3.9.0

You can run the command below to check the Gulp version.

gulp -v

I hope you now understand how to fix the “No gulpfile found” error in the SharePoint Framework. Here, I clearly explained the possible reasons we are getting this error and how to fix it. Additionally, I gave commands to install any particular version of Gulp.

Try these solutions if you are also facing the same error while running gulp commands. Also, you may like:

• Fix SPFx Error: An unexpected ‘StartObject’ node was found when reading from the JSON reader. A ‘StartArray’ node was expected.
• SPFx Error: Couldn’t add this app. Check your network connection and try again
• npm install Failed: ENOENT, EPERM rmdir, EBADF Errors While Creating SPFx Solution
• Delete node_modules from SPFx solution (rimraf)