Question

我已经阅读了互联网上我在过去两天内就此主题找到的所有答案。现在我只是在搜索gulp插件，它可以将破解的js文件合并到一个大的js文件中，而不是在一个js文件中由未关闭的函数引起的终端错误。

说明：

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

现在我想出了一个像这样分割app.js文件的想法：

app-start.js （已命名为IIFE功能开启）

module1.js

module2.js

等

app-end.js （已命名IIFE功能已关闭）

我正在使用gulp作为任务运行器和gulp-concat，它可以很好地工作。

问题是，当我尝试在两个文件（app-start.js，app-end.js）中打破IIFE功能时，gulp不想构建bundle.js文件。我在终端得到错误，我应该修复我的js代码 APP-start.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;它只是组合文本文件。它会愉快地处理你的破碎文件。

如果您在concat之前移动babel，Babel可以处理从您的拆分文件构建的单个格式良好的JavaScript blob。

gulp插件 - 将破碎的js文件合并到一个js文件中？

1 个答案: