Can't get a GULP-SASS and GULP-IMAGEMIN to work properly - sass

Question

Half an year a go I was using this gulpfile.js (shown below) and it worked flawlessly. Now, on windows 8.1 64bit I can't get it to properly work since hours. I'm using LiveReload in Firefox to see the changes in RealTime and Growl to get the notifications that it was changed.
The entire source code is:
var gulp = require('gulp'),
gutil = require('gulp-util'),
notify = require('gulp-notify'),
autoprefix = require('gulp-autoprefixer'),
minifyCSS = require('gulp-minify-css'),
exec = require('child_process').exec,
sys = require('sys'),
uglify = require('gulp-uglify'),
changed = require('gulp-changed'),
livereload = require('gulp-livereload'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
path = require('path'),
watch = require('gulp-watch'),
sass = require('gulp-sass');
// Which directory should Sass compile to?
var targetDir = 'resources/compiled';
// .pipe(minifyCSS())
gulp.task('scss', function () {
gulp.src('resources/uncompiled/**/*.scss')
.pipe(changed(targetDir))
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefix('last 15 version'))
.pipe(changed(targetDir))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir));
//! .sass files -> compile, minify, autoprefix and publish
watch('resources/uncompiled/**/*.scss', function(files) {
return files.pipe(changed(targetDir))
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefix('last 15 version'))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "File: <%= file.relative %>",
title: "SASS compiled, minified and published."
}));
});
});
gulp.task('js', function() {
gulp.src('resources/uncompiled/**/*.js')
.pipe(changed(targetDir))
.pipe(uglify())
.pipe(changed(targetDir))
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "File: <%= file.relative %>",
title: "JavaScript minified and published."
}));
//! .js files -> compress and publish
watch('resources/uncompiled/**/*.js', function(files) {
return files.pipe(changed(targetDir))
.pipe(uglify())
.pipe(rename(function(path) {
path.dirname = path.dirname.replace(/assets\//g, "");
}))
.pipe(changed(targetDir))
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "File: <%= file.relative %>",
title: "JavaScript minified and published."
}));
});
});
gulp.task('images', function() {
gulp.src(['resources/uncompiled/**/*.png', 'resources/uncompiled/**/*.jpg', 'resources/uncompiled/**/*.ico', 'resources/uncompiled/**/*.gif'])
.pipe(changed(targetDir))
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(changed(targetDir))
.pipe(gulp.dest(targetDir));
//! image files -> compress and publish
watch(['resources/uncompiled/**/*.png', 'resources/uncompiled/**/*.jpg', 'resources/uncompiled/**/*.ico', 'resources/uncompiled/**/*.gif'], function(files) {
return files.pipe(changed(targetDir))
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(rename(function(path) {
path.dirname = path.dirname.replace(/assets\//g, "");
}))
.pipe(changed(targetDir))
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "Image: <%= file.relative %>",
title: "Image optimized and published."
}));
});
});
gulp.task('watch', function () {
// Create LiveReload server
var server = livereload();
// Watch any files in public dir, reload on change
gulp.watch(['resources/compiled/**']).on('change', function(file) {
server.changed(file.path);
});
});
// What tasks does running gulp trigger?
gulp.task('default', ['scss', 'js','images', 'watch']);
Now, I noticed that I need to change these lines
gulp.watch(['resources/compiled/**']).on('change', function(file) {
server.changed(file.path);
});
to
livereload.listen();
gulp.watch('resources/uncompiled/**/*.scss', ['scss']);
to comply with ver3. of gulp (or gulp-notifications?) but it still didn't resolve it.
My issue is that currently I can't get the script to work like before, to notice changes in the main.sass and to compress that file to .css file and to also notice if i've placed images/js files and move them accordingly. The images part is not that important, but the SASS is. It should put it in /compiled/css or /compiled/images accordingly.
Every time I try to change and save the sass files, I get this:
path.js:146
throw new TypeError('Arguments to path.resolve must be strings');
^
TypeError: Arguments to path.resolve must be strings
at Object.win32.resolve (path.js:146:13)
at DestroyableTransform._transform (L:\xampp\htdocs\node_modules\gulp-changed\index.js:72:22)
at DestroyableTransform.Transform._read (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules
\readable-stream\lib\_stream_transform.js:172:10)
at DestroyableTransform.Transform._write (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_module
s\readable-stream\lib\_stream_transform.js:160:12)
at doWrite (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules\readable-stream\lib\_stream_
writable.js:326:12)
at writeOrBuffer (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules\readable-stream\lib\_s
tream_writable.js:312:5)
at DestroyableTransform.Writable.write (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules\
readable-stream\lib\_stream_writable.js:239:11)
at DestroyableTransform.Writable.end (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules\re
adable-stream\lib\_stream_writable.js:467:10)
at File.pipe (L:\xampp\htdocs\node_modules\gulp-watch\node_modules\vinyl\index.js:103:14)
at L:\xampp\htdocs\fusion\_designs\cms-design\gulpfile.js:33:22
at write (L:\xampp\htdocs\node_modules\gulp-watch\index.js:123:9)
at L:\xampp\htdocs\node_modules\gulp-watch\node_modules\vinyl-file\index.js:52:4
at L:\xampp\htdocs\node_modules\gulp-watch\node_modules\vinyl-file\node_modules\graceful-fs\graceful-fs.js:76:16
at fs.js:334:14
at L:\xampp\htdocs\node_modules\gulp-watch\node_modules\vinyl-file\node_modules\graceful-fs\graceful-fs.js:42:10
at L:\xampp\htdocs\node_modules\gulp-watch\node_modules\chokidar\node_modules\readdirp\node_modules\graceful-fs\grace
ful-fs.js:42:10
Of course I tried to change the paths, tried to use directly paths in the functions instead of passing variables, but to no avail.
Any suggestions? I've been struggling for 4 hours now and I did manage to get it to work to some extend, but I had to remove a lot of the functionality and to restart gulp every time. I couldn't get the images to get "minified" as well.

Answer 1

Well, several days later and I solved my issue on my own.
First of all, I had to set a gulp.watch for each type. I changed the gulp.tasks to perform one thing only.
Now every .scss sass, .js javascript, .jpg/.png/.bmp image file gets checked for changes and if so, the needed task gets called, which on it's own then compiled/minifies/moves the respected file and fires a (growl) notification.
Since I'm on Windows 8.1 I do have OS notifications but I'd rather use Growl, hence the growlNotifications are used.
Full source code of my gulpfile.js:
var gulp = require('gulp'),
gutil = require('gulp-util'),
notify = require('gulp-notify'),
autoprefix = require('gulp-autoprefixer'),
minifyCSS = require('gulp-minify-css'),
exec = require('child_process').exec,
sys = require('sys'),
uglify = require('gulp-uglify'),
changed = require('gulp-changed'),
livereload = require('gulp-livereload'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
path = require('path'),
watch = require('gulp-watch'),
growl = require('gulp-notify-growl'),
sass = require('gulp-sass');
// Initialize the Growl notifier instead of the default OS notifications
// meaning, this: https://i.imgur.com/ikkINZr.png
// changes to this: https://i.imgur.com/zz9m9k6.png
var growlNotifier = growl({
hostname : 'localhost' // IP or Hostname to notify, default to localhost
});
// Which directory should the files compile to?
var targetDir = 'resources/compiled';
gulp.task('scss', function () {
gulp.src('resources/uncompiled/**/*.scss')
.pipe(changed(targetDir))
//.pipe(minifyCSS()) //makes it hard to debug , to be used for in-production only
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefix('last 15 version'))
.pipe(changed(targetDir))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir))
.pipe(growlNotifier({ // change to notify if you wish to use your default OS notifications
message: "File: <%= file.relative %>",
title: "SASS compiled, minified and published."
}))
.pipe(livereload()); //this is how we notify LiveReload for changes
});
gulp.task('js', function() {
//needs testing, but it should be OK
gulp.src('resources/uncompiled/**/*.js')
.pipe(changed(targetDir))
.pipe(uglify())
.pipe(changed(targetDir))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "File: <%= file.relative %>",
title: "Javascript minified and published."
}))
.pipe(livereload());
});
gulp.task('images', function() {
gulp.src(['resources/uncompiled/**/*.png', 'resources/uncompiled/**/*.jpg', 'resources/uncompiled/**/*.ico', 'resources/uncompiled/**/*.gif'])
.pipe(changed(targetDir))
//imagemin causes errors for me: http://pastebin.com/eDF3SeS6
//.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(changed(targetDir))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir))
.pipe(growlNotifier({
message: "Image: <%= file.relative %>",
title: "Image optimized and published."
}))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen(); //we need to tell gulp to listen for livereload notification
//this is how we watch for changes in specific files and fire specific tasks
gulp.watch('resources/uncompiled/**/*.scss', ['scss']);
gulp.watch('resources/uncompiled/**/*.js', ['js']);
gulp.watch(['resources/uncompiled/**/*.png', 'resources/uncompiled/**/*.jpg', 'resources/uncompiled/**/*.ico', 'resources/uncompiled/**/*.gif'], ['images']);
});
// What tasks does running gulp trigger?
gulp.task('default', ['scss', 'js','images', 'watch']);