Gulp Task Say Complete, but does not produce results

Question

I have the tasks below to build my app. It's somewhat abridged for web. The output says all the task finished. The omitted notify messages all output complete EXCEPT for the Libs task. If I run I separately, all of it works.

I've fiddled with the code, it seems to work, but I'm obviously missing a key fact. Please help.

Gulp File and Output Below:

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

/**PROBLEM LIBRARIES.JS does not appear, gulp notify for libs does not work

//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

Thank you for any help.

Answer 1

It appears that gulp often does not understand the route start at the current directory for a reason that I ignore now (I do not have to apply this solution for my project in Laravel 5.4 for example...).

In my case, I was missing a trailing . before my css/js route file, which caused to run gulp properly without any output result (no files were created).

So I had to go from this :

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

To this :

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

Hope it helps save some precious time and prevent headaches !

Answer 2

Keep in mind that gulp.src does its work asynchronously. You need to return the streams rather than calling cb immediately`:

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