C
C
colorkid2017-01-14 17:44:38
Automation
colorkid, 2017-01-14 17:44:38

GULP. How to run autoprefix along with watch?

Hello. This is my first time using gulp collectors, and indeed any collector.
Found some guides, began to act in accordance with them. But not one of them contains information on autoprefix. I started installing it myself. Here is what I have now:

var gulp = require('gulp');
var less = require('gulp-less');
var path = require('path');
var browserSync = require('browser-sync');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('less', function () {
  return gulp.src('css/style.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

gulp.task('autopre', function () {
    return gulp.src('css/style.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('css'));
});

gulp.task('watch', ['browserSync', 'less'], function (){
  gulp.watch('css/*.less', ['less']);
  // другие ресурсы
});

gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: ''
    },
  })
});

Everything is fine, but in order to add prefixes, I need to write gulp autopre in the console, but I would like everything else to run with watch. Those. less converts on the fly, how to add prefixes on the fly?
ps Tried something like this
gulp.task('watch', ['browserSync', 'less', 'autopre'], function (){
gulp.watch('css/*.less', ['less'] );
// other resources
}); - it didn't work out, at startup it puts prefixes 1 time, but doesn't put anything new along the way.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question