如何在调试.net核心应用程序时运行gulp任务

Question

我正在使用gulp预处理LESS文件，但是想要在调试时对它们进行更改，以便我可以即时查看它们。

我以前的应用程序使用bundle配置执行此操作，但想知道如何使用gulp for .net core实现相同的功能。

我目前有一个监视任务，在我编辑代码时运行以查找LESS文件的任何更改，但是这似乎只是在不调试站点时启动我的进程任务。

谢谢

Answer 1

我在使用Angular2和ASP.Net Core时只是this gulp file。如果不需要，可以删除Angular2。

/*
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']);

Answer 2

您可以从startup.cs以编程方式运行shell命令来完成此操作。请参阅以下代码作为示例实现。

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();
    }
}

这将打开命令shell窗口并在调试会话期间执行gulp watch。结束调试会话时，窗口将自动关闭。

我假设您只希望在开发环境中发生这种情况，这就是为什么我添加env.IsDevelopment()作为运行shell进程的条件。