Как вносить изменения в скомпиллированный файл sass?

#css #css3 #gulp #sass

"use strict";

var gulp = require("gulp");
var rename = require("gulp-rename");
var plumber = require("gulp-plumber");
var sourcemap = require("gulp-sourcemaps");
var sass = require("gulp-sass");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var csso = require("gulp-csso");
var imagemin = require("gulp-imagemin");
var webp = require("gulp-webp");
var svgstore = require("gulp-svgstore");
var posthtml = require("gulp-posthtml");
var include = require("posthtml-include");
var del = require("del");
var server = require("browser-sync");

gulp.task("clean", function () {
  return del("build");
});

gulp.task("copy", function () {
  return gulp.src([
    "source/css/**",
    "source/fonts/**/*.{woff,woff2}",
    "source/img/**",
    "source/js/**"
 ], {
 base: "source"
 })
 .pipe(gulp.dest("build"));
});

gulp.task("css", function () {
  return gulp.src("source/sass/style.scss")
    .pipe(plumber())
    .pipe(sourcemap.init())
    .pipe(sass())
    .pipe(postcss([
      autoprefixer()
    ]))
    .pipe(csso())
    .pipe(rename("style.min.css"))
    .pipe(sourcemap.write("."))
    .pipe(gulp.dest("build/css"))
    .pipe(server.stream());
});

gulp.task("sprite", function () {
 return gulp.src("source/img/sprite/*.svg")
  .pipe(svgstore({
    inlineSvg: true
  }))
  .pipe(rename("sprite.svg"))
  .pipe(gulp.dest("build/img"));
});

gulp.task("html", function () {
 return gulp.src("source/*.html")
  .pipe(posthtml([
    include()
  ]))
 .pipe(gulp.dest("build"));
});

gulp.task("server", function () {
  server.init({
    server: "build"
  });

  gulp.watch("source/sass/**/*.{scss,sass}", gulp.series("css", "refresh"));
  gulp.watch("source/img/sprite/*.svg", gulp.series("sprite", "html", "refresh"));
  gulp.watch("source/*.html", gulp.series("html", "refresh"));
});

gulp.task("refresh", function (done) {
  server.reload();
  done();
});

gulp.task("images", function () {
  return gulp.src("source/img/**/*.{png,jpg,svg}")
  .pipe(imagemin([
    imagemin.optipng({optimizationLevel: 3}),
    imagemin.jpegtran({progressive: true}),
    imagemin.svgo()
  ]))

  .pipe(gulp.dest("source/img"));
});

gulp.task("webp", function () {
  return gulp.src("source/img/**/*.{png,jpg}")
  .pipe(webp({quality: 90}))
  .pipe(gulp.dest("source/img"));
});

gulp.task("build", gulp.series(
  "clean",
  "copy",
  "css",
  "sprite",
  "html"
));

gulp.task("start", gulp.series("build", "server"));




Я написала стили в sass, командой npm run build стили скомпиллировались. А дальше
я хочу внести изменения в стили и чтобы эти изменения увидеть мне нужно каждый раз
выполнять команду npm run build?
    

Ответы

Ответ 1

Для этого есть livereload https://www.npmjs.com/package/gulp-livereload

И еще желательно поставить browser-sync

Нужно только сконфигурировать. после конфигурации можно писать код и он будет тут
же отображаться. Не рекомендую пользоваться такими костылями как Koala и т.д., особенно
если вы хотите профессионально работать разработчиком.  

Вот пример gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');

var reload      = browserSync.reload;

gulp.task('sass', function () {
  gulp.src('./media/css/mainstyle.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(plumber())
    .pipe(reload({stream:true}))
    .pipe(gulp.dest('./media/css'));
});

gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: "./"
    },
    port: 8080,
    open: true,
    notify: false
  });
});

gulp.task('html', function(){
  gulp.src('./index.html')
  .pipe(reload({stream:true}));
});

gulp.task('server', function () {
  gulp.watch('./media/css/mainstyle.scss', ['sass']);
  gulp.watch('./index.html', ['html']);
});

gulp.task('default', ['server', 'browserSync']);