Gulp 3.9 + Browserify 11.2 到 Gulp 4.0 + Browserify 17.0

编程问答 2022-05-15

问题描述

我正在尝试将使用 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","glslify": "^7.1.1","gsap": "^3.6.1","gulp": "^4.0.2","gulp-babel": "^8.0.0","gulp-imagemin": "^7.1.0","gulp-map": "^0.0.2","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。这些是一系列教程，解释了如何实施 Gulp from Scratch。如果您不想观看视频而只想查看代码，请转到 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"
    ]
  },...

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

并且要运行 gulp 任务，只需执行以下操作：

gulp js

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

babeljsbrowserifybrowserifybrowserifyglslifygulpgulpjavascript