Gulp 狼吞虎咽+；browserify示例（无吞咽browserify）

现在，我正在寻找一个简单的教程，如何使用browserify和gulp。这似乎是一种选择，但仍然相当复杂。任何提示都将不胜感激。

请参阅

关于链接的帖子，代码将更改为

var gulp = require('gulp');
var through2 = require('through2');
var rename     = require('gulp-rename');
var browserify = require('browserify');

function browserified() {
    return through2.obj(function(file, enc, next) {
        browserify(file.path, {
                debug: false
            })
            .plugin(collapse)
            .bundle(function(err, res) {
                if (err) {
                    return next(err);
                }

                file.contents = res;
                next(null, file);
            });
    });
}

gulp.task('bundle', function() {
    return gulp.src(['./app/main-a.js', './app/main-b.js'])
        .pipe(browserified())
        .pipe(rename({
            extname: '.bundle.js'
        }))
        .pipe(gulp.dest('dest'));
});

---

您可能希望立即使用watchify（迟早您将需要查看javascript文件的更改）。请参见此示例：

'use strict';

var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');

// add custom browserify options here
var customOpts = {
  entries: ['./src/index.js'],
  debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts)); 

// add transformations here
// i.e. b.transform(coffeeify);

gulp.task('js', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal

function bundle() {
  return b.bundle()
    // log errors if they happen
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('bundle.js'))
    // optional, remove if you don't need to buffer file contents
    .pipe(buffer())
    // optional, remove if you dont want sourcemaps
    .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
       // Add transformation tasks to the pipeline here.
    .pipe(sourcemaps.write('./')) // writes .map file
    .pipe(gulp.dest('./dist'));
}

示例取自

---

可以找到更多有用的例子。

我能找到的最好的例子是这个视频：

下面是我为您的gulpfile.js（您可以/应该（？）将其放在与您的npm package.json文件相同的文件夹中）提供的最简洁的代码片段（带有一些注释）：

有人，我被这件事缠住了一阵子。

我在

gulpfile.babel.js

中带着这个代码离开了：

// Package
import fs from 'fs';
const pkg = JSON.parse(fs.readFileSync('./package.json'));

// Gulp
import gulp from 'gulp';
import addSrc from 'gulp-add-src';
import concat from 'gulp-concat';
import sourcemaps from 'gulp-sourcemaps';
import uglify from 'gulp-uglify-es';

// Misc
import babelify from 'babelify';
import browserify from 'browserify';
import buffer from 'vinyl-buffer';
import source from 'vinyl-source-stream';

然后：

export function scripts() {

    const src = pkg.settings.src.scripts;

    const bundler = browserify({
        entries: src,
        debug: true,
        transform: [babelify]
    });

    const outputPath = path.join(__dirname, pkg.settings.out.assets);

    const assets = [
        './node_modules/...'
    ]

    return bundler.bundle()
        .pipe(source(src))
        .pipe(buffer())
        .on('error', function(err) { console.error(err); this.emit('end'); })
        .pipe(addSrc.prepend(assets))
        .pipe(sourcemaps.init())
        .pipe(concat(pkg.name + '-' + pkg.version + '.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(outputPath));
}

我还有一个

.babelrc

，带有：

{
  "presets": ["env"]
}

这里需要技巧的部分是避免忘记“乙烯基源流”和“乙烯基缓冲区”，因此您可以从browserify捆绑包中操作流和乙烯基格式

---

还注意到，我认为只有两种不同类型的JS模块：我的模块，在我提供给BrsiSerix的主SRC文件中导入；以及我用NPM管理的所有外部模块和依赖项，并在这里的

资产
数组中指定。
也在寻找这个。只想用最简单的方式配置gulp&browserify，将一堆JS文件放在一个文件夹中，并将它们合并到一个public application.JS文件中。
{
  "presets": ["env"]
}