需要另一个 JS 文件的主文件的 Gulp 简单连接

问题描述

我有一个简单的文件:

ma​​in.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')

所以试试这个模式: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.

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