serii81
@serii81
Я люблю phр...

Как правильно настроить gulp + ftp+phpstorm?

Добрый день.
Сразу скажу, что я уже обращался к разработчиками phpstorm, и они ответили, что пока не знают как решить эту проблему.
Сначала опишу ситуацию.

Я работаю в phpstorm и использую gulp + webpack.
Вот сам gulpfile:
"use strict";
const gulp = require("gulp");
const webpack = require("webpack-stream");
const sass = require("gulp-sass");
const autoprefixer = require("gulp-autoprefixer");
const sourcemaps = require("gulp-sourcemaps");
const plumber = require("gulp-plumber");
const wait = require("gulp-wait"),
  notify = require("gulp-notify");
const browserSync = require("browser-sync");
const log = require("fancy-log");
let isDev = true;
let webpackConfig = {
  output: {
    filename: "webpack.js"
  },
  watch: false,
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  debug: true,
                  corejs: 3,
                  useBuiltIns: "usage"
                }
              ]
            ]
          }
        }
      }
    ]
  },
  mode: isDev ? "development" : "production",
  devtool: isDev ? "eval-source-map" : "none"
};
gulp.task("webpack", function () {
  return gulp
    .src("assets/js/src/main.js")
    .pipe(webpack(webpackConfig))
    .pipe(gulp.dest("assets/js/dist/"))
    .pipe(browserSync.stream());
});
gulp.task("scss", function () {
  return gulp
    .src("assets/scss/my.scss")
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(wait(500))
    .pipe(
      sass().on(
        "error",
        notify.onError(function (error) {
          return (
            "An error occurred while compiling sass.\nLook in the console for details.\n" +
            error
          );
        })
      )
    )
    .pipe(
      autoprefixer({
        cascade: false
      })
    )
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("assets/css/"))
    .pipe(browserSync.stream());
});
gulp.task("watch", function () {
  browserSync.init({
    proxy: {
      target: "http://visitrosolina.cf",
      ws: true
    },
    reloadDelay: 1000,
    notify: true,
    open: false
  });
  gulp.watch("**/*.html").on("change", browserSync.reload);
  gulp.watch("**/*.php").on("change", browserSync.reload);
  gulp.watch("**/*.css").on("change", browserSync.reload);
  gulp.watch("assets/js/dist/webpack.js").on("change", browserSync.reload);
  gulp.watch("assets/js/custom-jquery.js").on("change", browserSync.reload);
  gulp.watch("assets/scss/**/*.scss", gulp.series("scss"));
  gulp.watch("assets/js/src/**/*.js", gulp.series("webpack"));
});
gulp.task("default", gulp.series("webpack", "scss", gulp.parallel("watch")));


А еще работаю через ftp. В основном разрабатываю сайты на wordpress и в редакторе открыта только тема.
lYCyA1J.png

Так вот, в чем проблема?
Я запускаю gulp, и если меняю файлы scss или js, которые находятся
tqBPdDU.png
то есть, работают с webpack, то эти файлы после изменения начинают загружаться на сервер, но файлы my.css или webpack.css, которые являются результатом компиляции, не загружаются вслед за измененными.

То есть, изменил base.scss, и только он и загрузился, а my.css - нет.

Разработчики посоветовали использовать горячую клавишу reload all from disk.

И теперь, когда я меняю scss файл, я должен вызвать комбинацию, подождать пока файл загрузиться, потом вызвать еще раз и тогда загрузиться my.scss. Такое же поведение для файлов js.

В vscode такой проблемы нет.

Там есть watcher
"watcher": {
    "files": "**/*.{php,scss,css,css.map,js}",
    "autoUpload": true,
    "autoDelete": true
  },


И еще, в gulpfile я ставлю reloadDelay 1000, можно кака-то перезагрузить браузер, после того, как все файлы были отправлены?

Заранее благодарен.
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы