Невозможно правильно обработать GULP-SASS и GULP-IMAGEMIN

Question

Полгода назад я использовал этот gulpfile.js (показано ниже), и он работал безупречно. Теперь, на Windows 8.1 64bit я не могу заставить его работать должным образом с часами. Я использую LiveReload в Firefox, чтобы увидеть изменения в RealTime и Growl, чтобы получить уведомления о том, что они были изменены.

Весь исходный код:

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

Теперь я заметил, что мне нужно изменить эти строки

gulp.watch(['resources/compiled/**']).on('change', function(file) { 
     server.changed(file.path); 
    }); 

в

livereload.listen(); 
gulp.watch('resources/uncompiled/**/*.scss', ['scss']); 

соблюдать ver3. (или gulp-notifications?), но он все еще не разрешил его.

Моя проблема в том, что в настоящее время я не могу заставить скрипт работать как раньше, чтобы заметить изменения в main.sass и сжать этот файл в файл .css, а также заметить, что я разместил изображения/js файлы и переместить их соответственно. Часть изображений не так важна, но SASS. Он должен помещать его в/compiled/css или/compiled/images соответственно.

Каждый раз, когда я пытаюсь изменить и сохранить Sass файлы, я получаю это:

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 

Конечно, я пытался изменить пути, пытались использовать непосредственно пути в функции вместо передачи переменных, но но безрезультатно. Любые предложения? Я пробовал уже 4 часа, и мне удалось заставить его работать в некоторой степени, но мне пришлось удалить много функций и каждый раз перезапускать глоток. Я не мог получить изображения, чтобы получить «minified».

Answer 1

Ну, несколько дней спустя, и я решил свою проблему самостоятельно.

Прежде всего, мне пришлось установить gulp.watch для каждого типа. Я изменил gulp.tasks, чтобы выполнить только одну вещь.

Теперь каждый файл .scss sass, .js javascript, .jpg/.png/.bmp проверяется на наличие изменений, и если это так, вызывается вызываемая задача, которая сама по себе компилирует/минимизирует/перемещает уважаемый файл и запускает уведомление (рычание).

Поскольку я нахожусь в Windows 8.1 У меня есть уведомления ОС, но я бы предпочел использовать Growl, следовательно, используются growlNotifications.

Полный исходный код моих 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']);