gulp：browserify然后concat文件 [英] gulp : browserify then concat files

问题描述

我需要浏览一个文件，然后用另一个文件连接这个包。我尝试了下面的gulp代码，但它不能正常工作。

当我在mymodule.js中进行更改并运行gulp时，那些更改显示在捆绑文件中，但不在连接文件中，除非我运行gulp a第二次。

这就好像concat步骤并未等待捆绑步骤完成并采用先前的浏览过的捆绑包。
因为我是一个初学者，我敢肯定，我的大嘴巴逻辑有些问题......

我的大文件是：

  var gulp = require（'gulp'）; 
 var browserify = require（'browserify'）; 
 var source = require（'vinyl-source-stream'）; 
 var concat = require（'gulp-concat'）; 
 $ b gulp.task（'default'，function（）{
 var b = browserify（'src / mymodule.js'）
 .bundle（）
。 pipe（source（'mymodule-bundle.js'））
.pipe（gulp.dest（'src'））; 
 
 gulp.src（[
'bower_components / portat / src / porthole.min.js'，
'src / mymodule-bundle.js'
]）
 .pipe（concat（'app.js'））
 .pipe（gulp.dest（'dist'））; 
}）; 
  

谢谢

解决方案 div>

这就好像concat步骤并未等待捆绑步骤完成并取出先前的浏览过的捆绑包

这正是发生的情况。 Gulp以异步方式工作，并且具有最大的并发性，所以除非您告诉它等待所有事情会立即开始运行。

您可以将任务分成两个任务并提示gulp那一个取决于其他：

  gulp.task（'bundle'，function（）{
 return browserify （'src / mymodule.js'）
 .bundle（）
 .pipe（source（'mymodule-bundle.js'））
 .pipe（gulp.dest（'src'） ）; 
}）; 
 $ b $ gulp.task（'default'，['bundle']，function（）{
 return gulp.src（[
'bower_components / porthole / src / porthole.min .js'，
'src / mymodule-bundle.js'
]）
 .pipe（concat（'app.js'））
 .pipe（gulp.dest 'dist'））; 
}）; 
  

I need to browserify a file, and then to concat the bundle with another file. I tried the gulp code below but it's not working properly.
When I make changes in mymodule.js and run gulp, those changes appear in the bundle file but not in the concatenated file, unless I run gulp a second time.
It's like if the concat step is not waiting for the bundle step to finish and take the previously browserified bundle. As I'm a beginner with gulp, I'm sure there is something wrong with my gulp logic...

My gulpfile is :

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');

gulp.task('default', function() {
  var b = browserify('src/mymodule.js')
  .bundle()
  .pipe(source('mymodule-bundle.js'))
  .pipe(gulp.dest('src'));

  gulp.src([
        'bower_components/porthole/src/porthole.min.js',
        'src/mymodule-bundle.js'
    ])
    .pipe(concat('app.js'))
    .pipe(gulp.dest('dist'));
});

Thanks

解决方案

It's like if the concat step is not waiting for the bundle step to finish and take the previously browserified bundle

That's exactly what happens. Gulp works asynchronously and with maximum concurrency so unless you tell it to wait for something everything will just start running immediately.

You can split up your task into two tasks and hint to Gulp that one depends on the other:

gulp.task('bundle', function() {
  return browserify('src/mymodule.js')
   .bundle()
   .pipe(source('mymodule-bundle.js'))
   .pipe(gulp.dest('src'));
});

gulp.task('default', ['bundle'], function() {
  return gulp.src([
    'bower_components/porthole/src/porthole.min.js',
    'src/mymodule-bundle.js'
  ])
  .pipe(concat('app.js'))
  .pipe(gulp.dest('dist'));
});

这篇关于gulp：browserify然后concat文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！