Why is it throwing an undefined error?

Question

JavaScript

Good day to all, I ran into a problem when writing an assembly on gulp.js, I write the assembly not in one file, but in a modular way, so there was a problem when resolving paths or not exporting / importing objects correctly, I would like to know why when I write paths to the console it displays the object itself and its nested objects. and when I try to reach the nested object, it returns undefined. The project structure is like this.


That is, if I display the paths object, it is clear that nested objects lie in it


. But if I try to get paths.styles.src or just paths.src, it gives out undefined of src



Styles.js task code

const {dest, src} = require('../node_modules/gulp');

const {preprocessor} = require('./helpers/VariableHelper');
const paths = require('./helpers/PathsHelper');

const sass         = require('gulp-sass');
const scss         = require('gulp-sass');
const less         = require('gulp-less');
const stylus       = require('gulp-stylus');
const cleancss     = require('gulp-clean-css');
const concat       = require('gulp-concat');
const browserSync  = require('browser-sync').create();
const autoprefixer = require('gulp-autoprefixer');
        
console.log(paths.src);

function styles() {
  return src(paths.styles.src)
  .pipe(sass())
  .pipe(autoprefixer({ overrideBrowserslist: ['last 10 versions'], grid: true }))
  .pipe(cleancss( {level: { 1: { specialComments: 0 } },/* format: 'beautify' */ }))
  .pipe(dest('./dist'))
  .pipe(browserSync.stream())
}

exports.styles = styles;

VariableHelper.js Code

const path = require('path');
let baseDir  = path.resolve('./src') // If you wanna change you main dev directory, just replace src on another name
preprocessor = 'sass', // If you work with less or scss, just change 'sass' on 'less' for example.
fileswatch   = 'html,htm,txt,json,md,woff2', // List of files extensions for watching & hard reload (comma separated)
imageswatch  = 'jpg,jpeg,png,webp,svg'; // List of images extensions for watching & compression (comma separated)

exports.baseDir      = baseDir;
exports.preprocessor = preprocessor;
exports.fileswatch   = fileswatch;
exports.imageswatch  = imageswatch;

Code PathsHelper.js

let {baseDir, preprocessor} = require('./VariableHelper.js');

let paths = {

  scripts: {
    src: [
      // 'node_modules/jquery/dist/jquery.min.js', // npm vendor example (npm i --save-dev jquery)
      baseDir + '/js/app.js' // app.js. Always at the end
    ],
    dest: baseDir + '/js',
  },

  styles: {
    src:  baseDir + '/' + preprocessor + '/test.sass', // ./src/sass/test.*
    dest: baseDir + '/css',
  },

  images: {
    src:  baseDir + '/images/src/**/*',
    dest: baseDir + '/images/dest',
  },

  deploy: {
    hostname:    '[email protected]', // Deploy hostname
    destination: 'yousite/public_html/', // Deploy destination
    include:     [/* '*.htaccess' */], // Included files to deploy
    exclude:     [ '**/Thumbs.db', '**/*.DS_Store' ], // Excluded files from deploy
  },

  cssOutputName: 'app.min.css',
  jsOutputName:  'app.min.js',

}

console.log(paths.styles.src);

exports.paths = paths;

If I write return src in hardcode in the task, then everything works.

function styles() {
  return src('.src/sass/test.sass')
  .pipe(sass())
  .pipe(autoprefixer({ overrideBrowserslist: ['last 10 versions'], grid: true }))
  .pipe(cleancss( {level: { 1: { specialComments: 0 } },/* format: 'beautify' */ }))
  .pipe(dest('./dist'))
  .pipe(browserSync.stream())
}

Please tell me why it cannot read the value from paths.src and how to fix it to make it work? For two hours now I've been trying to figure out what I wrote wrong, and connected path.resolve and tried nothing through path.dirname, the only guess is that I'm exporting the object itself somehow wrong ...

Answer 1

1. in your project posted on github, the necessary dependencies are not registered in package.json - gulp-clean-css, gulp-concat, gulp-less, gulp-stylus
2. The path in the test.sass file in path.styles.src is formed crooked - it turns out something like
C:/Users/koles/Desktop/gulp-switzerland/src/sass/test.sass/sass/test.sass - 2 times a piece of sass/test.sass at the end of
3. why hardcode at all full path? It won't work anywhere but on your computer, will it?
4. Even after these fixes, the error
Error: File not found with singular glob: C:/Users/koles/Desktop/gulp-switzerland/src/sass/test.sass (if this was purposeful, use `allowEmpty` option )
Read it carefully.
And fix it.