browser-sync-webpack-plugin: CSS injecting doesn't work, the page just reloads

Here is my gulpfile:

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import del from 'del';
import source from 'vinyl-source-stream';
import runSequence from 'run-sequence';
import {reload} from 'browser-sync';
import historyApiFallback from 'connect-history-api-fallback';
import webpack from 'webpack-stream';
import BrowserSyncPlugin from 'browser-sync-webpack-plugin';

const AUTOPREFIXER_BROWSERS = [
  'ie >= 10',
  'ie_mob >= 10',
  'ff >= 30',
  'chrome >= 34',
  'safari >= 7',
  'opera >= 23',
  'ios >= 7',
  'android >= 4.4',
  'bb >= 10'
];

const $ = gulpLoadPlugins()
  , env = 'dev';

global.isWatching = false;

gulp.task('clean:dev', del.bind(null, ['.tmp'], {dot: true}));
gulp.task('clean:dist', del.bind(null, ['dist'], {dot: true}));

gulp.task('webpack', () => {
  return gulp.src('./app/scripts/app.jsx')
    .pipe(webpack({
      node: {
        net: "empty",
        dns: "empty"
      },
      debug: true,
      devtool: 'source-map',
      watch: true,
      module: {
        loaders: [
          { test: /\.jsx?$/, loader: 'babel-loader?stage=0', exclude: /node_modules/ }
        ]
      },
      output: {
        filename: "bundle.js"
      },
      resolve: {
        modulesDirectories: [
          'node_modules',
          'app/scripts'
        ],
        extensions: [ "", '.js', '.jsx' ]
      },
      plugins: [
        new BrowserSyncPlugin({
          port: 8000,
          open: false,
          minify: false,
          host: "127.0.0.1",
          server: {
            baseDir: ["app", ".tmp"],
            middleware: [ historyApiFallback() ]
          }
        })
      ]
    }))
    .pipe(gulp.dest('.tmp/scripts/'))
    .pipe(reload({stream: true}));
});

gulp.task('imagemin', () => {
  return gulp.src('app/images/*')
    .pipe($.imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}]
    }))
    .pipe(gulp.dest('dist/images'));
});

gulp.task('copy', () => {
  return gulp.src(['app/*.txt', 'app/*.ico'])
    .pipe(gulp.dest('dist'));
});

gulp.task('bundle', ['webpack'], () => {
  const assets = $.useref.assets();
  const jsFilter = $.filter(['**/*.js']);
  const htmlFilter = $.filter(['*.html']);

  return gulp.src('app/*.html')
    .pipe(assets)
    .pipe($.rev())
    .pipe(jsFilter)
    .pipe($.uglify({mangle: false}))
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe($.autoprefixer({
      browsers: ['last 5 versions']
    }))
    .pipe(cssFilter.restore())
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe($.revReplace())
    .pipe(gulp.dest('dist'))
    .pipe($.size());
});

gulp.task('sass', () => {
  return gulp.src([
    'app/scss/all.scss'
  ])
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      precision: 10
    }).on('error', $.sass.logError))
    .pipe($.cssInlineImages({
      webRoot: 'app/scss/mdl/'
    }))
    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
    //.pipe($.if('*.css', $.csso()))
    //.pipe($.concat('all.min.css'))
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest('.tmp/css'))
    .pipe(reload({stream: true}))
    .pipe($.size({title: 'styles'}));
});

gulp.task('setWatch', () => {
  global.isWatching = true;
});

gulp.task('watch', ['setWatch'], () => {
  gulp.watch("app/scss/**/*.scss", ['sass']);
  gulp.watch(['app/*.html'], reload);
});

gulp.task('csscomb', function() {
  return gulp.src('app/scss/app.scss')
    .pipe($.csscomb())
    .pipe(gulp.dest('app/scss'))
});

gulp.task('serve', ['clean:dev'], () => {
  runSequence(
    ['webpack', 'watch', 'sass']
  )
});

gulp.task('build', ['clean:dev', 'clean:dist'], () => {
  runSequence(
    ['webpack', 'imagemin', 'copy', 'bundle']
  )
});

gulp.task('default', ['serve']);

Browsersync starts, but it doesn’t inject CSS, the page just reloads.

Did I do smth wrong?