Search code examples
javascriptgulp

Gulp - Basic concat/minify doesnt output file


My code:

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    minify = require('gulp-minify-css');

gulp.task('css', function() {
    var styles = [
        'node_modules/sweetalert/dist/sweetalert.css'
    ];

    return
        gulp.src(styles)
        .pipe(minify())
        .pipe(concat('libs.min.css'))
        .pipe(gulp.dest('public/assets/css'));
});

Environment:

  • Source file exists.
  • Output directory exists and is writable.
  • Output is clean, no errors.

Console output:

root@bite-srv:/var/www/test# gulp css
[12:51:27] Using gulpfile /var/www/test/gulpfile.js
[12:51:27] Starting 'css'...`
[12:51:27] Finished 'css' after 582ms

This doesn't output any css.

What is wrong?

== EDIT ==

Found the problem is here:

// This doesn't work
return 
    gulp.src(styles)
    .pipe(minify())
    .pipe(concat('libs.min.css'))
    .pipe(gulp.dest('public/assets/css'));

// This works
return gulp.src(styles)
    .pipe(minify())
    .pipe(concat('libs.min.css'))
    .pipe(gulp.dest('public/assets/css'));

Can anybody explain why?


Solution

  • JavaScript performs automatic semicolon insertion. So this:

    return 
        gulp.src(styles)
        .pipe(minify())
        .pipe(concat('libs.min.css'))
        .pipe(gulp.dest('public/assets/css'));
    

    Is transformed into this:

    return; // <- Execution halts here!
    
    gulp.src(styles)
        .pipe(minify())
        .pipe(concat('libs.min.css'))
        .pipe(gulp.dest('public/assets/css'));
    

    For more information, see Beware Of JavaScript Semicolon Insertion.