Browserify + Globs

Browserify + Globs

Browserify + Uglify2 展示了如何设置一个基础的 gulp 任务来把一个 JavaScript 文件以及它的依赖打包,并且使用 UglifyJS 压缩并且保留 source map。
然而这还不够,这里还将会展示如何使用 gulp 和 Browserify 将多个文件打包到一起。

同时请看: 组合 Streams 来处理错误 范例来查看如何处理你的 stream 中 browserify 或者 uglify 的错误。

'use strict';

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var globby = require('globby');
var through = require('through2');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var reactify = require('reactify');

gulp.task('javascript', function () {
  // gulp 希望任务能返回一个 stream,因此我们在这里创建一个
  var bundledStream = through();

  bundledStream
    // 将输出的 stream 转化成为一个包含 gulp 插件所期许的一些属性的 stream
    .pipe(source('app.js'))
    // 剩下的部分,和你往常缩写的一样。
    // 这里我们直接拷贝 Browserify + Uglify2 范例的代码。
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
      // 在这里将相应 gulp 插件加入管道
      .pipe(uglify())
      .on('error', gutil.log)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./dist/js/'));

  // "globby" 替换了往常的 "gulp.src" 为 Browserify
  // 创建的可读 stream。
  globby(['./entries/*.js']).then(function(entries) {

    // 创建 Browserify 实例
    var b = browserify({
      entries: entries,
      debug: true,
      transform: [reactify]
    });

    // 将 Browserify stream 接入到我们之前创建的 stream 中去
    // 这里是 gulp 式管道正式开始的地方
    b.bundle().pipe(bundledStream);
  }).catch(function(err) {
    // ensure any errors from globby are handled
    bundledStream.emit('error', err);
  });

  // 最后,我们返回这个 stream,这样 gulp 会知道什么时候这个任务会完成
  return bundledStream;
});

有疑问、勘误、请您在下方留言,感谢您的支持 ღ( ´・ᴗ・` )!

感谢您阅读,这篇文章归 极客点子版权所有.
如果转载,请注明出处: 极客点子版权所有(/page/670.html) 知识共享许可协议
本网站使用 创作共用 归属 - 非商业用途 - 共享4.0国际许可协议的相同方式 许可.

关于作者:

    简介:

    系统架构师 、作家、
    研究方向:数据分析、 深度学习、 服务器架构、 系统原理