Why vendor.css is not added during gulp tasks?

Question

I am expecting vendor.css and main.css to be attached during all my gulp operations in my ( gulp dev for development, gulp prod for production ready version ), however only main.css is added.

I have verified that the path is correct, I also looked in my old configurations where it is the same, but for some reason that I can not comprehend this is not working as expected. I also tried removing the bower:css part with no luck, other parts are builded without any issue at all, like this part

or the part right before

app structure:

root/
|-- app/|   
|-- .index.html
|   |-- styles/
|   |-- scripts/
|   |-- fonts/
|   |-- images/
|-- dist/
|-- .tmp/
|-- node_modules
|-- bower_components
|-- package.json
|-- gulpfile.babel.js
|-- bower.json

of app/index.html:

--

in .tmp/index.html ( during 'gulp dev' ) and of dist/index.html ( 'gulp prod' ):

--

Package.json:

{
  "name": "--",
  "version": "0.0.1",
  "description": "",
  "author": "--",
  "engines": {
    "node": "20.11.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.19",
    "browser-sync": "^3.0.2",
    "delete": "^1.1.0",
    "gulp-autoprefixer": "^9.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-cache": "^1.1.3",
    "gulp-cssnano": "^2.1.3",
    "gulp-if": "^3.0.0",
    "gulp-imagemin": "^9.0.0",
    "gulp-load-plugins": "^2.0.8",
    "gulp-notify": "^4.0.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^10.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.1.0",
    "gulp-size": "^5.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-useref": "^5.0.0",
    "gulp-wiredep": "^1.2.0",
    "imagemin": "7.0.1",
    "postcss": "^8.4.38",
    "sass": "^1.75.0"
  },
  "dependencies": {
    "@babel/core": "^7.24.4",
    "@babel/preset-env": "^7.24.4",
    "@babel/register": "^7.23.7",
    "gulp": "^5.0.0",
    "gulp-html-partial": "^1.0.1"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "bower": {
    "directory": "bower_components"
  }

Gulpfile.babel.js:

const { watch, src, dest, series, parallel } = require('gulp'),
  sass = require('gulp-sass')(require('sass')),
  babel = require('gulp-babel'),
  uglify = require('gulp-uglify'),
  rename = require('gulp-rename'),
  del = require('delete'),
  browserSync = require('browser-sync'),
  $ = require('gulp-load-plugins')({
    debug: 1,
    scope: ['devDependencies']
  }),
  notify = require('gulp-notify'),
  postcss = require('gulp-postcss'),
  autoprefixer = require('autoprefixer'),
  gulpIf = require('gulp-if'),
  htmlPartial = require('gulp-html-partial');


function reload(done) {
  browserSync.reload();
  done();
}

export const clean = () => del(['.tmp', 'dist']);

function wiredep(e) {
  src('app/styles/*.scss')
    .pipe($.wiredep({
      ignorePath: /^(\.\.\/)+/
    }))
        .pipe(dest('app/styles'));
    return src('app/*.html')
        .pipe($.wiredep({
            ignorePath: /^(\.\.\/)*\.\./,
            bowerJson: require('./bower.json'),
            directory: 'bower_components'
        }))
        .pipe(dest('app'))
}

function html() {
  return src('app/*.html')
    .pipe(htmlPartial({ basePath: 'app/partials/' }))
    .pipe($.useref({
      searchPath: ['.tmp', 'app', '.']
    }))
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.cssnano()))
    // .pipe($.if('*.html', $.htmlmin({ collapseWhitespace: true })))
    .pipe(dest('.tmp'))
    .pipe(dest('dist'))
}

function styles() {
  const cssnano = require('gulp-cssnano');
  return src('app/styles/*.scss')
    .pipe($.plumber((e) => {
      console.log(e);
      this.emit('end');
    }))
    .pipe($.sourcemaps.init())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(postcss([autoprefixer()]))
    // .pipe(cssnano())
    // .pipe(rename({ extname: '.min.css' }))
    .pipe($.sourcemaps.write('.'))
    .pipe(dest('.tmp/styles'))
    .pipe(dest('dist/styles'))
    .pipe(browserSync.stream())
    // .pipe(reload)
}

function scripts() {
  return src('app/scripts/**/*.js')
    // .pipe($.plumber())
    // .pipe($.babel())
    // .pipe(dest('.tmp/scripts'))
    // .pipe($.sourcemaps.init())
    // .pipe(uglify())
    // .pipe(rename({ extname: '.min.js' }))
    // .pipe($.sourcemaps.write('.'))
    .pipe(dest('dist/scripts'))
    // .pipe(browserSync.stream())
}

function images() {
  return src(
      'app/images/**/*.{png,PNG,jpg,JPG,jpeg,JPEG,webp,WEBP,gif,GIF,bmp,BMP}',
      { encoding: false }
    )
    .pipe($.plumber())
    // .pipe($.cache(imagemin({
    //   encoding: false
    // })))
    //   optimizationLevel: 3,
    //   progressive: true,
    //   interlaced: true
    // })))
    // .on('error', function(err) {
      //   console.log(err);
      //   this.end();
      // })
    // .pipe(imagemin({ verbose: true }))
    .pipe(dest('dist/images'))
}

function fonts() {
  return src(
    'app/fonts/**/*.{eot,svg,ttf,woff,woff2}',
    { encoding: false }
  )
    .pipe(dest('dist/fonts'))
}

function serve() {
  browserSync.init({
    browser: 'google chrome canary',
        notify: true,
        port: 9000,
    server: {
      baseDir: ['.tmp', 'app'],
      routes: {
                '/bower_components': 'bower_components'
            }
    }
  });

  watch('.tmp', reload);
  watch('app/**/*.html', series(html, reload));
  watch('app/scripts/**/*.js', series(scripts, reload));
  watch('app/styles/**/*.scss', series(styles, reload));
  watch('app/fonts/*.{eot,svg,ttf,woff,woff2}', series(fonts, reload));
}

exports.wiredep = wiredep;
exports.prod = series(clean, parallel(html, styles, scripts, images, fonts));
exports.dev = series(clean, parallel(html, styles, scripts), serve);

bower.json:

{
  "name": "--",
  "description": "",
  "main": "",
  "authors": [
    "-- -- <--@gmail.com>"
  ],
  "license": "ISC",
  "private": true,
  "dependencies": {
    "bootstrap": "^5.3.3",
    "jquery": "^3.7.1",
    "glidejs": "^3.6.1"
  },
  "overrides": {
    "bootstrap": {
      "main": [
        "dist/css/bootstrap.min.css",
        "dist/js/bootstrap.bundle.min.js"
      ]
    },
    "glidejs": {
      "main": [
        "dist/css/glide.core.min.css",
        "dist/css/glide.core.map.min.css",
        "dist/glide.min.js"
      ]
    }
  }
}

I have tried to google, gpt, looked at other configurations, updating packages, tried multiple times gulp clean, gulp prod and even gulp wiredep, but it just doesn't work.

Thank you for any assistance or advice you can provide!

Why vendor.css is not added during gulp tasks?

Answers (0)

Related Questions