AnswerBun.com

Iterating over directories with Gulp?

Stack Overflow Asked by Nathan Rutman on January 3, 2022

I’m new to gulp, but I’m wondering if its possible to iterate through directories in a gulp task.

Here’s what I mean, I know a lot of the tutorials / demos show processing a bunch of JavaScript files using something like “**/*.js” and then they compile it into a single JavaScript file. But I want to iterate over a set of directories, and compile each directory into it’s own JS file.

For instance, I have a file structure like:

/js/feature1/something.js
/js/feature1/else.js
/js/feature1/foo/bar.js
/js/feature1/foo/bar2.js
/js/feature2/another-thing.js
/js/feature2/yet-again.js

…And I want two files: /js/feature1/feature1.min.js and /js/feature2/feature2.min.js where the first contains the first 4 files and the second contains the last 2 files.

Is this possible, or am I going to have to manually add those directories to a manifest? It would be really nice to pragmatically iterate over all the directories within /js/.

Thanks for any help you can give me.

-Nate

Edit: It should be noted that I don’t only have 2 directories, but I have many (maybe 10-20) so I don’t really want to write a task for each directory. I want to handle each directory the same way: get all of the JS inside of it (and any sub-directories) and compile it down to a feature-based minified JS file.

5 Answers

I had trouble with the gulp recipe, perhaps because I'm using gulp 4 and/or because I did not want to merge all my folders' output anyway. I adapted the recipe to generate (but not run) an anonymous function per folder and return the array of functions to enable them to be processed by gulp.parallel - in a way where the number of functions I would generate would be variable. The keys to this approach are:

  1. Each generated function needs to be a function or composition (not a stream). In my case, each generated function was a series composition because I do lots of things when building each module folder.

  2. The array of functions needs to passed into my build task using javascript apply() since every member of the array needs to be turned into an argument to gulp.parallel in my case. Excerpts from my function that generates the array of functions:

    function getModuleFunctions() {
        //Get list of folders as per recipe above - in my case an array named modules
    
        //For each module return a function or composition (gulp.series in this case).
        return modules.map(function (m) {
            var moduleDest = env.folder + 'modules/' + m;
            return gulp.series(
                //Illustrative functions... all must return a stream or call callback but you can have as many functions or compositions (gulp.series or gulp.parallel) as desired
                function () {
                    return gulp.src('modules/' + m + '/img/*', { buffer: false })
                        .pipe(gulp.dest(moduleDest + '/img'));
                },
                function (done) {
                    console.log('In my function');
                    done();
                }
            );
        });
    }
    
    //Illustrative build task, running two named tasks then processing all modules generated above in parallel as dynamic arguments to gulp.parallel, the gulp 4 way
    gulp.task('build', gulp.series('clean', 'test', gulp.parallel.apply(gulp.parallel, getModuleFunctions())));  
    

    `

Answered by MarkF on January 3, 2022

There's an official recipe for this: Generating a file per folder

var fs = require('fs');
var path = require('path');
var merge = require('merge-stream');
var gulp = require('gulp');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');

var scriptsPath = 'src/scripts';

function getFolders(dir) {
    return fs.readdirSync(dir)
      .filter(function(file) {
        return fs.statSync(path.join(dir, file)).isDirectory();
      });
}

gulp.task('scripts', function() {
   var folders = getFolders(scriptsPath);

   var tasks = folders.map(function(folder) {
      return gulp.src(path.join(scriptsPath, folder, '/**/*.js'))
        // concat into foldername.js
        .pipe(concat(folder + '.js'))
        // write to output
        .pipe(gulp.dest(scriptsPath)) 
        // minify
        .pipe(uglify())    
        // rename to folder.min.js
        .pipe(rename(folder + '.min.js')) 
        // write to output again
        .pipe(gulp.dest(scriptsPath));    
   });

   // process all remaining files in scriptsPath root into main.js and main.min.js files
   var root = gulp.src(path.join(scriptsPath, '/*.js'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest(scriptsPath))
        .pipe(uglify())
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest(scriptsPath));

   return merge(tasks, root);
});

Answered by Ghidello on January 3, 2022

I am trying myself to get how streams work in node. I made a simple example for you, on how to make a stream to filter folders and start a new given stream for them.

'use strict';

var gulp             = require('gulp'),
    es               = require('event-stream'),
    log              = require('consologger');

// make a simple 'stream' that prints the path of whatever file it gets into
var printFileNames = function(){

    return es.map(function(data, cb){

        log.data(data.path);
        cb(null, data);
    });
};

// make a stream that identifies if the given 'file' is a directory, and if so
// it pipelines it with the stream given
var forEachFolder = function(stream){

    return es.map(function(data, cb){

        if(data.isDirectory()){

            var pathToPass = data.path+'/*.*';  // change it to *.js if you want only js files for example

            log.info('Piping files found in '+pathToPass);

            if(stream !== undefined){
                gulp.src([pathToPass])
                .pipe(stream());
            }
        }

        cb(null, data);
    });
};


// let's make a dummy task to test our streams
gulp.task('dummy', function(){
    // load some folder with some subfolders inside
    gulp.src('js/*')
    .pipe(forEachFolder(printFileNames));
    // we should see all the file paths printed in the terminal
});

So in your case, you can make a stream with whatever you want to make with the files in a folder ( like minify them and concatenate them ) and then pass an instance of this stream to the forEachFolder stream I made. Like I do with the printFileNames custom stream.

Give it a try and let me know if it works for you.

Answered by AntouanK on January 3, 2022

You could use glob to get a list of directories and iterate over them, using gulp.src to create a separate pipeline for each feature. You can then return a promise which is resolved when all of your streams have ended.

var fs = require('fs');
var Q = require('q');
var gulp = require('gulp');
var glob = require('glob');

gulp.task('minify-features', function() {
  var promises = [];

  glob.sync('/js/features/*').forEach(function(filePath) {
    if (fs.statSync(filePath).isDirectory()) {
      var defer = Q.defer();
      var pipeline = gulp.src(filePath + '/**/*.js')
        .pipe(uglify())
        .pipe(concat(path.basename(filePath) + '.min.js'))
        .pipe(gulp.dest(filePath));
      pipeline.on('end', function() {
        defer.resolve();
      });
      promises.push(defer.promise);
    }
  });

  return Q.all(promises);
});

Answered by Ben on January 3, 2022

First, install gulp-concat & gulp-uglify.

$ npm install gulp-concat
$ npm install gulp-uglify

Next, do something like:

//task for building feature1
gulp.task('minify-feature1', function() {
 return gulp.src('/js/feature1/*')
  .pipe(uglify()) //minify feature1 stuff
  .pipe(concat('feature1.min.js')) //concat into single file
  .pipe(gulp.dest('/js/feature1')); //output to dir
});

//task for building feature2
gulp.task('minify-feature2', function() { //do the same for feature2
 return gulp.src('/js/feature2/*')
  .pipe(uglify())
  .pipe(concat('feature2.min.js'))
  .pipe(gulp.dest('/js/feature2'));
});

//generic task for minifying features
gulp.task('minify-features', ['minify-feature1', 'minify-feature2']);

Now, all you have to do to minify everything from the CLI is:

$ gulp minify-features

Answered by adamb on January 3, 2022

Add your own answers!

Related Questions

How to convert hour into seconds?

1  Asked on December 13, 2021

     

How to send JSON body in GET request golang?

2  Asked on December 13, 2021

       

Does a set in node.js reset if you restart a program?

1  Asked on December 13, 2021 by h-rashid

   

How to trigger button with html href?

2  Asked on December 13, 2021 by dzwash

     

Taking input of unknown size of array

1  Asked on December 13, 2021 by subhradwip-ghosh

         

Reduce method not clear

2  Asked on December 13, 2021 by dario-k

     

Matching + character with Java Regex

1  Asked on December 13, 2021 by felix-darke

   

Python nested classes: self is not defined

1  Asked on December 13, 2021 by cminusminus

     

Ask a Question

Get help from others!

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP