😽 Добавляет сборку sass в gulp

Author: Keks

gulpfile.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var gulp = require("gulp");
+var sass = require("gulp-sass");
+var plumber = require("gulp-plumber");
+var postcss = require("gulp-postcss");
+var autoprefixer = require("autoprefixer");
+var server = require("browser-sync").create();
+
+gulp.task("style", function() {
+  gulp.src("sass/style.scss")
+    .pipe(plumber())
+    .pipe(sass())
+    .pipe(postcss([
+      autoprefixer({browsers: [
+        "last 2 versions"
+      ]})
+    ]))
+    .pipe(gulp.dest("css"))
+    .pipe(server.stream());
+});
+
+gulp.task("serve", ["style"], function() {
+  server.init({
+    server: ".",
+    notify: false,
+    open: true,
+    cors: true,
+    ui: false
+  });
+
+  gulp.watch("sass/**/*.{scss,sass}", ["style"]);
+  gulp.watch("*.html").on("change", server.reload);
+});

package.json

@@ -4,14 +4,26 @@
   "private": true,
   "description": "Личный проект «Мишка» от HTML Academy",
   "devDependencies": {
+    "autoprefixer": "6.7.x",
+    "browser-sync": "2.18.12",
+    "gulp": "3.9.1",
+    "gulp-plumber": "1.1.0",
+    "gulp-postcss": "6.4.0",
+    "gulp-sass": "3.1.0",
     "@htmlacademy/editorconfig-cli": "1.x"
   },
   "scripts": {
-    "test": "editorconfig-cli"
+    "test": "editorconfig-cli",
+    "build": "gulp style",
+    "start": "gulp serve"
   },
   "editorconfig-cli": [
     "*.html",
-    "*.json"
+    "*.json",
+    "*.js",
+    "js/**/*.js",
+    "img/**/*.svg",
+    "sass/**/*.{sass,scss}"
   ],
   "engines": {
     "node": "6.10"

sass/README

@@ -0,0 +1,11 @@
+Папка для файлов препроцессора SASS.
+
+http://sass-lang.com
+
+--
+
+Структура файлов:
+
+sass/
+| - style.scss
+| - [другие *.scss файлы]