吞咽3.9 + Browserify 11.2至Gulp 4.0 + Browserify 17.0

Question

我正在尝试更新一个使用Gulp 3.9.1 + browserify 11.2.0到Gulp 4.0.2 + browserify 17.0.0的旧存储库。但这些并不是我在这个项目中使用的唯一软件包。

这是旧 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'));
}

新 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);
}

我不确定这是否是正确的迁移代码的方式。我从不同的浏览器化模块中得到了几个问题，例如：

• 巴贝尔:这个问题似乎是通过从婴儿化转变为吞咽来解决的。
• glslify:它似乎被废弃了，但我不知道哪一个是替换库

而且，由于我不知道迁移应该如何进行，很抱歉重复了，在运行build命令(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)

很抱歉这么长时间的解释，希望有人能帮我。

Answer 1

经过大量的研究，我发现这个博客有答案，或者说它几乎有指向答案的链接。

其中一个链接带我到了关于Gulp + Browserify + Babelify的最详细的教程，它可能存在。在这里链接。下面是一篇关于如何从零开始实现的教程，。如果你不想看视频，只想让代码转到这里。

这是我最后的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"
    ]
  },
...

请注意，也需要一个babel部分和一个browserify部分。

要运行，只需执行以下操作：

gulp js

最后一件事是教程示例(谢谢Alessandro Castellani)和我的最终解决方案，它们基本相同，还包含处理css文件、字体、图像和html文件的其他任务。所有这些文件都被移动到一个“生产”文件夹中，在我的例子中称为dist。