当多个任务运行时，Gulp无法工作

时间：2016-01-10 12:42:02

标签： gulp gulp-sass gulp-inject

我试图围着一口气摸不着头脑。我设法为我的基本页面脚手架编写gulpfile.js，但是我按顺序运行了几个任务的问题。

我试图从scss文件生成css / main.css文件，将其复制到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，在dev dir中生成了main.css，但没有生成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

1 个答案:

答案 0 :(得分：0)

使用运行顺序并返回承诺，而不是等待回调函数。我以前尝试过这种方法，但不知何故设法将参数作为数组传递，因此它们并行运行.. 

(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);
相关问题
最新问题