gulp 4 series just will not run correctly with sass and del

Viewed 24

I'm using gulp 4. I'd like to do the following:

  1. clean my src and dist folders
  2. copy bootstrap over to src folder from node_modules
  3. Then run sass on bootstrap

However when I try to use series() command, my CSS tasks fails. It's like my CSS task is trying to run on a file that doesn't exist. I thought series runs only if the task before each is completed. I know my move task runs successfully if i run it without series.

    const {src, dest, series, parallel} = require('gulp'); 
    const del = require('del');
    
    const sass = require('gulp-sass')(require('sass'));
    sass.compiler = require('sass');
    
    async function clean(cb){
        console.log("starting clean"); 
        await del(["src", "build"]);
        console.log("done cleaning");
        cb();
    }
    
    function copy(cb){
        console.log("starting copying...");
        src("./node_modules/bootstrap/js/**/*").pipe(dest("./src/js/bootstrap"));
        src("./node_modules/bootstrap/scss/**/*").pipe(dest("./src/scss/bootstrap"));
        console.log("finished copying...");
        cb();
    }
    
    function css(cb){
        console.log("starting sass....");
        src('./src/scss/bootstrap/bootstrap.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(dest('./build/css'));
        console.log("sass complete");
    
        cb();
    };
    
    function log(cb){
        console.log("Logging....");
        cb();
    }
    
    exports.css = css;
    exports.clean = clean; 
    exports.copy = copy; 
    exports.default = series(clean, log, copy, css);

Error

Error: File not found with singular glob: /Users/x/Sites/bootstrap5/src/scss/bootstrap/bootstrap.scss (if this was purposeful, use `allowEmpty` option)
    at Glob.<anonymous> (/Users/x/Sites/bootstrap5/node_modules/glob-stream/readable.js:84:17)
    at Object.onceWrapper (events.js:286:20)
    at Glob.emit (events.js:198:13)
    at Glob.EventEmitter.emit (domain.js:448:20)
    at Glob._finish (/Users/x/Sites/bootstrap5/node_modules/glob/glob.js:194:8)
    at done (/Users/x/Sites/bootstrap5/node_modules/glob/glob.js:179:14)
    at Glob._processSimple2 (/Users/x/Sites/bootstrap5/node_modules/glob/glob.js:688:12)
    at /Users/x/Sites/bootstrap5/node_modules/glob/glob.js:676:10
    at Glob._stat2 (/Users/x/Sites/bootstrap5/node_modules/glob/glob.js:772:12)
    at lstatcb_ (/Users/x/Sites/bootstrap5/node_modules/glob/glob.js:764:12)
Emitted 'error' event at:
    at DestroyableTransform.EventEmitter.emit (domain.js:461:12)
    at Pumpify.emit (events.js:198:13)
    at Pumpify.EventEmitter.emit (domain.js:448:20)
    at Pumpify.Duplexify._destroy (/Users/x/Sites/bootstrap5/node_modules/duplexify/index.js:191:15)
    at /Users/x/Sites/bootstrap5/node_modules/duplexify/index.js:182:10
    at process._tickCallback (internal/process/next_tick.js:61:11)

my package:


    {
      "name": "bootstrap5",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "bootstrap": "^5.2.1"
      },
      "devDependencies": {
        "del": "^4.1.1",
        "gulp": "^4.0.2",
        "gulp-sass": "^5.1.0",
        "gulp-sourcemaps": "^3.0.0",
        "rimraf": "^3.0.2",
        "sass": "^1.54.9"
      }
    }

1 Answers

You have a typo on the 4th line of gulpfile: const sass = require('gulp-sass')(require('sass')); Maybe this causes the problem

Related