My Problem

I've been using gulp as a task runner for this project that I'm working on - which is a simple website. I have a src directory where I do all of my coding, store all of my assets like scripts, images, icons etc.

Up until now, gulp has been doing things like auto-prefixing and minifying my CSS files, it's been pressing my images, minifying JavaScript, and my HTML. It then sends everything to a build directory, and that's what I upload to the server. Everything has been working until today.

The issues is that gulp seems to be working: It runs fine in the terminal, it builds a "build" directory and all my projects files and assets are there. However none of the processing seems to take place.

What I've Tried

• deleting the build directory and running gulp again: Gulp creates a new build and everything seems to work, but none of the files have been processed.

• npm uninstall and then, npm install: I thought maybe there was a possiblilty that a fresh install of all my dependancies would fix the problem - but no.

• google: obviously I've tried finding solutions. Problem is I haven't found a question related to my problem (my appologies if there is one).

It seems to me my problem really stems from the fact that Gulp slilently fails. I'm not getting any errors at all but it's obvious something is wrong.

My Environment btw...

I'm running on Windows 10. There is no server running, or any continous integration, or browser refreshing, or any other automated tasks what so ever. I'm simply writing code in one directory, and Gulp is processing that code and assets, and outputing it to a build directory.

The plugins I'm using are:

• gulp-autoprefixer

• gulp-htmlmin

• gulp-clean-css

• gulp-uglify

• gulp-imagemin

• gulp-remove-html-ments

The only package manager I'm using is npm no bower or anything else.

The actual question

So if it's not clear... why is gulp building my project but not outputting the correct files? Or, are the files right, but somehow the processing is being skipped?

Thanks so much in advance!

As for any other information, I'd be happy to share what ever is needed. But there are no errors, so there is no log to share. Here's the gulpfile.js

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var htmlmin = require('gulp-htmlmin');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var removeHtmlComments = require('gulp-remove-html-ments');


gulp.task('imagemin', function() {
    return gulp.src(['src/**/**/*', '!src/images/**/*.db'])
      .pipe(imagemin())
      .pipe(gulp.dest('build/'));
});

gulp.task('minify-js', function() {
  return gulp.src(['src/**/*.js'])
    .pipe(uglify())
    .pipe(gulp.dest('build/'));
});

gulp.task('minify-html', function() {
  return gulp.src('src/**/*.html')
    .pipe(removeHtmlComments())
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('build/'))
});

gulp.task('prefix', function () {
    return gulp.src('./src/**/*.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cleanCSS({patibility: 'ie8'}))
        .pipe(gulp.dest('build/'));
});


gulp.task('default', ['prefix', 'minify-html', 'minify-js', 'imagemin'], function() {
    gulp.watch(['src/css/*.css'], ['prefix']);
    gulp.watch(['src/**/*.html'], ['minify-html']);
    gulp.watch(['src/**/*js'], ['minify-js']);
    gulp.watch(['src/images/**/*'], ['imagemin']);
});

My Problem

I've been using gulp as a task runner for this project that I'm working on - which is a simple website. I have a src directory where I do all of my coding, store all of my assets like scripts, images, icons etc.

Up until now, gulp has been doing things like auto-prefixing and minifying my CSS files, it's been pressing my images, minifying JavaScript, and my HTML. It then sends everything to a build directory, and that's what I upload to the server. Everything has been working until today.

The issues is that gulp seems to be working: It runs fine in the terminal, it builds a "build" directory and all my projects files and assets are there. However none of the processing seems to take place.

What I've Tried

• deleting the build directory and running gulp again: Gulp creates a new build and everything seems to work, but none of the files have been processed.

• npm uninstall and then, npm install: I thought maybe there was a possiblilty that a fresh install of all my dependancies would fix the problem - but no.

• google: obviously I've tried finding solutions. Problem is I haven't found a question related to my problem (my appologies if there is one).

It seems to me my problem really stems from the fact that Gulp slilently fails. I'm not getting any errors at all but it's obvious something is wrong.

My Environment btw...

I'm running on Windows 10. There is no server running, or any continous integration, or browser refreshing, or any other automated tasks what so ever. I'm simply writing code in one directory, and Gulp is processing that code and assets, and outputing it to a build directory.

The plugins I'm using are:

• gulp-autoprefixer

• gulp-htmlmin

• gulp-clean-css

• gulp-uglify

• gulp-imagemin

• gulp-remove-html-ments

The only package manager I'm using is npm no bower or anything else.

The actual question

So if it's not clear... why is gulp building my project but not outputting the correct files? Or, are the files right, but somehow the processing is being skipped?

Thanks so much in advance!

As for any other information, I'd be happy to share what ever is needed. But there are no errors, so there is no log to share. Here's the gulpfile.js

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var htmlmin = require('gulp-htmlmin');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var removeHtmlComments = require('gulp-remove-html-ments');


gulp.task('imagemin', function() {
    return gulp.src(['src/**/**/*', '!src/images/**/*.db'])
      .pipe(imagemin())
      .pipe(gulp.dest('build/'));
});

gulp.task('minify-js', function() {
  return gulp.src(['src/**/*.js'])
    .pipe(uglify())
    .pipe(gulp.dest('build/'));
});

gulp.task('minify-html', function() {
  return gulp.src('src/**/*.html')
    .pipe(removeHtmlComments())
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('build/'))
});

gulp.task('prefix', function () {
    return gulp.src('./src/**/*.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cleanCSS({patibility: 'ie8'}))
        .pipe(gulp.dest('build/'));
});


gulp.task('default', ['prefix', 'minify-html', 'minify-js', 'imagemin'], function() {
    gulp.watch(['src/css/*.css'], ['prefix']);
    gulp.watch(['src/**/*.html'], ['minify-html']);
    gulp.watch(['src/**/*js'], ['minify-js']);
    gulp.watch(['src/images/**/*'], ['imagemin']);
});

• javascript
• node.js
• gulp

1 Answer 1

So I ended up discovering the problem myself.

At first my gulp tasks seemed to start working again for no apparent reason. I was puzzled as to why and after wasting an hour investigating with no luck I just moved forward with development.

Until today I've just put up with the fact that sometimes the build would work and sometimes not.

The issue is in the imagemin task.src/**/**/* should be src/images/**/*. Silly mistake on my part, but hopefully this helps someone else who has a similar issue - if ever.

The reason the build would sometimes work and sometimes not, was that sometimes the imagemin task would finish it's work first, and then the other tasks would run fine. If imagemin finished last however, the task undid all previous processing since it was running on all files in src.