Добавил postCSS и сборку векторных спрайтов

Author: nicothin

gulpfile.js

@@ -6,6 +6,8 @@ const sass = require('gulp-sass');
 const sassGlob = require('gulp-sass-glob');
 const groupMediaQueries = require('gulp-group-css-media-queries');
 const cleanCSS = require('gulp-cleancss');
+const postcss = require('gulp-postcss');
+const autoprefixer = require('autoprefixer');
 
 const concat = require('gulp-concat');
 const uglify = require('gulp-uglify');
@@ -18,6 +20,9 @@ const del = require('del');
 const plumber = require('gulp-plumber');
 const browserSync = require('browser-sync').create();
 
+const svgstore = require('gulp-svgstore');
+const svgmin = require('gulp-svgmin');
+
 const paths =  {
   src: './src/',              // paths.src
   build: './build/'           // paths.build
@@ -30,12 +35,31 @@ function styles() {
     .pipe(sassGlob())
     .pipe(sass()) // { outputStyle: 'compressed' }
     .pipe(groupMediaQueries())
+    .pipe(postcss([
+      autoprefixer({browsers: ['last 9 version']}),
+    ]))
     .pipe(cleanCSS())
     .pipe(rename({ suffix: ".min" }))
     .pipe(sourcemaps.write('/'))
     .pipe(gulp.dest(paths.build + 'css/'))
 }
 
+function svgSprite() {
+  return gulp.src(paths.src + 'svg/*.svg')
+    .pipe(svgmin(function (file) {
+      return {
+        plugins: [{
+          cleanupIDs: {
+            minify: true
+          }
+        }]
+      }
+    }))
+    .pipe(svgstore({ inlineSvg: true }))
+    .pipe(rename('sprite-svg.svg'))
+    .pipe(gulp.dest(paths.build + 'img/'));
+}
+
 function scripts() {
   return gulp.src(paths.src + 'js/*.js')
     .pipe(plumber())
@@ -76,19 +100,20 @@ function serve() {
 exports.styles = styles;
 exports.scripts = scripts;
 exports.htmls = htmls;
+exports.svgSprite = svgSprite;
 exports.clean = clean;
 exports.watch = watch;
 
 gulp.task('build', gulp.series(
   clean,
-  styles,
-  scripts,
-  htmls
-  // gulp.parallel(styles, scripts, htmls)
+  // styles,
+  // scripts,
+  // htmls
+  gulp.parallel(styles, svgSprite, scripts, htmls)
 ));
 
 gulp.task('default', gulp.series(
   clean,
-  gulp.parallel(styles, scripts, htmls),
+  gulp.parallel(styles, svgSprite, scripts, htmls),
   gulp.parallel(watch, serve)
 ));

package.json

@@ -8,6 +8,7 @@
     "start": "gulp"
   },
   "devDependencies": {
+    "autoprefixer": "^8.5.1",
     "babel-core": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "browser-sync": "^2.18.13",
@@ -18,11 +19,14 @@
     "gulp-concat": "^2.6.1",
     "gulp-group-css-media-queries": "^1.2.0",
     "gulp-plumber": "^1.1.0",
+    "gulp-postcss": "^7.0.1",
     "gulp-rename": "^1.2.2",
     "gulp-replace": "^1.0.0",
     "gulp-sass": "^4.0.1",
     "gulp-sass-glob": "^1.0.8",
     "gulp-sourcemaps": "^2.6.1",
+    "gulp-svgmin": "^1.2.4",
+    "gulp-svgstore": "^6.1.1",
     "gulp-uglify": "^3.0.0"
   },
   "dependencies": {