verystrongjoe
verystrongjoe

Reputation: 3911

How to make the task be done synchronously in gulp?

It's my gulp script. I am using without any problem. But I changed the configuration. and I got error when I run this. 'merge-copy-components' task doesn't work. For making it work, I have to execute the previous task. But I think the task doesn't execute and finish but works simultaneously with later one.

How can I solve this? I want to two tasks synchronously.

  var gulp = require('gulp'),
  //usemin = require('gulp-usemin'),
  wrap = require('gulp-wrap'),
  connect = require('gulp-connect'),
  watch = require('gulp-watch'),
  //minifyCss = require('gulp-minify-css'),
  minifyJs = require('gulp-uglify'),
  concat = require('gulp-concat'),
  less = require('gulp-less'),
  rename = require('gulp-rename'),
  html2js = require('gulp-html2js');
  //minifyHTML = require('gulp-minify-html');

  var clean = require('gulp-clean');


  var paths = {
  index:            '../admin/index.html',

  ///theme_scripts:         '../admin/assets/theme-js/**/*.*',
  scripts:          '../admin/assets/js/**/*.*',
  styles:           '../admin/assets/css/**/*.*',
  images:           '../admin/assets/img/**/*.*',
  less:                 '../admin/assets/less/*.less',

  html_templates:   '../admin/app/**/*.tpl.html',
  app_data:             '../admin/app/**/*.json',
  app_js:           '../admin/app/**/*.js',

  //        app_js_ordered: [  '/admin/app/app.module.js', '/admin/app/**/!(app.module).js'], // all files that end in .js EXCEPT foobar*.js

  bower_fonts:  'src/components/**/*.{ttf,eot,woff,eof,svg}'
  };

  gulp.task('clean', function () {
  return gulp.src('../src/main/webapp')
   .pipe(clean({force: true}))
  .pipe(clean());
  });


  /**
   * Handle bower components from index
   */
  gulp.task('usemin', function() {
  return gulp.src(paths.index)
  //    .pipe(usemin({
  //    js: [minifyJs(), 'concat'],
  //    css: [minifyCss({keepSpecialComments: 0}), 'concat'],
  //    }))
  .pipe(gulp.dest('../src/main/webapp/'));
  });


  /**
   * Copy assets
   */
  gulp.task('build-assets', ['copy-bower_fonts']);

  gulp.task('copy-bower_fonts', function() {
  return gulp.src(paths.bower_fonts)
  .pipe(rename({
  dirname: '/fonts'
  }))
  .pipe(gulp.dest('../src/main/webapp'));
  });

  /**
   * Handle custom files
   */
  gulp.task('build-custom', ['html-template', 'merge-copy-components' , 'custom-images', 'app-js','move-json-data','custom-js', /* 'theme-js',*/ 'lib-less' ,'custom-less','lib-css']);


  gulp.task('merge-copy-components', function() {

  // when it deploys, we have to filter must-necessary files
  gulp.src('src/components/**/*.*') 
  .pipe(gulp.dest('../admin/assets/components'))

  //copy-merge-components
  return gulp.src('../admin/assets/components/**/*.*') 
  .pipe(gulp.dest('../src/main/webapp/components'));
  });


  gulp.task('custom-images', function() {
  return gulp.src(paths.images)
  .pipe(gulp.dest('../src/main/webapp/img'));
  });

  gulp.task('move-json-data', function() {
  return gulp.src(paths.app_data)
  .pipe(gulp.dest('../src/main/webapp/json'));
  });



  gulp.task('app-js', function() {
  return gulp.src(paths.app_js)
  //.pipe(minifyJs())
  .pipe(concat('redca-ias.concat.js'))
  .pipe(gulp.dest('../src/main/webapp/js'));
  });

  //gulp.task('theme-js', function() {
  //    return gulp.src(paths.theme_scripts)
  //    //.pipe(minifyJs())
  //    .pipe(concat('dashboard.min.js'))
  //    .pipe(gulp.dest('../src/main/webapp/js'));
  //});

  gulp.task('custom-js', function() {
  return gulp.src(paths.scripts)
  // .pipe(minifyJs())
  // .pipe(concat('openpms.concat.js'))
  .pipe(gulp.dest('../src/main/webapp/js'));
  });

  gulp.task('custom-less', function() {
  return gulp.src(paths.less)
  .pipe(less())
  .pipe(gulp.dest('../src/main/webapp/css'));
  });

  gulp.task('lib-css', function() {
  return gulp.src(paths.styles)
  .pipe(gulp.dest('../src/main/webapp/css'));
  });

  gulp.task('lib-less', function() {
  return gulp.src(paths.less)
  .pipe(less())
  .pipe(gulp.dest('../src/main/webapp/css'));
  });


  gulp.task('html-template', function() {
  gulp.src(paths.html_templates)
  .pipe(html2js(
  {
  base : '../admin/app/',
  outputModuleName: 'RedCA',
  useStrict: true
  }

  ))
  .pipe(concat('redca-ias.templates.js'))
  .pipe(gulp.dest('../src/main/webapp/js'))
  })

  /*
  gulp.task('inplace-app', function() {
  return gulp.src('../src/main/webapp/js')
  .pipe(gulp.dest('../build/inplaceWebapp/js'));
  });
  */


  /**
   * Watch custom files
   */
  gulp.task('watch', function() {
  gulp.watch([paths.html_templates], ['html-template']);
  gulp.watch([paths.images], ['custom-images']);
  gulp.watch([paths.styles], ['custom-less']);
  gulp.watch([paths.scripts], ['custom-js']);
  ///gulp.watch([paths.theme_scripts], ['theme-js']);
  gulp.watch([paths.index], ['usemin']);
  gulp.watch([paths.app_js], ['app-js']);
  gulp.watch([paths.app_data], ['move-json-data']);

  // for test
  // gulp.watch(['../src/main/webapp/js'], ['inplace-app']);

  });

  /**
   * Live reload server
   */
  gulp.task('webserver', function() {
  connect.server({
  root: '../src/main/webapp/',
  livereload: true,
  port: 5555
  });
  });


  gulp.task('livereload', function() {
  // gulp.src(['../src/main/webapp/**/*.*'])
  // .pipe(watch())
  // .pipe(connect.reload());
  });

  /**
   * Gulp tasks
   */
  gulp.task('build', ['usemin', 'build-custom', 'build-assets', ]);
  gulp.task('default', ['build', 'webserver', 'livereload', 'watch']);

Upvotes: 0

Views: 396

Answers (1)

Anri
Anri

Reputation: 6265

Create task:

gulp.task('filet', function() {
  gulp.src('src/components/**/*.*') 
      .pipe(gulp.dest('../admin/assets/components'));
 });

Then add it to dependencies of your another task

gulp.task('merge-copy-components', ['filter'], function() {
...

This will make sure 'filter' task ends before 'merge-copy-components'.

Upvotes: 3

Related Questions