【问题标题】:Gulp Notify global success functionGulp Notify 全局成功函数
【发布时间】:2016-08-21 21:10:20
【问题描述】:

我正在寻找可以重用的调用 gulp-notify 成功函数。我对所有任务都使用相同的格式,并希望对其进行清理。这是我现在正在做的一个例子:

gulp.task('build-css', function() {
    const s = gsize();

    return gulp.src('src/css/main.css')
        .pipe(plumber({ errorHandler: onError }))
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/css'))
        .pipe(s)
        .pipe(notify({
            title: function () {
                return '<%= file.relative %> - ' + s.prettySize;
            },
            onLast: true,
            subtitle: "Successfully Compiled",
            message: "@ Time: <%= options.hour %>:<%= options.minute %>:<%= options.second %> ",
            templateOptions: {
                hour: new Date().getHours(),
                minute: new Date().getMinutes(),
                second: new Date().getSeconds()
            }
        }))
});

我正在对多个任务重复使用相同的通知功能。我试过做这样的事情,但每次尝试都会引发错误。这个特殊的错误与管道工有关 - Can't Pipe to Undefined

var onSuccess = function () {
    const s = gsize();
    notify({
        title: function () {
            return '<%= file.relative %> - ' + s.prettySize;
        },
        onLast: true,
        subtitle: "Successfully Compiled",
        message: "@ Time: <%= options.hour %>:<%= options.minute %>:<%= options.second %> ",
        templateOptions: {
            hour: new Date().getHours(),
            minute: new Date().getMinutes(),
            second: new Date().getSeconds()
        }
    })
};

...

gulp.task('build-css', function() {
    const s = gsize();

    return gulp.src('src/css/main.css')
        .pipe(plumber({ errorHandler: onError }))
        .pipe(autoprefixer({
            browsers: ['last 6 versions'],
            cascade: false
        }))
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(s)
        .pipe(onSuccess())
        .pipe(gulp.dest('dist/css'))
        .pipe(reload({stream: true}));
});

感谢您对如何实现这一点的任何想法!

编辑 qballers 解决方案后,唯一的问题是我的 gulp-size 插件返回未定义的文件大小:

const s = gsize();

// Success Message
var notifyGeneric = {
    title: function () {
        return '<%= file.relative %> - ' + s.prettySize;
    },
    onLast: true,
    subtitle: "Successfully Compiled",
    message: "@ Time: <%= options.hour %>:<%= options.minute %>:<%= options.second %> ",
    templateOptions: {
        hour: date.getHours(),
        minute: date.getMinutes(),
        second: date.getSeconds()
    }
};

...

gulp.task('build-css', function() {
    const s = gsize();

    return gulp.src(srcCssPath + 'main.css')
        .pipe(plumber({ errorHandler: onError }))
        .pipe(autoprefixer({
            browsers: ['last 6 versions'],
            cascade: false
        }))
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(s)
        .pipe(notify(notifyGeneric))
        .pipe(gulp.dest(cssPath))
        .pipe(reload({stream: true}));
});

【问题讨论】:

    标签: javascript node.js gulp gulp-notify


    【解决方案1】:

    不确定这是否是您想要的解决方案,但您可以使用对象文字来节省代码重复。

    var notifyGeneric = {
                title: function () {
                    return '<%= file.relative %> - ' + this.s.prettySize;
                },
                onLast: true,
                subtitle: "Successfully Compiled",
                message: "@ Time: <%= options.hour %>:<%= options.minute %>:<%= options.second %> ",
                templateOptions: {
                    hour: new Date().getHours(),
                    minute: new Date().getMinutes(),
                    second: new Date().getSeconds()
                },
                s: {}
            };
    gulp.task('build-css', function() {
        notifyGeneric.s = gsize();
        return gulp.src('src/css/main.css')
            .pipe(plumber({ errorHandler: onError }))
            .pipe(cssmin())
            .pipe(rename({suffix: '.min'}))
            .pipe(gulp.dest('dist/css'))
            .pipe(notifyGeneric.s)
            .pipe(notify(notifyGeneric))
    });
    

    【讨论】:

    • 谢谢,这太完美了!我必须将 notifyGeneric 设为 var,并且还有一个我的 const s = gsize(); 实例作为一个全局变量 - 之后一切都按预期工作。我的文件更干净了,谢谢!
    • 实际上 - 我的 gulp 大小未定义,有什么想法吗?
    • 试试这个:.pipe(gsize())
    • 现在应该可以工作了,我会尝试创建一个 notifyGeneric 的副本来修改 s.此外,如果您仍然未定义,请将标题函数绑定到 this。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-05-14
    • 2011-05-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多