Member Avatar for bobgodwin
bobgodwin 14 Newbie Poster

I need to check the extention of user uploaded files when running a gulp-sass task. I have a file exists function that seems to work, but can't get thereturn value into the task. Here's my gulp file:

var fileexists = require('file-exists');
var gulp = require('gulp');
var sassVars = require('gulp-sass-vars');
var sass = require('gulp-sass');

var style_in = './scss/**/*.scss';
var style_out = './css';
var himg;
var fimg;

fileexists('img/header.jpg').then(exists => {
    if(exists){
        himg = 'header.jpg'
        console.log(himg)
    }
})

fileexists('img/header.png').then(exists => {
    if(exists){
        himg = 'header.png'
        console.log(himg)
    }
})

fileexists('img/footer.jpg').then(exists => {
    if(exists){
        fimg = 'footer.jpg'
        console.log(fimg)
    }
})

fileexists('img/footer.png').then(exists => {
    if(exists){
        fimg = 'footer.png'
        console.log(fimg)
    }
})

gulp.task('sass', function() {
    var variables = {
        header_image : fileexists.himg
    };
    return gulp
    .src(style_in)
    .pipe(sassVars(variables, { verbose: true }))
    .pipe(sass().on('error', sass.logError))
    .pipe(cssImageDimensions('../img'))
    .pipe(gulp.dest(style_out))
});

gulp.task('sass:watch', function() {
    gulp.watch(style_in, ['sass'])
});

I've tried passing values like this " gulp.task('sass', function(fileexists)" but can't get it to work. What am I doing wrong?

Edited by Dani because: Moved to correct forum
  • 1 Contributor
  • 0 Replies
  • 292 Views

Dani AI

Generated

The root cause is timing and a small API mix-up. The file checks you run at the top level are asynchronous promises, so your SASS task can fire before those promises set any variables; also fileexists.himg won’t work because the file-exists module is not a container for your names. Gulp does not inject arbitrary values into the task function parameters either. Fixes: either do the existence checks inside the task (so values are ready before you call sassVars) or make the task wait for the promises.

A simple synchronous approach (fast and easy when checking a couple of files):

const fs = require('fs');
const path = require('path');

function pickImage(basename) {
  const jpg = path.join(__dirname, 'img', basename + '.jpg');
  const png = path.join(__dirname, 'img', basename + '.png');
  if (fs.existsSync(jpg)) return basename + '.jpg';
  if (fs.existsSync(png)) return basename + '.png';
  return '';
}

gulp.task('sass', function() {
  const vars = { header_image: pickImage('header'), footer_image: pickImage('footer') };
  return gulp.src('scss/**/*.scss')
    .pipe(sassVars(vars, { verbose: true }))
    .pipe(sass())
    .pipe(gulp.dest('css'));
});

If you prefer non-blocking I/O, wait for the promises before piping (async/await or Promise.all):

const fileExists = require('file-exists');

async function resolveImages() {
  const [hJ, hP, fJ, fP] = await Promise.all([
    fileExists('img/header.jpg'),
    fileExists('img/header.png'),
    fileExists('img/footer.jpg'),
    fileExists('img/footer.png')
  ]);
  return { header_image: hJ ? 'header.jpg' : hP ? 'header.png' : '',
           footer_image: fJ ? 'footer.jpg' : fP ? 'footer.png' : '' };
}

gulp.task('sass', async function() {
  const vars = await resolveImages();
  return gulp.src('scss/**/*.scss')
    .pipe(sassVars(vars, { verbose: true }))
    .pipe(sass())
    .pipe(gulp.dest('css'));
});

Notes: provide a sensible default (empty string) to avoid undefined SASS variables, log the resolved vars inside the task to verify them, and if you’re on Gulp 4 export tasks as functions and use gulp.series/gulp.watch accordingly. — the quick win is moving the checks into the task or awaiting them so the variables are defined when sassVars runs.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.