1

I am using multiple files with gulp@4 where the main gulpfile.js includes all other files within the ./tasks/ directory. We are using the npm gulp-hub package to include multiple gulpfiles with the ./tasks/ directory. However we are getting the following error message when calling the tasks.

Forward referenced tasks 'clean-minify-js` not defined before use

How can we include multiple gulpfiles within the main gulpfile.js so that we can call tasks?

Current gulpfile.js:

'use strict';

var gulp = require('gulp'),
    HubRegistry = require('gulp-hub');
    
var genericHub = new HubRegistry('./tasks/scripts.js');
gulp.registry(genericHub);

var watchers = function(done) {
  gulp.watch('src/*.js', gulp.parallel('clean-minify-js'));
  done();
}

gulp.task('watch', gulp.series(watchers));

Current ./tasks/scripts.js

'use strict';

var gulp = require('gulp'),
    clean = require('gulp-clean'),
    uglify = require('gulp-uglify');
    
gulp.task('clean-scripts', function() {
  return gulp.src(dest.js)
             .pipe(clean({read:false, force: true});
});

gulp.task('minify-js', gulp.series('clean-scripts', function() {
   gulp.src(src.js)
       .pipe(uglify())
       .pipe(gulp.dest(dest.js));
}));

gulp.task('clean-minify-js', gulp.series('minify-js'));

Folder structure:

  • some/path/gulpfile.js
  • some/path/tasks/scripts.js
0

1 Answer 1

-1

To resolve the issue, I had to do the following.

  • Use the require-dir package to include all files within the ./tasks/ directory.
  • convert tasks that were designed for [email protected] into functions for gulp@4
  • use gulp.series to set the functions to run in the particular order we needed

gulpfile.js

'use strict';

var gulp = require('gulp'),
    requireDir = require('require-dir');
requireDir('./tasks/');    

var watchers = function(done) {
  gulp.watch('src/*.js', gulp.parallel('clean-minify-js'));
  done();
}

gulp.task('watch', gulp.series(watchers));

./tasks/scripts.js

'use strict';

var gulp = require('gulp'),
    clean = require('gulp-clean'),
    uglify = require('gulp-uglify');

function cleanScripts() {
  return gulp.src(dest.js)
             .pipe(clean({read:false, force: true});
}

function minJs() {
  return gulp.src(src.js)
       .pipe(uglify())
       .pipe(gulp.dest(dest.js));
}

gulp.task('clean-minify-js', gulp.series(cleanScripts, minJs));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.