Search code examples
javascriptgulpbundle

How to bundle multiple files in nested directory in gulp?


I am using gulp and what I need to do is to bundle all the files in multiple nested directories in node_modlues folder to public/js/libName and dist/js/libName so that I can use that module in my client.

dist 
   js 
node_modules 
   test_library
       file1.js
       file2.js 
       folder1
           file1.js
           file2.js
       folder2
           file3.js
           file4.js         
public
    js 

Solution

  • I recently solved similar task this way:

    require:

    src/bundle_entrypoint.js (bundle entrypoint):

    require('jquery');
    
    // your code
    

    gulpfile:

    // init base modules
    
    // additional modules
    var source = require('vinyl-source-stream');
    var browserify = require('browserify');
    
    // reg build tasks, etc
    
    gulp.task('build-bundle', function() {    
      return browserify({
          entries: 'src/bundle_entrypoint.js',
          debug: true,
          paths: ['./node_modules'],
          cache: {},
          packageCache: {}
        })
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(uglifyOrWhateverYouWant())
        .pipe(gulp.dest('public/js/'))
        .pipe(gulp.dest('dist/js/'));
    });
    

    EDIT:

    concat:

    gulp.task('build-bundle', function() {    
          return gulp.src(['node_modules/test_library/**/*.js','src/my.js'])
            .pipe(concat('bundle.js'))
            .pipe(uglifyOrWhateverYouWant())
            .pipe(gulp.dest('public/js/'))
            .pipe(gulp.dest('dist/js/'));
        });