需要另一个JS文件的主文件的Gulp简单串联 [英] Gulp simple concatenation of main file that requires another JS file

问题描述

我有一个简单的文件:

main.js:

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

// class MyClass ...
// some js

我想使用 gulp 创建一个缩小的文件，其中也包含来自 somefile.js 的代码.但是由于某种原因，我找不到实现此目的的方法.在我的缩小文件中，我有 require('somefile')，而不是完整的代码.

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'))
);

我也尝试过使用 gulp-concat .

我丢失了一些东西，但不确定是什么.

I'm missing something, but not sure what.

有什么想法吗?

推荐答案

在resolveDependencies管道中，您复制了默认的正则表达式模式，该模式由 gulp-resolve-dependencies 将用于查找代码中的任何 require 语句.但是您的 require 看起来与文档示例大不相同.您的:

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')

因此，请尝试以下模式:模式:/\.* require \ s * \('(.*)'\)/g

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.

这篇关于需要另一个JS文件的主文件的Gulp简单串联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！