CODEWITHSUNDEEP
javascriptnode.jsgulp
Dan Fletcher
Dan Fletcher

Reputation: 1238

Gulp seems to be working, but build files have not been processed

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

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:

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-comments');


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({compatibility: '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']);
});

Upvotes: 4

Views: 6463

Answers (1)

Dan Fletcher
Dan Fletcher

Reputation: 1238

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.

Upvotes: 5

Related Questions