Browserify + Globs (多个目标路径)

Browserify + Globs (多个目标路径)

这个例子用来展示如何设置一个使用 browserify 打包多个输入并且有多个输出目的地的任务。

下边的 js 任务会打包所有在 src/ 目录下所有的 .js 文件,然后输出每一个对应的文件到 dest/ 目录。

var gulp = require('gulp');
var browserify = require('browserify');
var gutil = require('gulp-util');
var tap = require('gulp-tap');
var buffer = require('gulp-buffer');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');

gulp.task('js', function () {

  return gulp.src('src/**/*.js', {read: false}) // 不需要读取文件内容,browserify 会处理这个问题

    // 使用 gulp-tap 转换文件内容
    .pipe(tap(function (file) {

      gutil.log('bundling ' + file.path);

      // 使用 browserify 的打包 stream 来替换文件
      file.contents = browserify(file.path, {debug: true}).bundle();

    }))

    // 转换 stram 内容为 buff 内容(因为 gulp-sourcemaps 不支持 stream 形式的内容)
    .pipe(buffer())

    // 载入并初始化 sourcemaps
    .pipe(sourcemaps.init({loadMaps: true}))

    .pipe(uglify())

    // 写入 sourcemaps
    .pipe(sourcemaps.write('./'))

    .pipe(gulp.dest('dest'));

});

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

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

关于作者:

    简介:

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