javascript - gulp 插件 - 将损坏的 js 文件合并到一个 js 文件中？

Question

过去两天我已经阅读了互联网上有关该主题的所有答案。现在我只是在寻找 gulp 插件，它可以将损坏的 js 文件合并到一个大 js 文件中，并且不会因一个 js 文件中未关闭的函数而在终端中抛出错误。

说明:

我创建了使用模块构建的 js 应用程序。 一开始我不知道这会成为一个大应用程序，因此我将 js 代码写在一个文件中。

现在我想到了像这样分割 app.js 文件的想法:

app-start.js(命名 IIFE 函数打开)

模块1.js

module2.js

等等

app-end.js(命名 IIFE 函数已关闭)

我使用 gulp 作为任务运行程序，并且 gulp-concat 工作得很好。

问题是，当我尝试破坏两个文件(app-start.js、app-end.js)中的 IIFE 函数时，gulp 不想构建 bundle.js 文件。 我在终端中收到错误，我应该修复我的 js 代码
应用程序启动.js

所以，我的问题是，
你可能知道 gulp 插件，它会按给定的顺序合并多个 js 文件，而不用担心这些文件中的 js 代码错误？

这是我的 gulp.js 代码:

    var gulp = require('gulp'),
    sass = require('gulp-sass'),
    uglify = require('gulp-uglify'),
    plumber = require('gulp-plumber'),
    concat = require('gulp-concat'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    sourceMap = require('gulp-sourcemaps'),
    babel = require('gulp-babel');



    gulp.task('sass', function() {
    gulp.src('resources/sass/config-normalize.sass')
    //.pipe(sourceMap.init())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(autoprefixer({browsers: ['last 30 versions']}))
    .pipe(sass({outputStyle: 'expanded'})) //expanded - compressed  
    //.pipe(sourceMap.write('.'))
    .pipe(gulp.dest('configurator/css'));

    gulp.src('resources/sass/config-style.sass')
    //.pipe(sourceMap.init())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(autoprefixer({browsers: ['last 30 versions']}))
    .pipe(sass({outputStyle: 'expanded'})) //expanded - compressed  
    //.pipe(sourceMap.write('.'))
    .pipe(gulp.dest('configurator/css'))
    .pipe(browserSync.stream());
});


gulp.task('scripts', function() {
    gulp.src([
        //'resources/js/vendor/jquery.js',
        //'resources/js/vendor/library/neki_file.js',
        'resources/js/001-app-start.js',          
        'resources/js/002-ajax.js',
        'resources/js/003-global-variables.js',

        'resources/js/050-main.js',

        'resources/js/100-my-modules.js',
        'resources/js/app-end.js'
        ])
    //.pipe(plumber())
    .pipe(babel({
            presets: ['es2015']
        }))
    .pipe(concat('all.js'))
    //.pipe(uglify())
    .pipe(gulp.dest('configurator/js'))
    .pipe(browserSync.stream());
});



gulp.task('php', function() {
    gulp.src('./**/*.php')
    .pipe(browserSync.stream());
});




gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "localhost"     //Upisi path do projekta na local hostu bez http://
    });
});




gulp.task('images', function() {
    return gulp.src('assets/images-uncompressed/**/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('build/images'));
});



gulp.task('watch', function() {
    gulp.watch('./**/*.php', ['php']);
    gulp.watch('resources/sass/**', ['sass']);
    gulp.watch('resources/js/**', ['scripts']);
    //gulp.watch('resources/images-uncompressed/*', ['images']);
});

gulp.task('default', ['sass', 'scripts', 'php', 'browser-sync', 'watch']);

Answer 1

问题在于您运行 Gulp 任务的顺序:

babel 解析并转换 JavaScript，因此它需要格式正确的输入。

concat 不需要理解 JavaScript；它只是组合文本文件。它会很乐意处理你 splinter 的文件。

如果将 concat 移到 babel 之前，Babel 可以处理由分割文件构建的单个、格式良好的 JavaScript blob。