Easily Improve Front-end ASP.NET Core App Development with Gulp
Tags: automation, webdev, dotnet, csharp
Published: 2022-06-17 12:29:16

---
title: Easily Improve Front-end ASP.NET Core App Development with Gulp
published: true
date: 2022-06-17 11:28:49 UTC
tags: automation, webdev, dotnet, csharp
canonical_url: https://www.syncfusion.com/blogs/post/easily-improve-front-end-asp-net-core-app-development-with-gulp.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Easily-Improve-Front-end-ASP.NET-Core-App-Development-with-Gulp-1-672x372.png
---

[Gulp](https://gulpjs.com/ "Gulp") is a toolkit that helps web developers automate many development tasks such as minification and file conversion. We can create tasks using NPM gulp dependencies.

In this article, we are going to go cover the gulp integration. We’ll look at some of the most often required gulp tasks that help ease front-end web development challenges using Visual Studio.

You will learn:

- [Prerequisites](#prerequisites)
- Useful gulp tasks to improve the web development process
  - [SCSS-to-CSS converter](#scss-to-css-converter)
  - [CSS and JS file minification](#css-and-js-file-minification)
  - [Clean up the bundle](#clean-the-bundle)
  - [Images minification](#images-minification)
- [How to run gulp tasks](#run-gulp-tasks)
- [How to automate gulp tasks (task binding)](#automate-the-gulp-tasks)

## Prerequisites

### 1. Install Node.js

[Node.js](https://nodejs.org/ "Node.js") is an open-source and cross-platform runtime environment for creating server-side and networking apps. Node.js apps are written in JavaScript and can be run on macOS, Windows, and Linux.

We must install Node.js to execute our gulp tasks. So, download and install the [recommended version of Node.js](https://nodejs.org/en/ "Recommended versions of Node.js") before implementing gulp.

![Node.js Setup dialog](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Easily-Improve-Front-end-ASP.NET-Core-App-Development-with-Gulp.png)

#### Set Node.js path as an environment variable

After installing **Node.js,** set its installed location as a path in an environment variable. To do so, open Run **(Win + R)** and execute **“rundll32 sysdm.cpl,EditEnvironmentVariables”**. This will open Environment Variables in that open **Path** , by performing a double click on the path. In the Edit environment variable dialog, click **New** and add the installed location of Node.js, which by default is **C:\Program Files\nodejs**.

![Set Node.js path as an environment variable](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Set-Node.js-path-as-an-environment-variable.png)

### 2. Install NPM

[Node Package Manager](https://www.npmjs.com/ "Node Package Manager") (NPM) is the default package manager for the JavaScript runtime environment Node.js. It is a command-line utility for installing, updating, and uninstalling Node.js packages in your app.

Install NPM using the following command in the **command prompt**.

```
npm install -g npm
```

![Install NPM](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Install-NPM.png)

To check whether Node.js or NPM are already installed, execute the following commands.

```
Node.js: node --version
NPM version: npm --version
```

### 3. Create package.json file

The package.json is a JSON file that contains information about the dependencies required in the project.

Create the package.json file by running the following command using the command prompt.

```
npm init -y
```

![Create package.json file](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Create-package.json-file.png)

### 4. Add gulp.js file

1. Open your app on **Visual Studio** and right-click on the startup project. Add a new item (Add -> New Item).
2. ![Add a new item](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Add-gulp.js-file.png)Choose the scripts option (Installed -> Visual C# -> ASP.NET Core -> Web -> Scripts), set file name as _js,_ and add it.

**Note:** The name of the gulp file must be _gulpfile.js._

3. ![Se the file name as gulpfile.js](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Add-gulp.js-file2.png)To install gulp in your project, run the following command in the command prompt.  

```
npm install -g gulp --global gulp-cli gulp –save-dev
```

## ![Add gulp.js file](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Add-gulp.js-file3.png)

## Useful gulp tasks to improve the web development process

### SCSS-to CSS converter

[Sassy cascading style sheets](https://en.wikipedia.org/wiki/Sass_(stylesheet_language) "Wikipedia page for Sassy cascading style sheets") (SCSS) is a CSS preprocessor, an extension of the syntax of CSS, and one of the syntaxes of syntactically awesome style sheets (Sass). It provides many features like variable creation, code nesting, and style file importing. It reduces CSS development time. But common browsers do not process SCSS files. So, we must convert the SCSS files to CSS to use them.

We are going to create a gulp task for SCSS-to-CSS conversion using the _gulp-sass_ dependency. Run the following command using the command prompt to add this dependency.

```
npm install sass gulp-sass --save-dev
```

**Note:** After installing the dependencies, make sure to restore the packages.

Add the following code to the Gulpfile.js.

```js  
"use strict";
var gulp = require("gulp"),
sass = require('gulp-sass')(require('sass'));
gulp.task('sass-to-css', async function () {
  return gulp.src('./wwwroot/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./wwwroot/css'));
});
  
Scss to css converter watch:
gulp.task('sass-to-css:watch', function () {
    gulp.watch('./wwwroot/scss/**/*.scss', gulp.series('sass-to-css'));
});
```

### CSS and JS file minification

Usually, for app deployment, we have to add our CSS and JS files to the bundle config. Using the bundle config file, we will then minify the CSS and JS files.

We are going to create a gulp task for CSS and JS minification using the dependencies:

- **_gulp-cssmin_**
- **_gulp-terser_**
- **_gulp-concat_**
- **_gulp4-run-sequence_**
- **_merge-stream_**

Run the following command in the command prompt to add these dependencies.

```
npm install gulp-cssmin gulp-terser gulp-concat gulp4-run-sequence merge-stream --save-dev
```

![CSS and JS file minification](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/CSS-and-JS-file-minification.png)

```js  
"use strict";
var gulp = require("gulp"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
jsmin = require("gulp-terser"),
runSequence = require('gulp4-run-sequence'),
bundleconfig = require("./bundleconfig.json"),
merge = require("merge-stream");

const regex = { css: /\.css$/, js: /\.js$/ };

gulp.task('bundle-min', async function () {
      runSequence("min:js", "min:css");
});

gulp.task("min:js", function () {
   var tasks = getBundles(regex.js).map(function (bundle) {
       return gulp.src(bundle.inputFiles, { base: ".", allowEmpty: true })
              .pipe(concat(bundle.outputFileName))
              .pipe(jsmin())
              .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

gulp.task("min:css", function () {
    var tasks = getBundles(regex.css).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: ".", allowEmpty: true })
              .pipe(concat(bundle.outputFileName))
              .pipe(cssmin())
              .pipe(gulp.dest("."));
     });
     return merge(tasks);
});

function getBundles(regexPattern) {
   return bundleconfig.filter(function (bundle) {
      return regexPattern.test(bundle.outputFileName);
   });
}

```

### Clean the bundle

We can clean minified CSS and JS files using the Clean Bundle task.

Create a gulp task for bundle cleaning using the del dependency. Run the following command in the command prompt to add this dependency.

```
npm install del --save-dev
```

![Clean the bundle](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Clean-the-bundle-300x138.png)

```js
"use strict";
var gulp = require("gulp"),
    del = require("del");

gulp.task("clean-bundle", function () {
    var files = bundleconfig.map(function (bundle) {
       return bundle.outputFileName;
    });
    return del(files);
});
```

### Images minification

Image size is one major factor that impacts webpage speed. We try to use images with minimum sizes.

You can compress large images using the image minify gulp task. Create a gulp task for bundle cleaning using the **_gulp-imagemin_** dependency. Run the following command in the command prompt to install this dependency.

```
npm install gulp-imagemin --save-dev
```

![Images minification](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Images-minification.png)

```js  
"use strict";
var gulp = require("gulp"),
   imagemin = require('gulp-imagemin');

gulp.task('image-min', async function () {
   gulp.src('./wwwroot/images/*')
       .pipe(imagemin())
       .pipe(gulp.dest('./wwwroot/dist/images'));
});
```

## How to run gulp tasks

Open **Solution Explorer,** right-click **gulpfile.js,** and select **Task Runner Explorer.**

![Open Solution Explorer, and right-click gulpfile.js](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/How-to-run-gulp-tasks.png)

To run the gulp tasks, double-click the task or right-click the gulp task and choose **Run.**

## ![Right-click the gulp task and choose Run](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/How-to-run-gulp-tasks2.png)

## How to automate the gulp tasks (task binding)

Visual Studio has a built-in task runner designed to run gulp tasks. It has an option to automate the gulp tasks so we can bind them based on task usage and their needs.

To configure the built-in task runner, use **Ctrl + Alt + Backspace** or select **Task Runner** from the **Other Windows** list from the Visual Studio View menu **(View -> other windows).**

The task runner window will appear at the bottom of Visual Studio. In the Task Runner Explorer, you can see the list of gulp tasks. Now, right-click on a gulp task and choose **Bindings**. Refer to the following screenshot.

![Right-click on a gulp task and choose Bindings](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/How-to-automate-the-gulp-tasks-task-binding.png)

Choose one from the following binding options:

- **After Build** : The binding tasks will run after building our app.
- **Before Build** : The binding tasks will run before building our app. We can add the following tasks to this: “clean-bundle,” “sass-to-css,” “bundle-min.”
- **Clean Build** : The binding tasks will run while cleaning our app. We can add the “Clean-bundle” task to this.
- **Project Open** : The binding tasks will be run when opening the app. We can add the “sass-to-css:watch” task to this.

## GitHub repository

For more information, refer to the [samples to improve front-end development with gulp in an ASP.NET Core application](https://github.com/SyncfusionExamples/sample-of-gulp-tasks-in-an-asp.net-core "Gulp tasks in an ASP.NET Core app demo on GitHub").

## Conclusion

Thank you for taking the time to read this article! I hope it was helpful for you to improve front-end development with gulp integration and implementation in your ASP.NET Core web app using Visual Studio. This article is based on my personal experience and knowledge.

Syncfusion has over 1,700 components and frameworks for [WinForms](https://www.syncfusion.com/winforms-ui-controls "WinForms UI Controls"), [WPF](https://www.syncfusion.com/wpf-ui-controls "WPF UI Controls"), [WinUI](https://www.syncfusion.com/winui-controls "WinUI Controls"), [.NET MAUI (Preview)](https://www.syncfusion.com/maui-controls ".NET MAUI Controls"), ASP.NET ([Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls "ASP.NET Web Forms UI Controls"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls "ASP.NET MVC UI Controls"), [Core](https://www.syncfusion.com/aspnet-core-ui-controls "ASP.NET Core UI Controls")), [UWP](https://www.syncfusion.com/uwp-ui-controls "UWP UI Controls"), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/ "Xamarin UI Controls"), [Flutter](https://www.syncfusion.com/flutter-widgets "Flutter UI Widget"), [JavaScript](https://www.syncfusion.com/javascript-ui-controls "JavaScript UI Controls"), [Angular](https://www.syncfusion.com/angular-ui-components "Angular UI Controls"), [Blazor](https://www.syncfusion.com/blazor-components "Blazor UI Controls"), [Vue](https://www.syncfusion.com/vue-ui-components "Vue UI Controls"), and [React](https://www.syncfusion.com/react-ui-components "React UI Controls"). Use them to boost your app development speed.

For existing customers, the new Essential Studio version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out our newest features.

If you have questions, you can reach us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"),  [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). As always, we are happy to assist you!