How to set up gulp with phpstorm and OpenServer?

Question

phpstorm

Hello.
Could you please provide instructions on how to get phpstorm and gulp to work together?
Now I have configured compilation - "autoprefixing" - minification of CSS, compression and "spriting" of images, compression of JS ...
but the fact is that phpstorm saves files somehow imperceptibly for gulp, and all tasks, on the watch event, only work then when I open a browser or something else, those when the focus leaves the IDE window, is there a way to defeat this? (PS is used to not clicking ctrl+s anymore)
And can you tell me how to set up gulp-liverolad in conjunction with OpenServer?
Ideally 2 monitors (IDE + browser)
changes in the IDE (monitor_1) would immediately reload the page of the browser (monitor_2)
Thank you in advance for your help.
here is my sample gulp

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    postcss = require('gulp-postcss'),
    autoprefixer = require('autoprefixer'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    cssnano = require('gulp-cssnano'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    svgstore = require('gulp-svgstore'),
    svgmin = require('gulp-svgmin');
var path = {
    build: { //Тут мы укажем куда складывать готовые после сборки файлы
        js: '_js/',
        css: '_css/',
        img: '_img/',
    },
    src: { //Пути откуда брать исходники
        js: ['_js/**/*.js', '!_js/**/*.min.js', '!_js/**/*-min.js'],//В стилях и скриптах нам понадобятся только main файлы
        style: '_css/**/*.scss',
        img: '_img/src/**/*.*', //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов
        svg: ['_img/*.svg', '!_img/_img.svg'] //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов
    },
    watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать
        js: ['_js/**/*.js', '!_js/**/*.min.js', '!_js/**/*-min.js'],
        style: '_css/**/*.scss',
        img: '_img/src/**/*.*',
        svg: ['_img/*.svg', '!_img/_img.svg']
    },
    clean: './build'
};
gulp.task('js:build', function () {
    gulp.src(path.src.js)
        .pipe(sourcemaps.init()) //Инициализируем sourcemap
        .pipe(uglify()).on("error", function () {
            console.log('FUCK JS');
        }) //Сожмем наш js
        .pipe(rename(function (path) {
            if (path.extname === '.js') {
                path.basename += '.min';
            }
        }))
        .pipe(sourcemaps.write()) //Пропишем карты
        .pipe(gulp.dest(path.build.js)) //Выплюнем готовый файл в build
});
gulp.task('style:build', function () {
    gulp.src(path.src.style) //Выберем наш main.scss
        .pipe(sourcemaps.init()) //То же самое что и с js
        .pipe(sass()).on("error", function () {
            console.log('FUCK CSS');
        })  //Скомпилируем
        .pipe(postcss([autoprefixer({browsers: ['last 14 version']})]))
        .pipe(cssnano({autoprefixer: false, convertValues: false, zindex: false})) //Сожмем
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.build.css)) //И в build
});
gulp.task('svg:build', function () {
    return gulp
        .src(path.src.svg)
        .pipe(svgmin(function (file) {
            //var prefix = path.basename(file.relative, path.extname(file.relative));
            return {
                plugins: [{
                    cleanupIDs: {
                        prefix: '-',
                        minify: false
                    }
                }]
            }
        }))
        .pipe(svgstore())
        .pipe(gulp.dest(path.build.img));
});

gulp.task('build', [
    'js:build',
    'style:build',
    'svg:build'
]);

gulp.task('watch', function () {
    watch([path.watch.style], function (event, cb) {
        gulp.start('style:build');
    });
    watch(path.watch.js, function (event, cb) {/*тут уже в параметре массив*/
        gulp.start('js:build');
    });
    watch(path.watch.svg, function (event, cb) {/*тут уже в параметре массив*/
        gulp.start('svg:build');
    });
});

gulp.task('default', ['build', 'watch']);

Answer 1

for normal file watching use gulp-watch plugin instead of standard watch method, for liveload use gulp-browserify