Gulp任务已完成，但未产生结果。

Question

我有以下任务来构建我的应用程序。它在Web上有所缩减。输出显示所有任务都已完成。省略的通知消息都输出完成，除了Libs任务。如果我单独运行它，所有内容都可以正常工作。

我已经调整了代码，看起来它能够工作，但显然我还缺少一个关键的事实。请帮忙。

Gulp文件和输出如下：

//Gulp File

var gulp = require('gulp'),
    //..
    sass = require('gulp-sass');

gulp.task('default', ['clean'], function (cb) {
    gulp.start('libs', 'app', 'styles');
    cb();
});

gulp.task("app", function (cb) {
    gulp.src(['./app/main/app.js', './app/**/*.js'])
        .pipe(changed('public/js'))
        .pipe(concat('app.js'))
        .pipe(gulp.dest('public/js'))
    cb();
});

gulp.task("styles", function (cb) {
    gulp.src('./resources/sass/app.scss')
        .pipe(changed('public/css'))
        .pipe(sass({...}))
        .pipe(autoprefixer(...))
        .pipe(gulp.dest("./resources/build/"))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('public/css'))
    cb();
});


gulp.task('publish', function (cb) {
    gulp.src([
        'bower_components/jquery/dist/jquery.js',
        'bower_components/angular/angular.js',
       //..
        'bower_components/angular-aria/angular-aria.min.js'
    ])
        .pipe(gulp.dest('./resources/build/js/'));

    cb();
});


gulp.task('libs', ['publish'], function (cb) {
    gulp.src([
        'resources/build/js/angular.js',
        'resources/build/js/**/*.js'
    ])
        .pipe(concat('libraries.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('public/js'))
    cb();
});

gulp.task('clean', function (cb) {
    del(['resources/build', 'public/js/', 'public/css/'], cb)
});

问题：LIBRARIES.JS文件未出现，gulp通知无法工作。

//Output of Gulp (default)
[01:14:05] Using gulpfile ~/dev/ttd/client/gulpfile.js
[01:14:05] Starting 'clean'...
[01:14:05] Finished 'clean' after 5.78 ms
[01:14:05] Starting 'default'...
[01:14:05] Starting 'publish'...
[01:14:05] Finished 'publish' after 11 ms
[01:14:05] Starting 'libs'...
[01:14:05] Finished 'libs' after 2.81 ms
[01:14:05] Starting 'app'...
[01:14:05] Finished 'app' after 3.39 ms
[01:14:05] Starting 'styles'...
[01:14:05] Finished 'styles' after 3.85 ms
[01:14:05] Finished 'default' after 22 ms
[01:14:05] gulp-notify: [Gulp notification] App Compiled
[01:14:06] gulp-notify: [Gulp notification] Styles Compiled

//Output of Gulp libs
[07:26:16] Using gulpfile ~/dev/ttd/client/gulpfile.js
[07:26:16] Starting 'publish'...
[07:26:16] Finished 'publish' after 7.4 ms
[07:26:16] Starting 'libs'...
[07:26:16] Finished 'libs' after 2.71 ms
[07:26:16] gulp-notify: [Gulp notification] Libs Compiled

感谢您的帮助。

- csduarte

---

我想知道在“libs”之前是否以某种方式运行了clean。你能否尝试从目录中删除“'resources/build'”并将其添加到清理列表中，看看是否有所帮助？显然，人们在使用官方回调配方使Gulp同步执行任务方面遇到了问题，请参见此处的撰写和另一种解决方案：http://schickling.me/synchronous-tasks-gulp/ - Kalle Björklid

这些cb(回调函数)有效吗？ - Rigotti

不，回调函数并不会。我举的例子太过极端了，从中吸取了教训。 - csduarte

Answer 1

请记住，gulp.src是异步执行的。你需要返回流而不是立即调用cb：

//Gulp File

var gulp = require('gulp'),
    //..
    sass = require('gulp-sass');

gulp.task('default', ['clean', 'libs', 'app', 'styles']);

gulp.task("app", ['clean'], function () {
    return gulp.src(['./app/main/app.js', './app/**/*.js'])
        .pipe(changed('public/js'))
        .pipe(concat('app.js'))
        .pipe(gulp.dest('public/js'));
});

gulp.task("styles", ['clean'], function () {
    return gulp.src('./resources/sass/app.scss')
        .pipe(changed('public/css'))
        .pipe(sass({...}))
        .pipe(autoprefixer(...))
        .pipe(gulp.dest("./resources/build/"))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('public/css'));
});


gulp.task('publish', ['clean'], function () {
    return gulp.src([
        'bower_components/jquery/dist/jquery.js',
        'bower_components/angular/angular.js',
       //..
        'bower_components/angular-aria/angular-aria.min.js'
    ])
      .pipe(gulp.dest('./resources/build/js/'));
});


gulp.task('libs', ['clean', 'publish'], function () {
    return gulp.src([
        'resources/build/js/angular.js',
        'resources/build/js/**/*.js'
    ])
      .pipe(concat('libraries.js'))
      .pipe(rename({suffix: '.min'}))
      .pipe(gulp.dest('public/js'));
});

gulp.task('clean', function (cb) {
    del(['resources/build', 'public/js/', 'public/css/'], cb)
});

- Ben

---

哇，谢谢！那个问题让我熬了一整晚，我发现返回值是可选的。我还是新手，对流式编程很感兴趣。谢谢！ - csduarte

Answer 2

看起来 gulp 经常不理解从当前目录开始的路由，原因我现在不知道（例如，在我的 Laravel 5.4 项目中，我不必应用此解决方案...）。

在我的情况下，我在 css/js 路由文件之前缺少了一个结尾的 .，这导致 gulp 正常运行但没有任何输出结果（没有创建任何文件）。

所以我必须从这里开始：

var gulp = require('gulp');
var concat = require('gulp-concat');
var js = require('gulp-uglify');
var css = require('gulp-uglifycss');

var stylesheets = [
    '/css/fabric.css'
];

var scripts = [
    '/js/fabric.js'
];

gulp.task('css', function() {
    return gulp.src( stylesheets )
        .pipe( concat('fabric.min.css') )
        .pipe( css() )
        .pipe( gulp.dest('/dist/css/') );
});

变成这样：

var gulp = require('gulp');
var concat = require('gulp-concat');
var js = require('gulp-uglify');
var css = require('gulp-uglifycss');

var stylesheets = [
    './css/fabric.css'
];

var scripts = [
    './js/fabric.js'
];

gulp.task('css', function() {
    return gulp.src( stylesheets )
        .pipe( concat('fabric.min.css') )
        .pipe( css() )
        .pipe( gulp.dest('./dist/css/') );
});

希望它能够节省一些宝贵的时间并避免头痛！

- Anwar