Visual Studio 2019 Task Runner Explorer + Gulp 4

Question

I have to migrate a frontend build process from Gulp 3.9.1 to Gulp 4.0.2.

The latest Gulp doc says here that a gulpfile can be splitted in various parts placed under a folder named gulpfile.js with an index.js file and all other scripts.

Does Visual Studio 2019 Task Runner Explorer support this kind of configuration or a single gulpfile is needed?

Answer 1

I have my Gulp functions broke out into multiple files. I have my separate files under a folder called 'Gulp' (variables.js and functions.js) and have my gulp file as below. With the Hub registry it will find all the files to process.

My 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);

variable.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
};

function.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

Answer 2

The short answer is yes. Visual Studio support Gulp 4. What happens is Visual Studio is using the old version of Node.js. And it is caused because VS not finding the new node path.

What you have to do to fix it is:

• Open visual studio and click in tools.
• In the search options search for "External Web Tools".
• Add $(PATH) variable on top.

Here is my gulpfile.js as a reference to you.

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;

It just works with Gulp 4x