Use Gulp in ASP.NET Core

In this article

Run tools to call the bundling and minification tasks before each build.

Compile LESS or SASS files to CSS.

Compile CoffeeScript or TypeScript files to JavaScript.

A task runner is a tool which automates these routine development tasks and more. Visual Studio provides built-in support for two popular JavaScript-based task runners: Gulp and Grunt.

Gulp

Gulp is a JavaScript-based streaming build toolkit for client-side code. It's commonly used to stream client-side files through a series of processes when a specific event is triggered in a build environment. For instance, Gulp can be used to automate bundling and minification or the cleaning of a development environment before a new build.

A set of Gulp tasks is defined in gulpfile.js. The following JavaScript includes Gulp modules and specifies file paths to be referenced within the forthcoming tasks:

The above code specifies which Node modules are required. The require function imports each module so that the dependent tasks can utilize their features. Each of the imported modules is assigned to a variable. The modules can be located either by name or path. In this example, the modules named gulp, rimraf, gulp-concat, gulp-cssmin, and gulp-uglify are retrieved by name. Additionally, a series of paths are created so that the locations of CSS and JavaScript files can be reused and referenced within the tasks. The following table provides descriptions of the modules included in gulpfile.js.

Task Runner Explorer shows the list of Gulp tasks. (You might have to click the Refresh button that appears to the left of the project name.)

Important

The Task Runner Explorer context menu item appears only if gulpfile.js is in the root project directory.

Underneath Tasks in Task Runner Explorer, right-click clean, and select Run from the pop-up menu.

Task Runner Explorer will create a new tab named clean and execute the clean task as it's defined in gulpfile.js.

Right-click the clean task, then select Bindings > Before Build.

The Before Build binding configures the clean task to run automatically before each build of the project.

The bindings you set up with Task Runner Explorer are stored in the form of a comment at the top of your gulpfile.js and are effective only in Visual Studio. An alternative that doesn't require Visual Studio is to configure automatic execution of gulp tasks in your .csproj file. For example, put this in your .csproj file:

The output text is displayed. To see examples based on common scenarios, see Gulp Recipes.

Defining and running tasks in a series

When you run multiple tasks, the tasks run concurrently by default. However, if you need to run tasks in a specific order, you must specify when each task is complete, as well as which tasks depend on the completion of another task.

To define a series of tasks to run in order, replace the first task that you added above in gulpfile.js with the following:

You now have three tasks: series:first, series:second, and series. The series:second task includes a second parameter which specifies an array of tasks to be run and completed before the series:second task will run. As specified in the code above, only the series:first task must be completed before the series:second task will run.

IntelliSense

IntelliSense provides code completion, parameter descriptions, and other features to boost productivity and to decrease errors. Gulp tasks are written in JavaScript; therefore, IntelliSense can provide assistance while developing. As you work with JavaScript, IntelliSense lists the objects, functions, properties, and parameters that are available based on your current context. Select a coding option from the pop-up list provided by IntelliSense to complete the code.

Development, staging, and production environments

When Gulp is used to optimize client-side files for staging and production, the processed files are saved to a local staging and production location. The _Layout.cshtml file uses the environment tag helper to provide two different versions of CSS files. One version of CSS files is for development and the other version is optimized for both staging and production. In Visual Studio 2017, when you change the ASPNETCORE_ENVIRONMENT environment variable to Production, Visual Studio will build the Web app and link to the minimized CSS files. The following markup shows the environment tag helpers containing link tags to the Development CSS files and the minified Staging, Production CSS files.

Task and module details

A Gulp task is registered with a function name. You can specify dependencies if other tasks must run before the current task. Additional functions allow you to run and watch the Gulp tasks, as well as set the source (src) and destination (dest) of the files being modified. The following are the primary Gulp API functions:

Gulp Function

Syntax

Description

task

gulp.task(name[, deps], fn) { }

The task function creates a task. The name parameter defines the name of the task. The deps parameter contains an array of tasks to be completed before this task runs. The fn parameter represents a callback function which performs the operations of the task.

watch

gulp.watch(glob [, opts], tasks) { }

The watch function monitors files and runs tasks when a file change occurs. The glob parameter is a string or array that determines which files to watch. The opts parameter provides additional file watching options.

src

gulp.src(globs[, options]) { }

The src function provides files that match the glob value(s). The glob parameter is a string or array that determines which files to read. The options parameter provides additional file options.

dest

gulp.dest(path[, options]) { }

The dest function defines a location to which files can be written. The path parameter is a string or function that determines the destination folder. The options parameter is an object that specifies output folder options.