Gulp显示错误的less-plugin-autoprefix插件

时间:2015-05-13 23:09:16

标签: less gulp autoprefixer

less-plugin-autoprefixer插件README表示,要使用该插件,请将其包含在gulpfile.js中:

var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
    autoprefixPlugin = new LessPluginAutoPrefix({browsers: ["last 2 versions"]});
less.render(lessString, { plugins: [autoprefixPlugin] })
  .then(

他们是否希望我在这里放置一个开放式回调函数?我糊涂了。我试着只包括第一部分:

var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
        autoprefixPlugin = new LessPluginAutoPrefix({browsers: ["last 2 versions"]});

然后像这样调用插件:

gulp.task('less', ['clean'], function() {
    return gulp.src('app.less')
        .pipe(less({
            includePaths: ['less'],
            plugins: [autoprefixPlugin] //***//
        }))
        .pipe(cssmin({keepSpecialComments: 0}))
        .pipe(rename('app.full.min.css'))
        .pipe(gulp.dest('../server/dist/'))
        .pipe(filter('../server/dist/**/*.css'))
        .pipe(reload({stream:true}));
});

但是我收到以下错误:

TypeError: Object #<Autoprefixer> has no method 'on'
    at DestroyableTransform.Stream.pipe (stream.js:65:8)
    at Gulp.<anonymous> (/Users/himmel/Sites/matt-mcdaniel.com/client/gulpfile.js:131:10)

我已经包含了必要的依赖项autoprefixer-core,我在这里缺少什么?

1 个答案:

答案 0 :(得分:1)

由于包含以下内容而导致错误的原因不明:

var autoprefixer = require('autoprefixer-core');

删除后,没有抛出任何错误。

此外,包括:

var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
        autoprefixPlugin = new LessPluginAutoPrefix({browsers: ["last 2 versions"]});

gulp.task('less', ['clean'], function() {
    return gulp.src('app.less')
        .pipe(less({
            includePaths: ['less'],
            plugins: [autoprefixPlugin] //***//
        }))
        .pipe(cssmin({keepSpecialComments: 0}))
        .pipe(rename('app.full.min.css'))
        .pipe(gulp.dest('../server/dist/'))
        .pipe(filter('../server/dist/**/*.css'))
        .pipe(reload({stream:true}));
});

足以让我的gulpfile在构建时自动修复,但在开发期间没有通过BrowserSync自动修复。