Gulp + browserify示例(没有gulp browserify)

Question

现在，gulp-browserify is no longer supported，我正在寻找一个简单的教程，如何现在使用browserify与吞咽。This似乎是一种选择，但它仍然相当复杂。如有任何建议，我们将不胜感激。

Answer 1

请参阅this answer

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

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

Answer 2

您可能希望立即使用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'));
}

该示例取自here

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

Answer 3

我能找到的最好的视频是：

https://egghead.io/lessons/javascript-gulp-and-browserify-initial-setup

下面是我能为你的gulpfile.js想出的最简洁的代码片段(带有一些注释)(你可以/应该(？)放在与npm package.json文件相同的文件夹中)：

"use strict";

// you have to install each of these via npm install,
// and add them to your package.json file
// eg npm install gulp --save [or --save-dev]
var gulp = require('gulp');
var gutil = require('gulp-util');
var source = require('vinyl-source-stream');
var browserify = require('browserify');

// once you've installed gulp globally, you can run gulp tasks like:
// gulp name-of-task
// if you make name-of-task 'default', then just running
// gulp
// will run it
// if you install gulp only locally, you'll need to add to your 'scripts' block
// in package.json eg
// 
// "scripts": {
//     "gulp": "gulp",
//     ...[other scripts go here]...
// }
// and run like:
// npm run gulp (or whatever you named it)
gulp.task('[name-of-task]', function() {
    return browserify('[path to entry file for app *relative to the location of the gulpfile.js*]')
        // bundle is a function of the browserfy API
        .bundle()
        // I'm honestly a little baffled, I'm not sure where 'pipe' is documented...
        // vinyl-source-stream ('source') also a little unclear on that one
        .pipe(source('[name of the bundled js file]'))
        // gulp.dest writes files for you
        .pipe(gulp.dest('[path to where to write the bundled js file, again relative to location of gulpfile.js]'))
});

有人啊，我被困在这里好一阵子了。