Geek Answers Handbook

Gulp: browser, then concat files

I need to draw a file and then to link the package to another file. I tried the gulp code below, but it does not work properly.
When I make changes to mymodule.js and run gulp, these changes appear in the package file, but not in the merged file, unless I run gulp a second time.
It looks like the concat step does not wait for the bundle step to complete and carry over the previously numbered packet. Since I'm new to gulp, I'm sure something is wrong with my gulp logic ...

My gulpfile file:

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

thank

+4
source share
3 answers

, concat-

. Gulp concurrency, , -, .

Gulp, :

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

:

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

var paths = [
 'bower_components/porthole/src/porthole.min.js',
 'src/mymodule-bundle.js'
];

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

gulp.task('default2', function() {
 return gulp.src(paths)
  .pipe(concat('app.js'))
  .pipe(gulp.dest('dist'));
});

gulp.task('final', ['default', 'default2']);

final , .

+1

In fact, you do not need to split your task as indicated in other answers:

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

gulp.task('default', function () {
    var b = browserify('src/mymodule.js')
            .bundle()
            .pipe(source('mymodule-bundle.js'))
            .pipe(buffer())
            // remove this line if you don't need 'mymodule-bundle.js' to be saved at all 
            .pipe(gulp.dest('src'));

    return merge(b, gulp.src('bower_components/porthole/src/porthole.min.js'))
           .pipe(concat('app.js'))
           .pipe(gulp.dest('dist'));
});
+1
source

More articles:


All Articles