Gulp-Sass: изменения не переносятся на фронтэнд - PullRequest
Новая
       48

Gulp-Sass: изменения не переносятся на фронтэнд

0 голосов
/ 03 февраля 2019

С моей конфигурацией gulp-sass происходит следующее:

Когда я выполняю задачу, создается файл .min.css, но изменения не видны во внешнем интерфейсе.Только после того, как я вручную захожу в .min.css и сохраняю их, изменения во внешнем интерфейсе становятся видимыми.

Такое странное поведение никогда не случалось со мной.Может ли кто-нибудь помочь мне с этим?

Вот мой gulpfile.js: 

    // Load plugins
    const autoprefixer = require("gulp-autoprefixer");
    const browsersync = require("browser-sync").create();
    const cleanCSS = require("gulp-clean-css");
    const gulp = require("gulp");
    const header = require("gulp-header");
    const plumber = require("gulp-plumber");
    const rename = require("gulp-rename");
    const sass = require("gulp-sass");
    const pkg = require("./package.json");

    sass.compiler = require('node-sass');


    // Copy third party libraries from /node_modules into /vendor
    gulp.task("vendor", function(cb) {
      // Bootstrap
      gulp
        .src([
          "./node_modules/bootstrap/dist/**/*",
          "!./node_modules/bootstrap/dist/css/bootstrap-grid*",
          "!./node_modules/bootstrap/dist/css/bootstrap-reboot*"
        ])
        .pipe(gulp.dest("./files/theme/vendor/bootstrap"));

      // jQuery
      gulp
        .src([
          "./node_modules/jquery/dist/*",
          "!./node_modules/jquery/dist/core.js"
        ])
        .pipe(gulp.dest("./vendor/jquery"));

      cb();
    });


    function css(){
        return gulp.src('./files/theme/scss/*.scss')
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(
          autoprefixer({
            browsers: ["last 2 versions"],
            cascade: false
          })
        )
        .pipe(gulp.dest('./files/theme/css'))
        .pipe(
          rename({
            suffix: ".min"
          })
        )
        .pipe(cleanCSS())
        .pipe(gulp.dest("./files/theme/css"))
        .pipe(browsersync.stream());
    }

    // Tasks
    gulp.task("css", css);

    // BrowserSync
    function browserSync(done) {
      browsersync.init({
        server: {
          baseDir: "./files/theme"
        }
      });
      done();
    }

    // BrowserSync Reload
    function browserSyncReload(done) {
      browsersync.reload();
      done();
    }

    // Watch files
    function watchFiles() {
      gulp.watch("./files/theme/scss/**/*", css);
      gulp.watch("./files/theme/**/*.html", browserSyncReload);
      gulp.watch("./templates/*.html5", browserSyncReload);
    }

    gulp.task("default", gulp.parallel("vendor", css));

    // dev task
    gulp.task("dev", gulp.parallel(watchFiles, browserSync));
...