Javascript 吞咽3.9+；Browserify 11.2到Gulp 4.0+；浏览17.0

我正在尝试将使用

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

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

代码：

"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'));
}

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

---

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

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

代码：

"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'));
}

"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模块中得到了几个问题，例如：

• 巴别塔：从巴别塔利夫变为狼吞虎咽的巴别塔似乎可以解决这个问题
• glslify：它似乎被弃用了，但我不知道哪个是替换库

另外，很抱歉重复，因为我不知道迁移应该如何进行，在运行build命令（

gulpbuild

）后，我遇到了这个错误：

---

对不起，解释得太长了，希望有人能帮我。

经过大量研究，我找到了答案，或者几乎找到了答案的链接

其中一个链接将我带到了关于

Gulp+Browserify+Babelify

它可能存在的最详细的教程。这是一系列教程，解释如何从头开始实施吞咽。如果你不想看视频，只想让代码运行

这是我最后的

gulpfile.js

这就是我问题的答案：

我以前在gulpfile.js中的构建函数（现在称为js）

同一文件gulpfile.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();
}

task("js", js);

My 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部分

要执行“吞咽”任务，只需执行以下操作：

gulpjs

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

dist