无法使GULP-SASS和GULP-IMAGEMIN正常工作

时间:2015-09-21 17:56:15

标签: sass gulp gulp-watch gulp-sass gulp-imagemin

半年一次,我正在使用这个gulpfile.js(如下所示),它完美无缺。现在,在Windows 8.1 64bit上,我几小时都无法正常工作。我在Firefox中使用LiveReload来查看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(或gulp-notifications?)但它仍然没有解决它。

我的问题是,目前我无法让脚本像以前一样工作,注意main.sass中的更改并将该文件压缩为.css文件,并注意我是否放置了images / 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个小时,我确实设法让它在某种程度上得到了解决,但是我不得不删除很多功能并且每次都重新启动gulp。我无法让图像变得“缩小”。

1 个答案:

答案 0 :(得分:0)

好吧,几天后我自己解决了我的问题。

首先,我必须为每种类型设置一个gulp.watch。我改变了gulp.tasks只执行一件事。

现在检查每个.scss sass,.js javascript,.jpg / .png / .bmp图像文件是否有变化,如果是,则调用所需的任务,然后在其上自己编译/缩小/移动受尊重的文件并触发(咆哮)通知。

由于我在Windows 8.1上,我确实有操作系统通知,但我更喜欢使用Growl,因此使用了growlNotifications。

my gulpfile.js的完整源代码:

if stopOutlet.selected