Browserify是一个Javascript的绑定工具,帮助我们理顺module之间的依赖关系。Gulp用来优化workflow。两者的共同点都是使用流,但在使用流方面也有不同之处:

  • Browserify只要接受文件内容即可
  • Gulp不但接受文件内容,还需要接受源文件信息,然后把源文件写到一个目标文件

Gulp在文件的写入写出过程中,需要Vinyl的帮助。Vinyl是一个虚拟的文件系统,当我们写gulp.src('*.js')实际上是把硬盘上的文件放到了vinyl object中;当我们写gulp.dest('somewhere')的时候,就是把vinyl object中的内容通过流写到硬盘上的somewhere文件夹中去。

使用Gulp和Browserify创建一个绑定文件

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream'); gulp.taks('browserify', function(){
return browserify({entrieis:['path/main.js']})
.bundle()
.pipe(source(main.bundle.js))
.pipe(gulp.dest('dist'));
});

### 使用Gulp和Browserify创建多个绑定文件

'use strict';

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var rename = require('gulp-rename');
var browserify = require('browserify');
var es = require('event-stream'); gulp.taks('default', function(){
//定义多个入口文件
var entryFiles = [
'./app/main-a.js',
'./app/main-b.js'
]; //遍历映射这些入口文件
var tasks = entiryFiles.map(function(entry){
return browserify({entries: [entry]})
.bundle()
.pipe(source(entry))
.pipe(rename({
extname: '.bundle.js'
}))
.pipe(gulp.dext('./dist'));
}); //创建一个合并流
return es.merge.apply(null, tasks);
});

以上, 在定义入口文件的时候,这样写的好处是很具体,但如果有很多入口文件,是不是可以有一种更好的写法呢?

'use strict';

var gulp       = require('gulp'),
source = require('vinyl-source-stream'),
rename = require('gulp-rename'),
browserify = require('browserify'),
glob = require('glob'),
es = require('event-stream'); gulp.task('default', function(done) {
glob('./app/main-**.js', function(err, files) {
if(err) done(err); var tasks = files.map(function(entry) {
return browserify({ entries: [entry] })
.bundle()
.pipe(source(entry))
.pipe(rename({
extname: '.bundle.js'
}))
.pipe(gulp.dest('./dist'));
});
es.merge(tasks).on('end', done);
})
});

使用glob可以把符合条件的入口文件找出来。可见,通过gulp.task返回的还是一个流。

使用Gulp和Browserify创建多个绑定文件的更多相关文章

  1. 使用Gulp和Browserify来搭建React应用程序

    对React有一定了解之后,我们知道,需要把JSX文件转换成JS文件,组件需要导入导出.本篇就体验使用Gulp把JSX文件转换成JS文件,使用Browserify来把组件捆绑到一个文件并理顺组件之间的 ...

  2. 前端构建工具的用法—grunt、gulp、browserify、webpack

    随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于N ...

  3. 基于jquery的表格动态创建,自动绑定,自动获取值

    最近刚加入GUT项目,学习了很多其他同事写的代码,感觉受益匪浅. 在GUT项目中,经常会碰到这样一个问题:动态生成表格,包括从数据库中读取数据,并绑定在表格中,以及从在页面上通过jQuery新增删除表 ...

  4. React gulp、Browserify、Webpack实例

    一.gulp var gulp = require('gulp'); var react = require('gulp-react'); gulp.task('jsx', function() { ...

  5. gulp配置browserify多入口

    需要 var es = require('event-stream'); gulp.task('browserify', function(){ var files = [ { fpath: './j ...

  6. 给js动态创建的对象绑定事件

    1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent(el, type, fn) {  if(el.ad ...

  7. gulp压缩html,css,js文件流程、监听任务、使用gulp创建服务器、同时运行多个任务、反向代理

    一.初始化 首先先做一个项目初始化,用来记录你项目中用到的工具 再你项目文件下打开一个控制台,输入命令 yarn init -y 进行初始化 输入命令yarn add gulp -g  --- 全局安 ...

  8. 七牛云创建存储空间并绑定自定义域名-https协议

    七牛云创建存储空间并绑定自定义域名-https协议 一.准备 0.绑定自定义域名的前提:你起码拥有过一个备案过的域名[一级域名] 1.在七牛云创建一个存储空间 2.存储空间绑定自定义域名(cdn加速) ...

  9. 无法在“EntityFramework”已存在的情况下创建影像复制该文件的解决方案

    问题产生的原因:你项目正在生成中你就打开浏览器预览了,导致这个问题解决方案:右击重新生成项目,等生成后再打开 “/”应用程序中的服务器错误. 无法在“EntityFramework”已存在的情况下创建 ...

随机推荐

  1. lvm snapshot(lvm 快照)

    lvm快照有多种实现方法,其中一种是COW(Copy-On-Write),不用停止服务或将逻辑卷设为只读就可以进行备份,当一个 snapshot创建的时候只是拷贝原始卷里的元数据,而不是物理上的数据, ...

  2. Gossip protocol(zz)

    Gossip protocol 这是一系列用于P2P的通信协议.简单来说,就是模拟人类社会中流言传播的方式.每个节点随机地把消息发给它的邻居,接到消息的节点,如果之前没收到这个消息,则会继续随机地转发 ...

  3. EasyUI 添加tab页(iframe方式)(转)

    function addTab(title, href,icon){ var tt = $('#tabs'); if (tt.tabs('exists', title)){//如果tab已经存在,则选 ...

  4. load-on-startup在web.xml中的含义

    在servlet的配置当中,<load-on-startup>1</load-on-startup>的含义是: 标记容器是否在启动的时候就加载这个servlet. 当值为0或者 ...

  5. Java起源、发展历程、环境变量、第一个Java程序等【1】

    若有不正之处,请多多谅解并欢迎批评指正,不甚感激. 请尊重作者劳动成果,转载请标明原文链接: 本文原创作者:pipi-changing 本文原创出处:http://www.cnblogs.com/pi ...

  6. tcp/ip的一些概念

    MTU,即Maximum Transmission Unit(最大传输单元),此值设定TCP/IP协议传输数据报时的最大传输单元.以太网的MTU值是1500 bytes. 首先计算最大的IP包中IP净 ...

  7. SQL优化笔记—CPU优化

    补充:常规服务器动态管理对象包括,下面有些资料可能会应用到 dm_db_*:数据库和数据库对象dm_exec_*:执行用户代码和关联的连接dm_os_*:内存.锁定和时间安排dm_tran_*:事务和 ...

  8. String reorder

    本问题出自:微软2014实习生及秋令营技术类职位在线测试 (Microsoft Online Test for Core Technical Positions) Description For th ...

  9. Linux分区,并且把新的分区挂载到指定的文件夹

    本教程为在已使用的Linux系统中新加入一个硬盘. 1.fdisk –l 查看:看到新加入硬盘hdd 2.输入:fdisk /dev/hdd 3.键入m查看有哪些命令: 4.键入p查看一下硬盘hdd的 ...

  10. Magicodes.WeiChat——媒体资源选择组件之media-choice(开源)

    media-choice为媒体资源选择组件,基于KnockoutJs.支持图片.语音.视频.图文的选择以及预览,支持默认选择类型,支持是否禁用选择类型的更改. 使用示例: <script id= ...