Minifies CSS with sourcemaps

.gitignore

@@ -1,5 +1,6 @@
 /node_modules/
 npm-debug.log
 css/*.css
+dist/*.min.css
 .sass-cache
 docs/*

gulpfile.js

@@ -3,11 +3,15 @@
 const gulp = require('gulp');
 const sass = require('gulp-sass');
 const autoprefixer = require('gulp-autoprefixer');
+const cleanCSS = require('gulp-clean-css');
+const sourcemaps = require('gulp-sourcemaps');
+const rename = require('gulp-rename');
 const hologram = require('./gulp-hologram');
 
 const SASS_SOURCES = './sass/*.scss';
-const STYLE_GUIDE_SOURCES = './doc_assets/*.html';
+const STYLE_GUIDE_SOURCES = ['./sass/index.md', './doc_assets/*.html'].concat(SASS_SOURCES);
 const DEST = './css';
+const DIST = './dist';
 
 gulp.task('default', ['sass', 'hologram', 'watch']);
 
@@ -29,4 +33,19 @@ gulp.task('hologram', () => {
 
 gulp.task('watch', () => {
   gulp.watch([STYLE_GUIDE_SOURCES, SASS_SOURCES], ['sass', 'hologram']);
+  gulp.watch(STYLE_GUIDE_SOURCES, ['hologram']);
+  gulp.watch(DEST, ['minify-css']);
+});
+
+gulp.task('minify-css', () => {
+  return gulp.src(DEST + '/*.css')
+    .pipe(sourcemaps.init())
+    .pipe(cleanCSS({debug: true}, details => {
+      console.log(`file: ${details.name}
+  original: ${details.stats.originalSize}
+  minified: ${details.stats.minifiedSize}`);
+    }))
+    .pipe(rename({suffix: '.min'}))
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest(DIST));
 });

package.json

@@ -20,8 +20,11 @@
   "devDependencies": {
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.1",
+    "gulp-clean-css": "^2.3.2",
     "gulp-notify": "^2.2.0",
+    "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.0.0",
+    "gulp-sourcemaps": "^2.3.0",
     "gulp-util": "^3.0.8",
     "map-stream": "0.0.6"
   },