Chain Gulp glob to browserify transform(将 Gulp glob 链接到浏览器化转换)
问题描述
我有一个项目,其中包含几个相对不相交的页面,每个页面都包含自己的入口点脚本.这些脚本需要
其他一些使用commonjs语法的脚本,需要经过6to5转换并被browserify打包.
I have a project with a few relatively disjoint pages, each including their own entry point script. These scripts require
a number of others using commonjs syntax, and need to be transformed by 6to5 and bundled by browserify.
我想设置一个 gulp 任务来捕获所有匹配模式的文件并将它们传递给捆绑程序,但我不确定如何将文件从 gulp.src
传递到浏览(文件名)
.
I would like to set up a gulp task that captures all the files matching a pattern and passes them on to the bundler, but I'm not sure how to pass files from gulp.src
to browserify(filename)
.
我的 gulpfile 看起来像:
My gulpfile looks like:
var gulp = require("gulp");
var browserify = require("browserify");
var to5browserify = require("6to5-browserify");
var source = require("vinyl-source-stream");
var BUNDLES = [
"build.js",
"export.js",
"main.js"
];
gulp.task("bundle", function () {
/* Old version, using glob:
return gulp.src("src/** /*.js")
.pipe(sixto5())
.pipe(gulp.dest("dist"));
*/
// New version, using array:
return BUNDLES.map(function (bundle) {
return browserify("./src/" + bundle, {debug: true})
.transform(to5browserify)
.bundle()
.pipe(source(bundle))
.pipe(gulp.dest("./dist"));
});
});
gulp.task("scripts", ["bundle"]);
gulp.task("html", function () {
return gulp.src("src/**/*.html")
.pipe(gulp.dest("dist"));
});
gulp.task("styles", function () {
return gulp.src("src/**/*.css")
.pipe(gulp.dest("dist"));
});
gulp.task("default", ["scripts", "html", "styles"]);
这似乎可行,但不可维护:我将很快添加更多脚本,并且不想每次都将它们添加到数组中.
This seems to work, but isn't maintainable: I'll be adding more scripts relatively soon, and don't want to add them to the array every time.
我尝试在 browserify 调用中使用 gulp.src(glob).pipe
并在调用后使用管道 (此处显示)和 gulp.src(glob).map
(方法不存在).
I've tried using gulp.src(glob).pipe
within the browserify call and piping after calling (shown here), and gulp.src(glob).map
(method doesn't exist).
如何将 gulp.src
与 browserify 等基于名称的转换器链接起来?
How can you chain gulp.src
with a name-based transformer like browserify?
推荐答案
使用through2制作一次性的自定义插件流,可以完成所有繁琐的工作.
Use through2 to make a one-off custom plugin stream that does all of the dirty work.
不幸的是 vinyl-transform
和 vinyl-source-stream
以及随之而来的解决方案缺陷,所以我们必须去定制一些东西.
Unfortanately vinyl-transform
and vinyl-source-stream
and the solutions that go along with those have flaws so we have to go for something custom.
var gulp = require('gulp');
var through = require('through2');
var browserify = require('browserify');
gulp.task('bundle', function() {
var browserified = function() {
return through.obj(function(chunk, enc, callback) {
if(chunk.isBuffer()) {
var b = browserify(chunk.path);
// Any custom browserify stuff should go here
//.transform(to5browserify);
chunk.contents = b.bundle();
this.push(chunk);
}
callback();
});
};
return gulp.src(['./src/**/*.js'])
.pipe(browserified())
.pipe(gulp.dest('dest'));
});
这篇关于将 Gulp glob 链接到浏览器化转换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:将 Gulp glob 链接到浏览器化转换
基础教程推荐
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 直接将值设置为滑块 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01