Gulp 4 + browserify使用模块并导出设置

我正在尝试在当前的gulp 4入门包中安装browserify和Vinyl。我有function js()..的地方是所有js设置的逻辑。整个想法是能够从本地nodejs包装器导出JSON文件(使用此包装器从C ++导出代码,以便能够在nodejs中使用它)。我将本地db文件与所有c ++ .dll文件和一个文件test.js放在同一文件夹中,其中与loca db文件的连接(查询和逻辑在其中)。因此,当我运行“ node test.js”时,我取回了json文件(在终端中),我想将其导出到另一个文件中,在此我需要此响应(node test.js)中的此信息并能够使用它。 但是我对设置有任何想法,我该如何粘合这些东西?

我检查了很多教程,但是它们使用了gulp 3或已经过时了。我发现的最新内容是此链接https://github.com/yeoman/generator-webapp/blob/master/docs/recipes/browserify.md 但是我很难实施它。

例如。 1.我有project / src / js / main.js文件夹,其中该页面的主要逻辑是。 2.我的数据库和查询存储在另一个文件夹project / dbtest中。

我希望能够从project / dbtest导出数据,其中我的可执行文件test.js(通过节点test.js在终端中执行)文件要导出到project / src / js / main.js并使用此数据。 / p>

const { src,dest,watch,series,parallel } = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const babel = require('gulp-babel');
const browserSync = require('browser-sync').create();
const cleancss = require('gulp-clean-css');
const del = require('del');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const browserify = require('browserify');
const babelify = require('babelify');
const buffer = require('vinyl-buffer');
const source = require('vinyl-source-stream');

function html(done) {
  src('src/*.html')
    .pipe(dest('dist'))
  done();
}


function css(done) {
  src('src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass())
    .on("error",sass.logError)
    .pipe(autoprefixer('last 4 versions'))
    .pipe(cleancss())
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/css'))
  done();
}
('default',['copy:html','copy:css','copy:assets','webpack']);



function js(done) {
  const b = browserify({
    entries: 'src/js/**/*.js',transform: babelify,debug: true
  })


  return b.bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
     .pipe(dest('.tmp/scripts'))
  // src('src/js/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(babel({
      presets: ['@babel/preset-env']
      // presets: ['es2015']
    }))
    .pipe(uglify({
      mangle: {
        toplevel: true
      }
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/js'))
  done();
}


function img(done) {
  src('src/img/**/*')
    .pipe(dest('dist/img'))
  done();
}

function watchFiles() {
  watch('src/*.html',series(html,reload));
  watch('src/scss/**/*.scss',series(css,reload));
  watch('src/js/*.js',series(js,reload));
  watch('src/img/**/*',series(img,reload));
}

function sync() {
  browserSync.init({
    server: 'dist',open: false
  });
}

function reload(done) {
  browserSync.reload();
  done();
}

function clean() {
  return del('dist');
}




exports.default = parallel(html,css,js,img,watchFiles,sync);
exports.build = series(clean,parallel(html,img));
exports.clean = clean;

angelwrq123 回答:Gulp 4 + browserify使用模块并导出设置

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3160123.html

大家都在问