Web Storm 9 Live Edit + Gulp + Препроцессоры. Как заставить работать правильно?

Question

[Виталий Игоревич]

Здравствуйте. Выявилась следующая проблема при работе с Web Storm 9.

Я использую препроцессоры (stylus, jade и coffeescript), и gulp для сборки проекта.

Схема:
Вношу правку -> Gulp обрабатывает файлы и кладет результат в нужную папку -> я смотрю результат в браузере
Суть проблемы в том, что при live edit (дебаг мод в Web Storm) у меня не отображается последнее изменение в файле.

Например:
Ввожу в index.jade символы 123, но в браузере отобразится только 12. Если редактировать index.html, то все работает корректно.

Gulp компилирует файл за ~ 5мс, а в настройках Web Storm, Live Edit стоит 300мс.

В чем может быть проблема и как ее решить?

Answer 1

[Алексей П]

я недавно начал приучать себя к webstorm
и использую связку, которую использовал, когда работал с vim
используется инкрементная сборка проекта и перезагрузка странички браузере
в среднем скорость инкрементной сборки 1-2 милисекунды

вот пример

var gulp = require("gulp"),
    coffee = require("gulp-coffee"),
    stylus = require("gulp-stylus"),
    sourcemaps = require("gulp-sourcemaps"),
    connect = require("gulp-connect"),
    //karma = require("gulp-karma"),
    jade = require("gulp-jade"),
    gutil = require("gulp-util");

//var testFiles = ["app/tests/spec/test.spec.js"];

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

//gulp.task("test", function () {
//  return gulp.src(testFiles)
//    .pipe(karma({
//      configFile: 'karma.conf.js',
//      action: "run"
//    }))
//    .on("error", gutil.log)
//});

gulp.task("jade", function () {
  gulp
    .src("./app/assets/templates/*.jade")
    .pipe(jade({pretty: true})).on("error", gutil.log)
    .pipe(gulp.dest("./app/build"))
    .pipe(connect.reload())
});

gulp.task("coffee", function () {
  gulp
    .src("./app/assets/coffee/*.coffee")
    .pipe(sourcemaps.init())
    .pipe(coffee({bare: true})).on("error", gutil.log)
    .pipe(sourcemaps.write("./maps"))
    .pipe(gulp.dest("./app/build/js"))
    .pipe(connect.reload())
});

gulp.task("stylus", function () {
  gulp
    .src("./app/assets/stylus/styles.styl")
    .pipe(stylus({}))
    .pipe(gulp.dest("./app/build/css/"))
    .pipe(connect.reload())
});

gulp.task("watch", function () {
  gulp.run("jade");
  gulp.run("coffee");
  gulp.run("stylus");
  //gulp.run("test");
  gulp.watch("./app/assets/coffee/*.coffee", ["coffee"]);
  gulp.watch("./app/assets/templates/*.jade", ["jade"]);
  gulp.watch("./app/assets/stylus/*.styl", ["stylus"]);
});

gulp.task("default", ["connect","watch"]);