Как сделать автообновление postcss через livereload?

Question

[Александр Иванов]

Не могу добиться удобной работы, т.е. при сохранении он обновляет html и css. Но вношу то я изменения в PostCss файл, который по идее должен обновлять основной css, можно ли добиться автообновления через postcss?

var gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    browserSync = require('browser-sync'),
    autoprefixer = require('autoprefixer'),
    rename = require('gulp-rename'),
    cssnano = require('gulp-cssnano'),
    livereload = require('gulp-livereload'),
    server = require('gulp-server-livereload'),
    connect = require('gulp-connect');

gulp.task('connect', function() {
    connect.server({
        root: 'app',
        livereload: true
    });
});

var path = './app/css/';

gulp.task('webserver', function() {
    gulp.src('./app/')
        .pipe(server({
            port: 3000,
            livereload: true,
            directoryListing: false,
            open: false
        }));
});

gulp.task('browser-sync', function () {
    browserSync({
        server: {
            baseDir: 'app'
        },
        notify: false
    });
});

gulp.task('css', function () {
    var plugins = [
        autoprefixer({browsers: ['>5%']})
    ];
    return gulp.src(path+'*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest(path))
        .pipe(connect.reload())
        .pipe(livereload());
});

gulp.task('watch',function () {
    livereload.listen();
    gulp.watch('**/*.css',['css'])
});

gulp.task('default', ['webserver', 'css', 'browser-sync']);

________________

P.S. Лично мне больше LESS нравится судя по примеру с ним не должно быть этой проблемы, но видимо сейчас в моде POSTCSS

Answer 1

[Александр Иванов]

Так заработало

gulp.task('css', function () {
    var plugins = [
        autoprefixer({browsers: ['>5%']})
    ];
    return gulp.src(path+'*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest(path))
        .pipe(connect.reload())
        .pipe(livereload(postcss(plugins)));
});

Comments

[Александр Иванов]

Хотя не очень как-то

[Александр Иванов]

cimonlebedev, хотя и так тоже работает

gulp.task('watch',function () {
    livereload.listen(postcss(plugins));
    gulp.watch('**/*.css',['css'])
});