Gulp 3.9 + Browserify 11.2 至 Gulp 4.0 + Browserify 17.0
Gulp 3.9 + Browserify 11.2 to Gulp 4.0 + Browserify 17.0
我正在尝试将使用 Gulp 3.9.1 + browserify 11.2.0 的旧存储库更新为 Gulp 4.0.2 + browserify 17.0.0。但这些不是我在这个项目中使用的唯一包。
这是 old package.json 和我正在尝试移植到新版本的旧代码：
package.json:
"devDependencies": {
"babel": "^5.8.29",
"babel-cli": "^6.22.2",
"babel-preset-es2015": "^6.22.0",
"babelify": "^6.4.0",
"browserify": "^11.2.0",
"core-js": "^1.2.3",
"extend": "^3.0.0",
"fs": "0.0.2",
"glslify": "^2.3.1",
"gsap": "^1.18.0",
"gulp": "^3.9.1",
"gulp-babel": "^5.2.1",
"gulp-connect": "^2.2.0",
"gulp-imagemin": "^3.1.1",
"gulp-newer": "^1.3.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^1.5.3",
"uglify-js": "^2.5.0",
"vinyl-source-stream": "^1.1.0"
}
代码：
const gulp = require('gulp')
const source = require('vinyl-source-stream')
const browserify = require('browserify')
const uglify = require('gulp-uglify')
const streamify = require('gulp-streamify')
const babelify = require("babelify");
gulp.task('build', function(){
build();
});
function build() {
browserify('src/index.js', {debug: true})
.transform(babelify)
.transform('glslify')
.bundle()
.on('error', function (err) {
console.log('Error : ' + err.message);
})
.pipe(source('index.min.js'))
.pipe(streamify(uglify()))
.pipe(gulp.dest('public/js'));
}
new package.json 和我现在拥有的代码，我不确定它是否是正确实施：
package.json:
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.18.0",
"babel-preset-env": "^1.7.0",
"browserify": "^17.0.0",
"core-js": "^1.2.3",
"extend": "^3.0.0",
"fs": "0.0.2",
"glslify": "^7.1.1",
"gsap": "^3.6.1",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-connect": "^2.2.0",
"gulp-imagemin": "^7.1.0",
"gulp-map": "^0.0.2",
"gulp-newer": "^1.3.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^1.5.3",
"uglify-js": "^2.5.0",
"vinyl": "^0.5.3",
"vinyl-source-stream": "^1.1.0"
}
代码：
const gulp = require('gulp');
const browserify = require('browserify');
const babel = require('gulp-babel');
const glslify = require('glslify')
const source = require('vinyl-source-stream');
const streamify = require('gulp-streamify');
const uglify = require('gulp-uglify');
const map = require('gulp-map');
const Vinyl = require('vinyl');
gulp.task(build)
function build() {
gulp.src(['./src/**/*.js', './src/**/*.jsx'])
.pipe(browserify()
.transform(babel({options: 'env'}))
//.transform(glslify('./src/shaders/simple.vert')) // Not working
//.transform(glslify('./src/shaders/water.frag')) // Not working
.bundle().on('error', onError))
.pipe(source('index.min.js'))
.pipe(streamify(uglify()))
.pipe(map(function(file) {
// Explicitly convert to Vinyl object otherwise `gulp.dest()` will fail
return new Vinyl(file); // But it stills failing
}))
.pipe(gulp.dest('./public/js/'));
}
function onError(err) {
console.log('Error : ' + err.message);
}
我不确定这是否是迁移该代码的正确方法。我从不同的 browserify 模块中遇到了几个问题，例如：
- babel：它似乎可以通过从 babelify 更改为 gulp-bable
来修复
- glslify：它似乎已被弃用，但我不知道哪个是替换库
此外，很抱歉重复了，因为我不知道应该如何迁移，我在 运行 构建命令 (gulp build) 后收到此错误：
[14:08:34] Using gulpfile ~/Documents/workspace/project/gulpfile.js
[14:08:34] Starting 'build'...
[14:08:34] 'build' errored after 109 ms
[14:08:34] TypeError: dest.write is not a function
at DestroyableTransform.ondata (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_readable.js:619:20)
at DestroyableTransform.emit (node:events:379:20)
at DestroyableTransform.EventEmitter.emit (node:domain:532:15)
at addChunk (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_readable.js:291:12)
at readableAddChunk (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_readable.js:278:11)
at DestroyableTransform.Readable.push (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_readable.js:245:10)
at DestroyableTransform.Transform.push (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_transform.js:148:32)
at Pumpify.onReadable (/Users/user/Documents/workspace/project/node_modules/to-through/index.js:25:14)
at Pumpify.emit (node:events:379:20)
at Pumpify.EventEmitter.emit (node:domain:532:15)
不好意思解释的太长了，希望有人能帮助我。
经过大量研究，我发现 this blog 有答案，或者几乎有答案的链接。
其中一个链接将我带到了关于 Gulp + Browserify + Babelify 它可能存在的最详细的教程。 Here the link. These are a serie of tutorial explaining how to implement Gulp from Scratch. If you don't want to see the videos and just want the code go here.
This 是我最后的 gulpfile.js.
这就是我的问题的答案：
我以前在 gulpfile.js 中构建函数（现在称为 js）
function js(done) {
jsFiles.map( function( entry ) {
return browserify({
entries: [constants.jsSRC + entry] // constants.jsSRC == "./src/js/"
})
.transform( babelify, { presets: [ '@babel/preset-env' ] } )
.transform('glslify')
.bundle()
.pipe(source( entry ) )
.pipe(rename( {
extname: '.min.js'
}))
.pipe(buffer() )
.pipe(gulpif( options.has( 'production' ), stripDebug() ) )
.pipe(sourcemaps.init({ loadMaps: true }) )
.pipe(uglify())
.pipe(sourcemaps.write( '.' ))
.pipe(dest(constants.jsURL)) // constants.jsURL == "./dist/js/"
.pipe(browserSync.stream());
});
done();
}
同一文件内的任务gulpfile.js
task("js", js);
我的 package.json 文件。
...
"devDependencies": {
"@babel/core": "^7.13.14",
"@babel/preset-env": "^7.13.12",
"babelify": "^10.0.0",
"browser-sync": "^2.26.14",
"browserify": "^17.0.0",
"browserify-shim": "^3.8.14",
"core-js": "^1.2.3",
"glslify": "^7.1.1",
"gsap": "^3.6.1",
"gulp": "^4.0.2",
"gulp-connect": "^2.2.0",
"gulp-if": "^3.0.0",
"gulp-notify": "^3.2.0",
"gulp-options": "^1.1.1",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-strip-debug": "^4.0.0",
"gulp-uglify": "^1.5.3",
"gulp-uglifycss": "^1.1.0",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
},
"babel": {
"presets": [
"@babel/preset-env"
]
},
"browserify": {
"transform": [
"browserify-shim"
]
},
...
Note that there is a babel section and a browserify section that are also needed.
运行 gulp 任务 只需做：
gulp js
最后一件事，教程的示例（谢谢 Alessandro Castellani）和我的最终解决方案，大部分相同，还包含处理 css 文件、字体、图像的其他任务和 html 文件。所有这些文件都被移动到“生产”文件夹，在我的例子中称为 dist.
我正在尝试将使用 Gulp 3.9.1 + browserify 11.2.0 的旧存储库更新为 Gulp 4.0.2 + browserify 17.0.0。但这些不是我在这个项目中使用的唯一包。
这是 old package.json 和我正在尝试移植到新版本的旧代码：
package.json:
"devDependencies": {
"babel": "^5.8.29",
"babel-cli": "^6.22.2",
"babel-preset-es2015": "^6.22.0",
"babelify": "^6.4.0",
"browserify": "^11.2.0",
"core-js": "^1.2.3",
"extend": "^3.0.0",
"fs": "0.0.2",
"glslify": "^2.3.1",
"gsap": "^1.18.0",
"gulp": "^3.9.1",
"gulp-babel": "^5.2.1",
"gulp-connect": "^2.2.0",
"gulp-imagemin": "^3.1.1",
"gulp-newer": "^1.3.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^1.5.3",
"uglify-js": "^2.5.0",
"vinyl-source-stream": "^1.1.0"
}
代码：
const gulp = require('gulp')
const source = require('vinyl-source-stream')
const browserify = require('browserify')
const uglify = require('gulp-uglify')
const streamify = require('gulp-streamify')
const babelify = require("babelify");
gulp.task('build', function(){
build();
});
function build() {
browserify('src/index.js', {debug: true})
.transform(babelify)
.transform('glslify')
.bundle()
.on('error', function (err) {
console.log('Error : ' + err.message);
})
.pipe(source('index.min.js'))
.pipe(streamify(uglify()))
.pipe(gulp.dest('public/js'));
}
new package.json 和我现在拥有的代码，我不确定它是否是正确实施：
package.json:
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.18.0",
"babel-preset-env": "^1.7.0",
"browserify": "^17.0.0",
"core-js": "^1.2.3",
"extend": "^3.0.0",
"fs": "0.0.2",
"glslify": "^7.1.1",
"gsap": "^3.6.1",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-connect": "^2.2.0",
"gulp-imagemin": "^7.1.0",
"gulp-map": "^0.0.2",
"gulp-newer": "^1.3.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^1.5.3",
"uglify-js": "^2.5.0",
"vinyl": "^0.5.3",
"vinyl-source-stream": "^1.1.0"
}
代码：
const gulp = require('gulp');
const browserify = require('browserify');
const babel = require('gulp-babel');
const glslify = require('glslify')
const source = require('vinyl-source-stream');
const streamify = require('gulp-streamify');
const uglify = require('gulp-uglify');
const map = require('gulp-map');
const Vinyl = require('vinyl');
gulp.task(build)
function build() {
gulp.src(['./src/**/*.js', './src/**/*.jsx'])
.pipe(browserify()
.transform(babel({options: 'env'}))
//.transform(glslify('./src/shaders/simple.vert')) // Not working
//.transform(glslify('./src/shaders/water.frag')) // Not working
.bundle().on('error', onError))
.pipe(source('index.min.js'))
.pipe(streamify(uglify()))
.pipe(map(function(file) {
// Explicitly convert to Vinyl object otherwise `gulp.dest()` will fail
return new Vinyl(file); // But it stills failing
}))
.pipe(gulp.dest('./public/js/'));
}
function onError(err) {
console.log('Error : ' + err.message);
}
我不确定这是否是迁移该代码的正确方法。我从不同的 browserify 模块中遇到了几个问题，例如：
- babel：它似乎可以通过从 babelify 更改为 gulp-bable 来修复
- glslify：它似乎已被弃用，但我不知道哪个是替换库
此外，很抱歉重复了，因为我不知道应该如何迁移，我在 运行 构建命令 (gulp build) 后收到此错误：
[14:08:34] Using gulpfile ~/Documents/workspace/project/gulpfile.js
[14:08:34] Starting 'build'...
[14:08:34] 'build' errored after 109 ms
[14:08:34] TypeError: dest.write is not a function
at DestroyableTransform.ondata (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_readable.js:619:20)
at DestroyableTransform.emit (node:events:379:20)
at DestroyableTransform.EventEmitter.emit (node:domain:532:15)
at addChunk (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_readable.js:291:12)
at readableAddChunk (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_readable.js:278:11)
at DestroyableTransform.Readable.push (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_readable.js:245:10)
at DestroyableTransform.Transform.push (/Users/user/Documents/workspace/project/node_modules/readable-stream/lib/_stream_transform.js:148:32)
at Pumpify.onReadable (/Users/user/Documents/workspace/project/node_modules/to-through/index.js:25:14)
at Pumpify.emit (node:events:379:20)
at Pumpify.EventEmitter.emit (node:domain:532:15)
不好意思解释的太长了，希望有人能帮助我。
经过大量研究，我发现 this blog 有答案，或者几乎有答案的链接。
其中一个链接将我带到了关于 Gulp + Browserify + Babelify 它可能存在的最详细的教程。 Here the link. These are a serie of tutorial explaining how to implement Gulp from Scratch. If you don't want to see the videos and just want the code go here.
This 是我最后的 gulpfile.js.
这就是我的问题的答案：
我以前在 gulpfile.js 中构建函数（现在称为 js）
function js(done) {
jsFiles.map( function( entry ) {
return browserify({
entries: [constants.jsSRC + entry] // constants.jsSRC == "./src/js/"
})
.transform( babelify, { presets: [ '@babel/preset-env' ] } )
.transform('glslify')
.bundle()
.pipe(source( entry ) )
.pipe(rename( {
extname: '.min.js'
}))
.pipe(buffer() )
.pipe(gulpif( options.has( 'production' ), stripDebug() ) )
.pipe(sourcemaps.init({ loadMaps: true }) )
.pipe(uglify())
.pipe(sourcemaps.write( '.' ))
.pipe(dest(constants.jsURL)) // constants.jsURL == "./dist/js/"
.pipe(browserSync.stream());
});
done();
}
同一文件内的任务gulpfile.js
task("js", js);
我的 package.json 文件。
...
"devDependencies": {
"@babel/core": "^7.13.14",
"@babel/preset-env": "^7.13.12",
"babelify": "^10.0.0",
"browser-sync": "^2.26.14",
"browserify": "^17.0.0",
"browserify-shim": "^3.8.14",
"core-js": "^1.2.3",
"glslify": "^7.1.1",
"gsap": "^3.6.1",
"gulp": "^4.0.2",
"gulp-connect": "^2.2.0",
"gulp-if": "^3.0.0",
"gulp-notify": "^3.2.0",
"gulp-options": "^1.1.1",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-strip-debug": "^4.0.0",
"gulp-uglify": "^1.5.3",
"gulp-uglifycss": "^1.1.0",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
},
"babel": {
"presets": [
"@babel/preset-env"
]
},
"browserify": {
"transform": [
"browserify-shim"
]
},
...
Note that there is a babel section and a browserify section that are also needed.
运行 gulp 任务 只需做：
gulp js
最后一件事，教程的示例（谢谢 Alessandro Castellani）和我的最终解决方案，大部分相同，还包含处理 css 文件、字体、图像的其他任务和 html 文件。所有这些文件都被移动到“生产”文件夹，在我的例子中称为 dist.