Как при изменении любых файлов стилей автоматически перекомпилировать основной фаил стилей в GULP?

Question

[Алёна Джукич]

Есть таск в gulp, отвечающий за работу с файлами стилей, привожу его ниже:

// config.json

{
***
  "scss": {
    "dev": {
      "src": ["./src/app/css_source/**/*.scss", "!./src/app/css_source/res/", "!./src/app/css_source/res/**/*"],
      "dest": "./src/app/css/"
    }
  }
***
}

// css.js
"use strict";

const config        = require("../config.json");

const gulp          = require("gulp");
const watch         = require("gulp-watch");
const browserSync   = require("browser-sync");
const sass          = require("gulp-sass");
const autoprefixer  = require("gulp-autoprefixer");
const sourcemaps    = require("gulp-sourcemaps");

const conf  = {};
conf.src    = config.scss.dev.src;
conf.dest   = config.scss.dev.dest;
conf.autopref_config = config.autoprefixer;

const cssTask = () => {
  return gulp.src(conf.src)
    .pipe(watch(conf.src))
    .pipe(sourcemaps.init())
      .pipe(sass())
      .pipe(autoprefixer(conf.autopref_config))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(conf.dest))
    .pipe(browserSync.stream());
};

gulp.task("css", cssTask);
module.exports = cssTask;

В данный момент все файлы стилей импортятся в один главный фаил, который, собственно, и подключён к проекту. Проблема в том, что стили могут быть применены только после того, как произойдёт перекомпиляция главного файла. А сейчас он перекомпилируется только если изменяется он сам. Как сделать так, чтобы при изменении любого файла стилей происходила перекомпиляция главного файла?
P.S. Надеюсь понятно получилось объяснить свою проблему :с

Answer 1

[Алёна Джукич]

Нашла ответ на свой вопрос. Кому интересно - привожу моё решение. Вариант наеврное такой себе и требует доработки, но лучше чем было.

// css.js

const cssTask = () => {
  return gulp.watch(conf.src).on("change", () => {
    return gulp.src("./src/app/css_source/main.scss")
      .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer(conf.autopref_config))
      .pipe(sourcemaps.write())
      .pipe(gulp.dest(conf.dest))
      .pipe(browserSync.stream());
  });
};

P.S. Помогло чтение gulp-watch и chokidar :3

Answer 2

[Никита Кит]

вообще при таком конфиге уже должен проводить перекомпиляцию при изменении, ведь src указывает на все .scss, не только на main.
У меня с yeo-yeogurt такая же хня порой происходит. Компилит при изменении любого файла, но если добавляешь в main.scss новый import , он перестаёт компилировать файлы, попадающие под регулярку /**/*.scss и начинает перекомпилировать только при пересохранении main. Помогает в таком случае только перезапуск таска

Comments

[Алёна Джукич]

Рекомпиляция производится, но только для изменённого файла. Основной при этом не затрагивается (потому что в нём-то никаких изменений не произошло)...

[Никита Кит]

Алёна Джукич: вот что, поставь yeo man webapp и посмотри как там написан gulpfile. я всегда его генерирую автоматически - самому писать лень и долго yeoman.io
Я вот никогда не писал эти конфиги сам. Только в исключительных случаях выкачивания исходников гитом с сервера и доработки готового сайта