Gulp не работает при запуске нескольких задач

Я пытаюсь схватить голову за глоток. Мне удалось написать gulpfile.js для моего базового шаблона страницы, но у меня проблемы с запуском серверной задачи по порядку.

Я пытаюсь сгенерировать файл css/main.css из файлов scss, скопировать его в dist/css/, а затем вставить файлы js и css в index.html (с помощью gulp-inject).

(function (r) {
  var gulp = r('gulp');
  var del = r('del');
  var wiredep = r('wiredep');
  var $ = r('gulp-load-plugins')();
  // var runSequence = require('run-sequence');


  var config = {
    css_files: './css/*.css',
    sass_files: './scss/*.scss',
    main_sass: './scss/main.scss',
    main_css: './css/main.css',
    css_dir: './css/',
    js_files: './js/*.js',
    main_js: './js/main.js',
    index: [
      './index.html',
      '**/index.html',
    '!node_modules/**/*.*',
    '!bower_components/**/*.*',
    ],
    dist: './dist/',
  };

  function clean(cb) {
    del.sync([
      config.css_files,
      config.dist + config.css_files,
      config.dist + config.js_files,
      config.dist + config.index[0],
      config.dist + config.index[1],
      config.dist + '**/*.map',
    ]);
    cb();
  }

  gulp.task('clean', function (cb) {
    clean(cb);
  });

  gulp.task('scss', function (cb) {
    gulp
    .src(config.sass_files)
    .pipe($.plumber())
    .pipe($.sass())
    .pipe(gulp.dest(config.css_dir));
    cb();
  });

  gulp.task('js', function (cb) {
    gulp
    .src(config.js_files)
    .pipe($.concat('main.js'))
    .pipe($.sourcemaps.init())
    .pipe($.uglify())
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest(config.dist + 'js/'));
    cb();
  });

  gulp.task('css', ['scss'], function (cb) {
    gulp
    .src(config.css_files)
    .pipe($.sourcemaps.init())
    .pipe($.uglifycss())
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest(config.dist + 'css/'));
    cb();
  });

  function wd(cb) {
    wiredep({ ignorePath: '../..', src: config.main_sass, directory: './bower_components' });
    wiredep({ ignorePath: '../..', src: config.index[0], directory: './bower_components' });
    cb();
  }

  gulp.task('wd', function (cb) {
    wd(cb);
  });

  gulp.task('inject-dev', ['wd'], function (cb) {
    var src = ['!dist/**/*.*'].concat(config.index);
    gulp
    .src(src)
    .pipe($.inject(gulp.src([config.css_files, config.js_files])))
    .pipe(gulp.dest('./'));
    cb();
  });

  gulp.task('inject-dist', ['copy-index'], function (cb) {
    var src = gulp.src([config.dist + 'css/**/*.*', config.dist + 'js/**/*.*']);
    var target = gulp.src(config.dist + '**/index.html');
    target.pipe($.inject(src, { relative: true }))
    .pipe(gulp.dest(config.dist));
    cb();
  });

  gulp.task('watch', function (cb) {
    gulp.watch(config.sass_files, ['scss']);
    cb();
  });

  gulp.task('copy-index', function (cb) {
    gulp
    .src(config.index, { base: './' })
    .pipe(gulp.dest(config.dist));
    cb();
  });

  gulp.task('build-dist', ['clean', 'css', 'js', 'inject-dist']);
})(require);

Результатом build-dist для ATM является сгенерированный файл js/main.js, скопированный index.html и about/index.html, сгенерированный main.css в каталоге dev, но не в dist. Файлы также не внедряются в dist/index.html.

λ szuja html-scaffold → λ git master* → tree -L 3 -I 'bower_components|node_modules'
.
├── about
│   └── index.html
├── bower.json
├── css
│   └── main.css
├── dist
│   ├── about
│   │   └── index.html
│   ├── index.html
│   └── js
│       ├── main.js
│       └── main.js.map
├── gulpfile.js
├── index.html
├── js
│   ├── main2.js
│   └── main.js
├── LICENSE
├── package.json
├── README.md
└── scss
    └── main.scss

Изменить: похоже, gulp не заботится об ожидании завершения задач, игнорируя функции обратного вызова:

[16:15:47] Using gulpfile ~/workdir/html-scaffold/gulpfile.js
[16:15:47] Starting 'clean'...
[16:15:47] Finished 'clean' after 15 ms
[16:15:47] Starting 'scss'...
[16:15:47] Finished 'scss' after 75 ms
[16:15:47] Starting 'css'...
[16:15:47] Finished 'css' after 44 ms
[16:15:47] Starting 'js'...
[16:15:47] Finished 'js' after 74 ms
[16:15:47] Starting 'copy-index'...
[16:15:47] Finished 'copy-index' after 4.27 ms
[16:15:47] Starting 'inject-dist'...
[16:15:47] Finished 'inject-dist' after 13 ms
[16:15:47] Starting 'build-dist'...
[16:15:47] Finished 'build-dist' after 9.01 μs
[16:15:47] gulp-debug: 0 items
[16:15:47] gulp-debug: 0 items
[16:15:47] gulp-debug: scss/main.css
[16:15:47] gulp-debug: 1 item

person kmiasko    schedule 10.01.2016    source источник


Ответы (1)


Работает с последовательностью выполнения и возвратом обещания вместо ожидания функции обратного вызова. Я пробовал этот метод раньше, но каким-то образом мне удалось передать параметры в виде массива, поэтому они работали параллельно.

(function (r) {
  var gulp = r('gulp');
  var del = r('del');
  var wiredep = r('wiredep');
  var $ = r('gulp-load-plugins')();
  var runSequence = require('run-sequence');


  var config = {
    css_files: './css/*.css',
    sass_files: './scss/*.scss',
    main_sass: './scss/main.scss',
    main_css: './css/main.css',
    css_dir: './css/',
    js_files: './js/*.js',
    main_js: './js/main.js',
    index: [
      './index.html',
      '**/index.html',
    '!node_modules/**/*.*',
    '!bower_components/**/*.*',
    ],
    dist: './dist/',
  };

  function clean(cb) {
    del.sync([
      config.css_files,
      config.dist + config.css_files,
      config.dist + config.js_files,
      config.dist + config.index[0],
      config.dist + config.index[1],
      config.dist + '**/*.map',
    ]);
    cb();
  }

  gulp.task('clean', function (cb) {
    clean(cb);
  });

  gulp.task('scss', function () {
    return gulp
    .src(config.sass_files)
    .pipe($.plumber())
    .pipe($.sass())
    .pipe($.debug())
    .pipe(gulp.dest(config.css_dir));
  });

  gulp.task('js', function () {
    return gulp
    .src(config.js_files)
    .pipe($.concat('main.js'))
    .pipe($.sourcemaps.init())
    .pipe($.uglify())
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest(config.dist + 'js/'));
  });

  gulp.task('css', ['scss'], function () {
    return gulp
    .src(config.css_files)
    .pipe($.sourcemaps.init())
    .pipe($.uglifycss())
    .pipe($.sourcemaps.write('./'))
    .pipe($.debug())
    .pipe(gulp.dest(config.dist + 'css/'));
  });

  function wd(cb) {
    wiredep({ ignorePath: '../..', src: config.main_sass, directory: './bower_components' });
    wiredep({ ignorePath: '../..', src: config.index[0], directory: './bower_components' });
    cb();
  }

  gulp.task('wd', function (cb) {
    wd(cb);
  });

  gulp.task('inject-dev', ['wd'], function () {
    var src = ['!dist/**/*.*'].concat(config.index);
    return gulp
    .src(src)
    .pipe($.inject(gulp.src([config.css_files, config.js_files])))
    .pipe($.debug())
    .pipe(gulp.dest('./'));
  });

  gulp.task('inject-dist', ['copy-index'], function () {
    var src = gulp.src([config.dist + 'css/**/*.*', config.dist + 'js/**/*.*']);
    var target = gulp.src(config.dist + '**/index.html');
    return target.pipe($.inject(src, { relative: true }))
    .pipe($.debug())
    .pipe(gulp.dest(config.dist));
  });

  gulp.task('watch', function (cb) {
    gulp.watch(config.sass_files, ['scss']);
    cb();
  });

  gulp.task('copy-index', function () {
    return gulp
    .src(config.index, { base: './' })
    .pipe(gulp.dest(config.dist));
  });

  gulp.task('build-dist', function (cb) {
    runSequence('clean', 'js', 'css', 'inject-dist', cb);
  });
})(require);
person kmiasko    schedule 10.01.2016