Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (157).NET Core  (28).NET MAUI  (36)Angular  (65)ASP.NET  (48)ASP.NET Core  (74)ASP.NET MVC  (88)Azure  (31)Blazor  (134)DocIO  (22)Essential JS 2  (76)Essential Studio  (169)File Formats  (25)Flutter  (121)JavaScript  (167)Microsoft  (109)PDF  (64)React  (48)Succinctly series  (126)Syncfusion  (552)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (34)Webinar  (30)Windows Forms  (57)WinUI  (40)WPF  (131)Xamarin  (148)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (115)Chart  (56)Cloud  (11)Company  (445)Dashboard  (7)Data Science  (3)Data Validation  (6)DataGrid  (53)Development  (335)Doc  (7)DockingManager  (1)eBook  (95)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (22)Extensions  (17)File Manager  (4)Gantt  (11)Gauge  (9)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (277)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (28)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (34)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (21)Solution Services  (2)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (88)UI  (190)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (23)Visual Studio Code  (14)Web  (304)What's new  (179)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Easily Improve Front-end ASP.NET Core App Development with Gulp

Easily Improve Front-end ASP.NET Core App Development with Gulp

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

1. Install Node.js

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 before implementing gulp.

Node.js Setup dialog

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 the environment variables dialog, 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

2. Install NPM

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

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

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 itemChoose 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.jsTo 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

Useful gulp tasks to improve the web development process

SCSS-to CSS converter

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.

  
"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

  
"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

  
"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

  
"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

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

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

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.

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 WinFormsWPFWinUI.NET MAUI (Preview), ASP.NET (Web FormsMVCCore), UWPXamarinFlutterJavaScriptAngularBlazorVue, and React. 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 page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our newest features.

If you have questions, you can reach us through our support forums,  support portal, or feedback portal. As always, we are happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top