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

Question

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

最新的 Gulp 文档说 here 可以将 gulpfile 拆分为多个部分，这些部分位于名为 gulpfile.js 的文件夹下，带有 index.js 文件和所有其他脚本。

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

Answer 1

简短的回答是肯定的。 Visual Studio 支持 Gulp 4。Visual Studio 正在使用旧版本的 Node.js。是因为VS没有找到新的节点路径造成的。

你必须做的是修复它：

• 打开 Visual Studio 并点击工具。
• 在搜索选项中搜索“外部网络工具”。
• 在顶部添加 $(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

Answer 2

我将 Gulp 函数拆分为多个文件。我在一个名为“Gulp”（variables.js 和 functions.js）的文件夹下有我的单独文件，并且我的 gulp 文件如下所示。使用 Hub 注册表，它将找到所有要处理的文件。

我的 package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-concat": "2.6.1",
    "gulp-cssmin": "0.2.0",
    "gulp-hub": "4.2.0",
    "gulp-sass": "4.0.2",
    "gulp-uglify": "3.0.2"
  },
  "dependencies": {
    "bootstrap": "5.1.1",
    "bootstrap-select": "1.13.12",
    "bootstrap4-toggle": "3.6.1",
    "bootstrap-datepicker": "1.9.0",
    "datatables.net-bs4": "1.10.20",
    "datepicker-bootstrap": "^1.9.13",
    "font-awesome": "4.7.0",
    "jquery": "3.6.0",
    "jquery-validation": "1.19.3",
    "jquery-validation-unobtrusive": "3.2.12",
    "opensans-webkit": "1.1.0",
    "popper.js": "1.16.1"
  }
}

gulpfile.js

'use strict';

var gulp = require('gulp');
var HubRegistry = require('gulp-hub');

/* load some files into the registry */
var hub = new HubRegistry(['Gulp/*.js']);

/* tell gulp to use the tasks just loaded */
gulp.registry(hub);

变量.js

// #region Root Paths
var paths = {
    webroot:
        "./wwwroot/",
    nodeModules:
        "./node_modules/"
};
// #endregion  

// JavaScript files
var js = {
    // jQuery
    jQuery:
        paths.nodeModules + "jquery/dist/jquery.js",
    jQuery_min:
        paths.nodeModules + "jquery/dist/jquery.min.js",
    
    // more js files below ...
}

// Css/Scss files
var css = {
    // Bootstrap
    bootstrap:
        paths.nodeModules + "bootstrap/dist/css/bootstrap.css",
    bootstrap_min:
        paths.nodeModules + "bootstrap/dist/css/bootstrap.min.css",
    
    // more css files below ...
}

// Font files
var fonts = {
    OpenSans: paths.nodeModules + "opensans-webkit/fonts/*.woff*",
    FontAwesome: paths.nodeModules + "font-awesome/fonts/*.*"
};

// Folder locations
var folders = {
    jsFolder:
        paths.webroot + "js/",
    cssFolder:
        paths.webroot + "css/",
    fontFolder:
        paths.webroot + "fonts/"
        //paths.webroot + "uploads/files/styles-library/fonts/"
};

// Output filenames
var filenames = {
    prod_VendorJs:
        "vendor.min.js",
    prod_VendorCss:
        "vendor.min.css"
}

module.exports = {
    js: js,
    css: css,
    fonts: fonts,
    folders: folders,
    filename: filenames
};

函数.js

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var cssmin = require('gulp-cssmin');
var variables = require('./variables');


var js = variables.js;
var css = variables.css;
var fonts = variables.fonts;
var folder = variables.folders;
var filename = variables.filename;

// Doing gulp tasks below