Search code examples
javascriptgulpgulp-concat

How to compile JS in sub directories using Gulp?


My folder structure:

dashboard >
    components >
        accounts > accounts.js, accountsDirectives.js
        dash > dashApp.js
        settings > settings.js, settingsDirectives.js
        etc...

My function in the Gulpfile

function compile_js(minify, folder) {
    var jsLibs = gulp.src('client/'+folder+'/_sources/js/libs/*.js');
    var jsPlugins = gulp.src('client/'+folder+'/_sources/js/plugins/*.js');
    var jsCustom = gulp.src('client/'+folder+'/_sources/js/custom/*.js');
    var jsComponents = gulp.src('client/'+folder+'/components/*.js');

    // Order the streams and compile
    return streamqueue({ objectMode: true },
        jsLibs,
        jsPlugins,
        jsCustom,
        jsComponents
    )
    .pipe(concat(folder+'.module.js'))
    .pipe(gulpif(minify, uglify()))
    .pipe(gulp.dest('client/'+folder+'/assets/js'));
};

The issue is this line, that targets the components directory:

var jsComponents = gulp.src('client/'+folder+'/components/*.js');

I've also tried /components/**/*.js but still doesn't work.

I found this answer here, which they talk about symlinks, but I want to avoid using that. 1) It seems like a hack, and 2) this requires all current and future devs to create the exact symlinks on their computers as well.

Is there another way to easily target and compile all js files in a directory with sub directories?


Solution

  • Have you tried creating the paths first and then using the variables in your gulp.src arguments? Im also curious if since you are minifying them, why don't you just grab all the files for some of them with something like :

    var someVar = gulp.src('client/'+folder+'/_sources/js/**/*.js');
    

    vs

    var jsPlugins = gulp.src('client/'+folder+'/_sources/js/plugins/*.js');
    var jsCustom = gulp.src('client/'+folder+'/_sources/js/custom/*.js');