Web Storm 9 Live Edit + Gulp + Preprocessors. How to make it work correctly?

Question

webstorm

Hello. The following problem came up while working with Web Storm 9.
I use preprocessors (stylus, jade and coffeescript) and gulp to build the project.
Scheme:
I edit -> Gulp processes the files and puts the result in the right folder -> I look at the result in the browser
The essence of the problem is that during live edit (mod debugging in Web Storm) I do not see the last change in the file.
For example:
I enter 123 characters into index.jade, but only 12 will be displayed in the browser. If I edit index.html, then everything works correctly.
Gulp compiles the file in ~5ms and in Web Storm settings, Live Edit costs 300ms.
What could be the problem and how to solve it?

Answer 1

I recently started to accustom myself to webstorm
and I use the bundle that I used when I worked with vim , I
use incremental build of the project and reload the page in the browser
, on average, the speed of incremental build is 1-2 milliseconds
, here is an example

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"]);

Answer 2

1. Animated label instead of placeholder - https://codepen.io/sivan/pen/alKwf
2. Regular span (or rather a button) with a cross inside, you can show / hide without the help of JS - https://codepen. io/peiche/pen/ORRkKw
UPD: keep in mind that SCSS is used in the examples, if you take it as a basis, translate it into regular CSS.

Answer 3

https://codepen.io/sevilayha/pen/IdGKH
ну и в целом materializecss.com/forms.html