Visual Studio 2019任务运行器资源管理器+ Gulp 4

Question

我必须将前端构建过程从Gulp 3.9.1迁移到Gulp 4.0.2。

最新的Gulp医生说here可以将gulp文件分成多个部分，放置在名为gulpfile.js的文件夹下，其中包含一个index.js文件和所有其他脚本。

Visual Studio 2019 Task Runner Explorer是否支持这种配置还是需要单个gulpfile？

Answer 1

简短的回答是。 Visual Studio支持Gulp4。发生的情况是Visual Studio使用的是旧版本的Node.js。这是因为VS找不到新的节点路径。

您需要解决的问题是：

• 打开Visual Studio并单击工具。
• 在搜索选项中搜索“外部Web工具”。
• 在顶部添加$（PATH）变量。

这是我的gulpfile.js，供您参考。

var gulp = require('gulp');
var path = require('path');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var open = require('gulp-open');
const minify = require("gulp-minify");
const del = require("del");

var Paths = {
    HERE: './',
    DIST: 'dist/',
    CSS: './wwwroot/assets/css/',
    SCRIPTS: './wwwroot/assets/scripts/',
    JS: './wwwroot/assets/js/',
    IMG: './wwwroot/assets/img/',
    SCSS: './assets/scss/**/**'
};

function compileScss() {
    return gulp.src(Paths.SCSS_TOOLKIT_SOURCES)
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write(Paths.HERE))
        .pipe(gulp.dest(Paths.CSS));
};



function minifyJs() {
    return gulp.src('./assets/js/**/**', { allowEmpty: true })
        .pipe(minify({ noSource: true }))
        .pipe(gulp.dest(Paths.JS));
}

function copyCss() {
    return gulp.src('./assets/css/**/**')
        .pipe(gulp.dest(Paths.CSS));
};

function copyScripts() {
    return gulp.src('./assets/scripts/**/**')
        .pipe(gulp.dest(Paths.SCRIPTS));
}

function copyJs() {
    return gulp.src('./assets/js/**/**')
        .pipe(gulp.dest(Paths.JS));
}

function copyImages() {
    return gulp.src('./assets/img/**/**')
        .pipe(gulp.dest(Paths.IMG));
}

function copyIco() {
    return gulp.src('./assets/favicon.ico')
        .pipe(gulp.dest('./wwwroot/'));
}


// Clean assets
function clean() {
    return del(["./wwwroot/"]);
}

const build = gulp.parallel(compileScss, minifyJs);
const copy = gulp.parallel(copyCss, copyScripts, copyJs, copyImages, copyIco)
const deploy = gulp.series(clean, build, copy);


exports.clean = clean;
exports.build = build;
exports.copy = copy;
exports.default = deploy;

它仅适用于Gulp 4x