Gulp BrowserSync CSS not refreshing - html

Question

Html file is synchronize and working, but CSS file not. Gulp and Browser sync are working too and not giving any error. I've read a documentation from official BrowserSync website but it doesn't work. Please help me. Here's my gulpfile.js file:
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
var gulp = require('gulp');
// POST CSS PLUGINS
var postcss = require('gulp-postcss');
var mixins = require('postcss-mixins');
var postcssimport = require('postcss-partial-import');
var nested = require('postcss-nested');
var vars = require('postcss-simple-vars');
var lost = require('lost');
var rucksack = require('rucksack-css');
var cssnano = require('cssnano');
var autoprefixer = require('autoprefixer');
var mqpacker = require('css-mqpacker');
// OTHER PLUGINS
var pug = require('gulp-pug');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');
// POSTCSS TASK
gulp.task('css', function() {
var plugins = [
autoprefixer({
browsers: ['last 2 version']
}),
rucksack({
alias: false,
easings: false,
inputPseudo: false
}),
lost,
mixins,
postcssimport,
nested,
vars,
mqpacker
// cssnano uncomment this when you need to minify .css files
];
return gulp.src('app/styles/*.css')
.pipe(plumber())
.pipe(postcss(plugins))
.pipe(plumber.stop())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
});
// PUG TASK
gulp.task('pug', function(){
return gulp.src('app/pug/*.pug')
.pipe(plumber())
.pipe(pug({
pretty: true // Don't minify .html files
}))
.pipe(plumber.stop())
.pipe(gulp.dest('app'))
});
// IMAGE MINIFICATION TASK
gulp.task('img-min', function() {
gulp.src('app/images/**/*')
.pipe(imagemin({
interlaced: true,
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('dist/img'))
});
// BROWSER SYNC TASK
gulp.task('browserSync', ['css'], function() {
browserSync.init({
server: './app',
open: false,
notify: false,
logPrefix: 'ʕ•ᴥ•ʔ'
});
});
// WATCHING FILE TASK
gulp.task('watch', ['browserSync', 'css', 'pug', 'img-min'], function() {
gulp.watch("app/*.html").on('change', browserSync.reload);
gulp.watch("app/styles/*.css", ['css'], browserSync.reload);
gulp.watch('app/pug/**/*.pug', ['pug']);
});
gulp.task('default', ['watch']);