images and svg-sprite

gulpfile.js

@@ -8,6 +8,12 @@ const cssnano = require('gulp-cssnano');
 const rename = require('gulp-rename');
 const gulpIf = require('gulp-if');
 const del = require('del');
+const imagemin = require('gulp-imagemin');
+const pngquant = require('imagemin-pngquant');
+const svgstore = require('gulp-svgstore');
+const svgmin = require('gulp-svgmin');
+const path = require('path');
+const cheerio = require('gulp-cheerio');
 
 // Запуск `NODE_ENV=production gulp [задача]` приведет к сборке без sourcemaps
 const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev';
@@ -32,7 +38,7 @@ gulp.task('copy:css', function() {
   console.log('---------- копирование CSS');
   return gulp.src('src/css/*.css', {since: gulp.lastRun('copy:css')})
     .pipe(cssnano({
-      discardUnused: false // не удалять несипользованные конструкции
+      discardUnused: false // не удалять неиспользованные конструкции
     }))
     .pipe(rename(function (path) {
       path.extname = '.min.css'
@@ -41,8 +47,39 @@ gulp.task('copy:css', function() {
     .pipe(gulp.dest('build/css'));
 });
 
+// Копирование и оптимизация изображений
+gulp.task('img', function () {
+  return gulp.src('src/img/*.{jpg,jpeg,gif,png,svg}')
+    .pipe(imagemin({
+        progressive: true,
+        svgoPlugins: [{removeViewBox: false}],
+        use: [pngquant()]
+    }))
+    .pipe(gulp.dest('build/img'));
+});
+
+// Сборка SVG-спрайта
+gulp.task('svgstore', function () {
+  return gulp
+    .src('src/img/svg_sprite/*.svg')
+    .pipe(svgmin(function (file) {
+      return {
+        plugins: [{
+          cleanupIDs: {
+            minify: true
+          }
+        }]
+      }
+    }))
+    .pipe(svgstore({ inlineSvg: true }))
+    .pipe(cheerio(function ($) {
+      $('svg').attr('style',  'display:none');
+    }))
+    .pipe(gulp.dest('build/img'));
+});
+
 // Очистка папки сборки
-gulp.task('clean:build', function () {
+gulp.task('clean', function () {
   return del([
     'build/**/*',
     '!build/readme.md'
@@ -53,15 +90,15 @@ gulp.task('clean:build', function () {
 
 // Сборка
 gulp.task('build', gulp.series(
-  'clean:build',
-  gulp.parallel('less', 'copy:css')
+  'clean',
+  gulp.parallel('less', 'copy:css', 'img', 'svgstore')
 ));
 
 
 
 
 // Слежение за LESS
-gulp.watch('src/less/**/*.less', gulp.series('less'));
+// gulp.watch('src/less/**/*.less', gulp.series('less'));
 
 // Слежение за добавочными CSS
-gulp.watch('src/css/*.css', gulp.series('copy:css'));
+// gulp.watch('src/css/*.css', gulp.series('copy:css'));

package.json

@@ -10,11 +10,16 @@
   "devDependencies": {
     "del": "^2.2.0",
     "gulp": "github:gulpjs/gulp#4.0",
+    "gulp-cheerio": "^0.6.2",
     "gulp-cssnano": "^2.1.1",
     "gulp-debug": "^2.1.2",
     "gulp-if": "^2.0.0",
+    "gulp-imagemin": "^2.4.0",
     "gulp-less": "^3.0.5",
     "gulp-rename": "^1.2.2",
-    "gulp-sourcemaps": "^1.6.0"
+    "gulp-sourcemaps": "^1.6.0",
+    "gulp-svgmin": "^1.2.1",
+    "gulp-svgstore": "^5.0.5",
+    "imagemin-pngquant": "^4.2.0"
   }
 }

src/img/readme.md

+Изображения из корня этой папки будут скопированы в папку сборки и оптимизированы. Подпапки при копировании игнорируются.

src/img/svg_sprite/readme.md

+Из SVG-файлов этой папки будет собран спрайт — файл svg_sprite.svg в папке сборки, подпапке с изображениями.