简体   繁体   中英

gulp plugin - to merge broken js files into one js file?

I have read all the answers on the internet that I could find on this subject in last two days. Now I am just searching for gulp plugin that can merge broken js files into one big js file and not to throw error in terminal caused by unclosed function in one js file.

Explanation:

I have created js app built with modules. At the very beginning I didn't knew that this will become big app and therefore I have wrote js code in one file.

Now I have come to an idea to split app.js file like this:

app-start.js (Named IIFE function open)

module1.js

module2.js

etc.

app-end.js (Named IIFE function closed)

I am using gulp as task runner and gulp-concat which works perfectly.

Problem is that when I try to break IIFE function in two files (app-start.js, app-end.js) then gulp doesn't wanna build bundle.js file. I get error in terminal that I should repair my js code in
app-start.js

So, my question is,
do You maybe know about gulp plugin that will merge multiple js files in given order and never mind the js code errors in those files?

This is my gulp.js code:

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

The problem is with the order you run your Gulp tasks:

babel parses and transforms JavaScript so it needs well-formed input.

concat doesn't need to understand JavaScript; it just combines text files. It will happily deal with your broken-up files.

If you move concat before babel , Babel can work on a single, well-formed blob of JavaScript built up from your split files.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM