Gulp Configuration in ASP.NET MVC Core 1.0 Application

• Download Gulp and package file configuration - 864 B

Introduction

This tip is a continuation of my previous article http://www.codeproject.com/Articles/1118616/Create-a-simple-mvc-application-using-Asp-Net-Core.

Background

The scope of this tip is to demonstrate the step by step procedure to configure Gulp in ASP.NET MVC Core 1.0 application.

Setup NPM (Node Package Manager)

Add npm file into the project (package.json). This file is used to store the client side dependencies of nuget packages.

<img alt="NPM Settings" src="1119464/NPM.PNG" style="width: 500px; height: 142px;" />

Structure of package.json file is as follows:

{
 "version": "1.0.0",
 "name": "coreapp",
 "private": true,
  "devDependencies": {
    "gulp": "3.9.1",
    "gulp-concat": "2.6.0",
    "gulp-cssmin": "0.1.7",
    "gulp-uglify": "2.0.0"
  },
  "dependencies": {
    "bootstrap": "3.3.7"
  }
}

Add the following nuget packages of gulp:

• "gulp": "3.9.1", : Used for gulp tasks
• "gulp-concat": "2.6.0" : Used for file concatenation
• "gulp-cssmin": "0.1.7" : Use for CSS minification
• "gulp-uglify": "2.0.0" : Use for JavaScript minification

Note: In ASP.NET Core 1.0, there is no concept of bundling and minification.

Setup Gulp

After adding gulp nuget packages, you are able to find gulp configuration file in VS2015. Add the gulp configuration file (gulpfile.js) into the project and don't rename it.

<img alt="Gulp" src="1119464/NPM.PNG" style="width: 500px; height: 142px;" />

Create Tasks in Gulp File

/// <binding AfterBuild='min' />
/*
This file in the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    cssmin = require('gulp-cssmin'),
    uglify = require('gulp-uglify');

var paths = {
    webroot: "./wwwroot/"
};

paths.bootstrapCss = "./node_modules/bootstrap/dist/css/bootstrap.css";

paths.bootstrapJs = "./node_modules/bootstrap/dist/js/bootstrap.js";

paths.jsDest = paths.webroot + "js";

paths.cssDest = paths.webroot + "css";

gulp.task('min:js', function () {
    return gulp.src([paths.bootstrapJs])
                .pipe(concat(paths.jsDest + "/min/site.min.js"))
                .pipe(uglify())
                .pipe(gulp.dest("."));
});

gulp.task('copy:js', function () {
    return gulp.src([paths.bootstrapJs])
                .pipe(gulp.dest(paths.jsDest));
});

gulp.task('min:css', function () {
    return gulp.src([paths.bootstrapCss])
                .pipe(concat(paths.cssDest + "/min/site.min.css"))
                .pipe(cssmin())
                .pipe(gulp.dest("."));
});

gulp.task('copy:css', function () {
    return gulp.src([paths.bootstrapCss])
                .pipe(gulp.dest(paths.cssDest));
});

gulp.task('min', ["min:js", "min:css"]);

gulp.task('copy', ["copy:js", "copy:css"]);

The purpose of these tasks are:

1. Create minification file of bootrap.css
2. Create minification file of bootrap.js
3. Place both the minified as well as original files under wwwroot folder so it will be accessible in the application
4. We are keeping original files for debugging purposes

How to Run gulp Task in VS2015?

<img alt="Task Runner" src="1119464/Task_Runner.png" style="height: 271px; width: 640px;" />

Open task runner explorer window. Right click on copy/min tasks and run it.

<img alt="Task Runner" src="1119464/Run_Tasks..png" style="width: 469px; height: 296px;" />

It will copy the original and min (JavaScript and CSS) files under wwwroot folder. You can also add these tasks as a build part (before or after build).

Folder structure after gulp tasks is as shown below:

<img alt="FS" src="1119464/Folder_Structure.PNG" style="width: 331px; height: 303px;" />