Машинопись -> Babelify -> Browserify -> Uglify Buildchain в Gulp

Question

В Gulp настроена сборочная цепочка, но всякий раз, когда я запускаю команду gulp, она использует только одну из двух точек входа, которые я предоставляю. Я пытаюсь объединить два метода отсюда:

https://fettblog.eu/gulp-browserify-multiple-bundles/

и здесь:

https://gist.github.com/frasaleksander/4f7b08b9e0e5cea03919a43372c53d4e

/ var / www/website/gulpfile.js

//////////////
// IMPORTS //
/////////////

//Gulp Dependencies
var gulp = require('gulp');
var glob = require('glob');
var es = require('event-stream');
var log = require('fancy-log');
var rename = require('gulp-rename')
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');

//JS Dependencies
var tsify = require('tsify');
var watchify = require('watchify');
var browserify = require('browserify');
var uglify = require('gulp-uglify-es').default;


/////////////
// CONFIG //
////////////

var babelconfig = {
    presets: ['@babel/preset-env'],
    extensions: ['.ts']
}

var tsconfig = {
    "moduleResolution": "node",
    "target": "es2015",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "lib": [
        "DOM",
        "ES2015",
        "ES2015.Iterable"
    ]
}

//////////////////
// JAVA SCRIPT //
/////////////////

//JS entry points
var mains = glob.sync('src/js/**/*-main.ts');
mains.forEach(val => {
    console.log("main: " + val);
})
//Watchify Object
var watchJS = watchify(browserify({
    basedir: '.',
    debug: true,
    entries: mains,
    cache: {},
    packageCahce: {}
})).plugin(tsify, tsconfig);

///////////////
// DEFAULTS //
//////////////

gulp.task('default', () => {
    var tasks = mains.map(function (entry) {
        watchJS.entries = [entry];
        return watchJS
            .transform('babelify', babelconfig)
            .bundle()
            .pipe(source(entry))
            .pipe(buffer())
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(uglify())
            .pipe(rename(function (opt) {
                console.log("dirname: " + opt.dirname);
                console.log("basename: " + opt.basename);
                opt.basename = opt.basename.replace('-main', '');
                opt.dirname = opt.dirname.replace('src\/js\/', '');
                opt.extname = '.min.js';
            }))
            .pipe(sourcemaps.write('./'))
            .on('end', () => {
                console.log("write sourcemapse: " + entry);
            })
            .pipe(gulp.dest('dist/js/'))
    });
    return es.merge.apply(null, tasks);
});

//Same as the above, but not a callback function so it can be called below
function js() {
    var tasks = mains.map(function (entry) {
        watchJS.entries = [entry];
        console.log('starting ' + watchJS.entries);
        return watchJS
            .transform('babelify', babelconfig)
            .bundle()
            .pipe(source(entry))
            .pipe(buffer())
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(uglify())
            .pipe(rename(function (opt) {
                opt.basename = opt.basename.replace('-main', '');
                opt.dirname = opt.dirname.replace('src\/js\/', '');
                opt.extname = '.min.js';
            }))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest('dist/js/'))
    });
}


watchJS.on('update', js);
watchJS.on('log', log);

А вот вывод после выполнения gulp:

main: src/js/projects/tesseract/tesseract-main.ts
main: src/js/writings/dead-battery-main.ts
[10:03:35] Using gulpfile /var/www/website/gulpfile.js
[10:03:35] Starting 'default'...
[10:03:42] 3817638 bytes written (3.15 seconds)
dirname: src/js/writings
basename: dead-battery-main
write sourcemapse: src/js/writings/dead-battery-main.ts

Как вы видите обе точки входа Я хотел бы скомпилировать в массиве mains, однако только один когда-либо заканчивается. Самая странная часть в том, что я извлекаю преобразование babelify для обоих сборников fini sh. Если я правильно понимаю вещи без бабелизации, мой JS не сможет работать почти на таком же количестве браузеров, иначе я бы просто убрал его.

Моя общая цель - создать цепочку сборки это объединяет все файлы. * - main.ts как точки входа в src / js / и выплевывает их как файлы es5 / bundled / minified в их соответствующие каталоги dist / js. Я также был бы более чем счастлив выкинуть все это из окна и начать с нуля, если кто-то может связать руководство, которое проливает что-то вроде на Typescript-> Babel-> Browserify-> Uglify buildchain. Спасибо.

Answer 1

Я исправил это, удалив watchify из уравнения при использовании вместо этого gulp.watch. Вот мой gulpfile.js сейчас:

//////////////
// IMPORTS //
/////////////

//Gulp Dependencies
var gulp = require('gulp');
var glob = require('glob');
var log = require('fancy-log');
var rename = require('gulp-rename')
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');
var livereload = require('gulp-livereload');

//JS Dependencies
var tsify = require('tsify');
var browserify = require('browserify');
var uglify = require('gulp-uglify-es').default;

//CSS Dependencies
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

/////////////
// CONFIG //
////////////

//Babel Compiler Options
var babelconfig = {
    presets: ['@babel/preset-env'],
    extensions: ['.ts']
}

//TS Compiler Options
var tsconfig = {
    "moduleResolution": "node",
    "target": "es2015",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "lib": [
        "DOM",
        "ES2015",
        "ES2015.Iterable"
    ]
}

//Personal Config for easy path changing
var config = {
    dev: {
        sass: './src/sass/**/*.scss',
        ts: './src/ts/**/*.ts',
        entries: './src/ts/**/*-main.ts'
    },
    prod: {
        css: './dist/css/',
        html: './',
        js: './dist/js/'
    }
};

//Livereload stuff
livereload({ start: true });

//////////////////
// JAVA SCRIPT //
/////////////////

gulp.task('js', (done) => {
    var tasks = glob.sync(config.dev.entries).map(function (entry) {
        log('started building ' + entry);
        return browserify()
            .add(entry)
            .plugin(tsify, tsconfig)
            .transform('babelify', babelconfig).on('error', (err) => { log("babel error: " + err); })
            .bundle()
            .pipe(source(entry))
            .pipe(buffer())
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(uglify())
            .pipe(rename(function (opt) {
                opt.basename = opt.basename.replace('-main', '');
                opt.dirname = opt.dirname.replace('src\/ts\/', '');
                opt.extname = '.min.js';
            }))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(config.prod.js)).on('end', () => { log("finished building " + entry); }
            );
    });
    livereload();
    done();
});

gulp.task('watchJS', () => {
    gulp.watch(config.dev.ts,
        gulp.series('js')
    );
});

//////////
// CSS //
/////////

gulp.task('css', () => {
    return gulp.src(config.dev.sass, { base: './' })
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(cssnano())
        .pipe(rename({ extname: '.min.css' }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(config.prod.css))
        .pipe(livereload()
        );
});

gulp.task('watchCSS', () => {
    gulp.watch(config.dev.sass,
        gulp.series('css')
    );
});

///////////////
// DEFAULTS //
//////////////

gulp.task('watch', () => {
    livereload.listen();
    gulp.watch(config.dev.sass, gulp.series('css'));
    gulp.watch(config.dev.ts, gulp.series('js'));
});

gulp.task('default',
    gulp.series([
        'css',
        'js',
        'watch'
    ]
    )
);

Этот файл помог мне больше всего:

https://gist.github.com/johnstew/44c247246f1e08790e24