CODEWITHSUNDEEP
lessgulpautoprefixer
Himmel
Himmel

Reputation: 3709

less-plugin-autoprefix plugin with Gulp showing error

The less-plugin-autoprefixer plugin README says that, to use the plugin, you include this in your gulpfile.js:

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

Do they want me to put an open ended callback function here? I'm confused. I tried including just the first part:

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

and then called the plugin like this:

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}));
});

But I receive the following error:

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)

I've included the necessary dependency, autoprefixer-core, what am I missing here?

Upvotes: 0

Views: 432

Answers (1)

Himmel
Himmel

Reputation: 3709

The error was thrown for an unknown reason due to inclusion of:

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

After removing this, no error was thrown.

Additionally, including:

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

and

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}));
});

was sufficient for my gulpfile to autoprefix on build, but did not autoprefix via BrowserSync during development.

Upvotes: 1

Related Questions