build(): Better image compression settings & introduce svgs optimization (#16)

* Use imagemin-mozjpeg plugin for better jpeg compression

* Increase png compression

* Introduce new task for svg optimization

Author: imklau

build/build.js

@@ -44,6 +44,13 @@ gulp.task('font:build', require('./tasks/font/build'))
 gulp.task('image:clean', require('./tasks/image/clean'))
 gulp.task('image:build', require('./tasks/image/build'))
 
+/*
+|--------------------------------------------------------------------------
+| Svg Tasks
+|--------------------------------------------------------------------------
+*/
+gulp.task('svg:build', require('./tasks/svg/build'))
+
 /*
 |--------------------------------------------------------------------------
 | JavaScript Tasks
@@ -65,6 +72,7 @@ gulp.task('javascript:build', ['javascript:clean'], require('./tasks/javascript/
 gulp.task('html', ['html:clean', 'html:build'])
 gulp.task('font', ['font:clean', 'font:build'])
 gulp.task('image', ['image:clean', 'image:build'])
+gulp.task('svg', ['svg:build'])
 gulp.task('sass', ['sass:clean', 'sass:lint', 'sass:build'])
 gulp.task('javascript', ['javascript:clean', 'javascript:lint', 'javascript:build'])
 
@@ -108,6 +116,9 @@ gulp.task('watch', ['sync'], () => {
   gulp.watch('resources/assets/images/**/*.{jpg,jpeg,png,gif,svg}', { cwd: '../' }, ['image', reload])
     .on('error', message.error('WATCH: Images'))
 
+  gulp.watch('src/svg/**/*.svg', { cwd: '../' }, ['svg', reload])
+    .on('error', message.error('WATCH: SVG'))
+
   gulp.watch(['src/**/*.html', 'resources/json/**/*.json'], { cwd: '../' }, ['html', reload])
     .on('error', message.error('WATCH: Views'))
 })
@@ -122,4 +133,4 @@ gulp.task('watch', ['sync'], () => {
 | tasks and completely building the whole project.
 |
 */
-gulp.task('default', ['sass', 'javascript', 'font', 'image', 'html'])
+gulp.task('default', ['sass', 'javascript', 'font', 'image', 'svg', 'html'])

build/tasks/image/build.js

@@ -3,12 +3,19 @@ const isdev = require('isdev')
 const gulp = require('gulp')
 const gulpif = require('gulp-if')
 const imagemin = require('gulp-imagemin')
+const imageminMozjpeg = require('imagemin-mozjpeg')
+const imageminPngquant = require('imagemin-pngquant')
 
 const message = require('../../lib/message')
 
 module.exports = () => {
   return gulp.src('../resources/assets/images/**/*.{jpg,jpeg,png,gif,svg}')
-    .pipe(gulpif(!isdev, imagemin()))
+    .pipe(gulpif(!isdev, imagemin([
+      imageminMozjpeg({quality: 74}),
+      imageminPngquant()
+    ], {
+      verbose: true
+    })))
     .on('error', message.error('IMAGE: Minification'))
     .pipe(gulp.dest('../public/images'))
 }

build/tasks/svg/build.js

@@ -0,0 +1,24 @@
+const gulp = require('gulp')
+const svgmin = require('gulp-svgmin')
+
+const message = require('../../lib/message')
+
+module.exports = () => {
+  return gulp.src('../src/svg/**/*.svg')
+    .pipe(svgmin({
+      plugins: [{
+        removeViewBox: false
+      }, {
+        removeComments: false
+      }, {
+        cleanupNumericValues: {
+          floatPrecision: 2
+        }
+      }],
+      js2svg: {
+        pretty: true
+      }
+    }))
+    .on('error', message.error('SVG: Optimization'))
+    .pipe(gulp.dest('../src/svg'))
+}

package.json

@@ -44,6 +44,9 @@
     "gulp-sass": "^3.1.0",
     "gulp-stylelint": "^5.0.0",
     "gulp-uglify": "^3.0.0",
+    "gulp-svgmin": "^2.2.0",
+    "imagemin-mozjpeg": "^8.0.0",
+    "imagemin-pngquant": "^7.0.0",
     "isdev": "^1.0.1",
     "rollup-plugin-babel": "^3.0.2",
     "rollup-plugin-commonjs": "^8.2.1",

src/svg/.gitkeep

@@ -0,0 +1 @@
+