Simple concatenation of main file that requires another JavaScript file using Gulp.js

Question

I have a simple file:

File main.js

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

// class MyClass ...
// some js

I want to use Gulp.js 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.

File 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. How can I fix this?

score 1 · Answer 1 · answered Sep 14 '18 at 20:33

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: /\.*require\s*\('(.*)'\)/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: /.*require\s*\('(.*)'\)/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.

Your version works. Only problem is that I have to put somefile.js into the same folder as main.js. But somefile.js is a module. How can I get that module in an elegant way and not put the file in the same folder or write const somefile = require('../node_modules/somefile/somefile.js') — Nistor Cristian, Sep 14 '18 at 21:20
There is another option, besides 'pattern', and that is 'resolvePath' where you could create a function that takes the regex match and the original target file - your 'src/main.js' and constructs and returns the actual path to the required file. So the 'node_modules' part could be joined to the path in that function and needn't be in the require statement for example. https://www.npmjs.com/package/gulp-resolve-dependencies#optionsresolvepath It all depends on your file structure how much you could abstract out of the require statement and into your own resolver function. — Mark, Sep 15 '18 at 01:02
In any case, there should be no need for the required files to be in the same folder as src as long as you have a good relative path to them in the require statement or create it in the resolver function. — Mark, Sep 15 '18 at 01:04

Simple concatenation of main file that requires another JavaScript file using Gulp.js

File main.js

File gulpfile.js

1 Answers1

Linked