javascript - Gulp simple concatenation of main file that requires another JS file

Question

I have a simple file:

main.js:

'use strict';
const somefile = require('somefile')

// class MyClass ...
// some js

I want to use gulp to create a minified file that has the code from somefile.js included too. But for some reason, I can't find a way to do this. Inside my minified file I have require('somefile'), not the full code.

gulpfile.js

const gulp = require('gulp');
const minify = require('gulp-minify');
const babel = require('gulp-babel');
const include = require("gulp-include");
const sourcemaps = require('gulp-sourcemaps');
const jsImport = require('gulp-js-import');
const resolveDependencies = require('gulp-resolve-dependencies');

gulp.task('default', () =>
    gulp.src('src/main.js')
        .pipe(sourcemaps.init())
        .pipe(resolveDependencies({
          pattern: /* @requires [s-]*(.*.js)/g
        }))
        .pipe(jsImport({hideConsole: true}))
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(minify({
            ext: {
                min: '.min.js'
            }
        }))
        .pipe(gulp.dest('dist'))
);

I've tried with gulp-concat too.

I'm missing something, but not sure what.

Any ideas?

Answer 1

In the resolveDependencies pipe you copied the default regex pattern which the gulp-resolve-dependencies will use to find any require statements in the code. But your require looks very different than the documentation example. Yours:

const somefile = require('somefile')

So try this pattern: pattern: /.*requires*('(.*)')/g

That should capture the file inside the parentheses (which is then automatically passed to the path resolver function). And then concat those files.

const gulp = require('gulp');
const minify = require('gulp-minify');
const babel = require('gulp-babel');

// const include = require("gulp-include");  you don't need this

const sourcemaps = require('gulp-sourcemaps');

// const jsImport = require('gulp-js-import');  you don't need this

const resolveDependencies = require('gulp-resolve-dependencies');
const concat = require('gulp-concat');

gulp.task('default', () =>
    gulp.src('src/main.js')
        .pipe(sourcemaps.init())
        .pipe(resolveDependencies({
          pattern: /.*requires*('(.*)')/g
        }))

         // added the following:
        .pipe(concat('a filename here'))

        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(minify({
            ext: {
                min: '.min.js'
            }
        }))

         // added the following:
        .pipe(sourcemaps.write('some destination folder for the soucemaps'))

        .pipe(gulp.dest('dist'))
);

I haven't been able to test this but it should help.