How can I run a gulp task while debugging .net core app

Question

I'm using gulp to pre process LESS files, but want to make changes to them whilst debugging so I can see them on the fly.

I have previous apps doing this using the bundle config, but wanted to know how to achieve the same using gulp for .net core.

I currently have a watch task that runs to look for any changes to LESS files while I am editing code, however this only seems to kick off my process task while not debugging the site.

Thanks

Answer 1

You can run a shell command programmatically from the startup.cs to accomplish this. See the below code as an example implementation.

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;

public class Startup
{
    public Startup(IHostingEnvironment env)
    {
        Configuration = new ConfigurationBuilder()
            .Build();

        if (env.IsDevelopment())
            RunShellCommand("gulp watch", true);

        Environment = env;
    }

    public static void RunShellCommand(string argument, bool showWindow = false)
    {
        Process process = new Process
        {
            StartInfo = new ProcessStartInfo
            {
                WindowStyle = showWindow ? ProcessWindowStyle.Normal : ProcessWindowStyle.Hidden,
                FileName = "cmd.exe",
                Arguments = $"/C {argument}",
                CreateNoWindow = showWindow,
                UseShellExecute = true,
            }
        };

        process.Start();
    }
}

This will open a command shell window and execute gulp watch for the duration of the debug session. The window will close automatically when you end the debug session.

I am assuming that you only want this to happen in your development environment, which is why I added env.IsDevelopment() as a condition to running the shell process.

Answer 2

I just this gulp file while working with Angular2 and ASP.Net Core. You can remove Angular2 if you do not need it.

/*
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'),
    gp_clean = require('gulp-clean'),
    gp_concat = require('gulp-concat'),
    gp_less = require('gulp-less'),
    gp_sourcemaps = require('gulp-sourcemaps'),
    gp_typescript = require('gulp-typescript'),
    gp_uglify = require('gulp-uglify');

/// Define paths
var srcPaths = {
    app: ['Scripts/app/main.ts', 'Scripts/app/**/*.ts'],
    js: [
        'Scripts/js/**/*.js',
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system.src.js',
        'node_modules/typescript/lib/typescript.js',
        'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js',
        'node_modules/moment/moment.js'
    ],
    js_angular: [
        'node_modules/@angular/**'
    ],
    js_rxjs: [
        'node_modules/rxjs/**'
    ],
    less: [
        'Scripts/less/**/*.less'
    ]
};

var destPaths = {
    app: 'wwwroot/app/',
    css: 'wwwroot/css/',
    js: 'wwwroot/js/',
    js_angular: 'wwwroot/js/@angular/',
    js_rxjs: 'wwwroot/js/rxjs/'
};

// Compile, minify and create sourcemaps all TypeScript files and place them to wwwroot/app, together with their js.map files.
gulp.task('app', ['app_clean'], function () {
    return gulp.src(srcPaths.app)
    .pipe(gp_sourcemaps.init())
    .pipe(gp_typescript(require('./tsconfig.json').compilerOptions))
    .pipe(gp_uglify({ mangle: false }))
    .pipe(gp_sourcemaps.write('/'))
    .pipe(gulp.dest(destPaths.app));
});

// Delete wwwroot/app contents
gulp.task('app_clean', function () {
    return gulp.src(destPaths.app + "*", { read: false })
    .pipe(gp_clean({ force: true }));
});

// Copy all JS files from external libraries to wwwroot/js
gulp.task('js', function () {
    gulp.src(srcPaths.js_angular)
    .pipe(gulp.dest(destPaths.js_angular));
    gulp.src(srcPaths.js_rxjs)
    .pipe(gulp.dest(destPaths.js_rxjs));
    return gulp.src(srcPaths.js)
    // .pipe(gp_uglify({ mangle: false })) // disable uglify
    // .pipe(gp_concat('all-js.min.js')) // disable concat
    .pipe(gulp.dest(destPaths.js));
});

// Delete wwwroot/js contents
gulp.task('js_clean', function () {
    return gulp.src(destPaths.js + "*", { read: false })
    .pipe(gp_clean({ force: true }));
});

// Process all LESS files and output the resulting CSS in wwwroot/css
gulp.task('less', ['less_clean'], function () {
    return gulp.src(srcPaths.less)
    .pipe(gp_less())
    .pipe(gulp.dest(destPaths.css));
});
// Delete wwwroot/css contents
gulp.task('less_clean', function () {
    return gulp.src(destPaths.css + "*.*", { read: false })
    .pipe(gp_clean({ force: true }));
});

// Watch specified files and define what to do upon file changes
gulp.task('watch', function () {
    gulp.watch([srcPaths.app, srcPaths.js], ['app', 'js']);
});

// Global cleanup task
gulp.task('cleanup', ['app_clean', 'js_clean', 'less_clean']);

// Define the default task so it will launch all other tasks
gulp.task('default', ['app', 'js', 'less', 'watch']);