gulp - 捆绑 javascript 文件以使用 Gulp 和 Nodeman 观看

Question

我已经按照我想要的方式启动和部署任务，但是我试图弄清楚当我在 app.js 中进行更改时如何更新 public/js/bundle.js 以便可以观察它。

这是我到目前为止得到的：

var gulp = require('gulp');
var streamify = require('gulp-streamify');
var uglify = require('gulp-uglify');
var transform = require('vinyl-source-stream');
var browserify = require('browserify');
var rename = require('gulp-rename');
var nodemon = require('gulp-nodemon');

var ios = browserify({
   entries:['app.js']
 });

const bundle = () => {

  process.env.NODE_ENV = 'production';

    ios.require('./app-ios.js', {expose:'appalias'})
      .bundle()
      .pipe(transform('bundle-ios.js'))
      .pipe(gulp.dest('./public/js'))
      .pipe(streamify(uglify()))
      .pipe(rename('bundle-ios.min.js'))
      .pipe(gulp.dest('./public/js'));

    return ios;
}

const start = () => {
  return nodemon({
    script: 'server.js',
    watch: ['server.js', 'public/js/*', 'public/index.html', 'public/css/*'],
    ext: 'js html css',
    env: { 'NODE_ENV': 'development' },
  });
}

// Start local server and watch bundles.
gulp.task('start', start);

// Build minified versions for prod.
gulp.task('deploy', bundle);

Answer 1

修复方法是查看所有单独的 javascript 组件和模型文件，并将编译任务添加到启动任务。

// Bundle and minify for development, use development version of libraries.
const compile = () => {

  process.env.NODE_ENV = 'development';

  const bundleAndroidDev = ios.require('./app-ios.js', {expose:'appalias'})
    .bundle()
    .pipe(transform('bundle-ios.js'))
    .pipe(gulp.dest('./public/js'));

  return bundleIosDev;
}

// Start local server and watch for changes in compiled bundles.
const start = () => {
  return nodemon({
    script: 'server.js',
    watch: ['server.js', 'apps/appName/components/*', 'apps/appName/models/*', 'public/index.html', 'public/css/*'],
    ext: 'js html css',
    tasks: ['compile'],
    env: { 'NODE_ENV': 'development' }
  });
}

// Compile bundle's on save.
gulp.task('compile', compile);