問題描述

我有一個簡單的文件:

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模板網！