Add image compression

.gitignore

@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+node_modules/

build-script/Gulpfile.js

@@ -13,7 +13,7 @@
  * and npm modules
  */
 var pkg				= require('./package.json');
-var gulp 			= require('gulp');
+var gulp			= require('gulp');
 var gulpif 			= require('gulp-if');
 var srcmaps 		= require('gulp-sourcemaps');
 var sass 			= require('gulp-sass');
@@ -27,7 +27,9 @@ var stripDebug 		= require('gulp-strip-debug');
 var uglify 			= require('gulp-uglify');
 var order 			= require('gulp-order');
 var convert			= require('gulp-utf8-convert');
-var headerfooter = require('gulp-headerfooter');
+var headerfooter 	= require('gulp-headerfooter');
+var imagemin 		= require('gulp-imagemin');
+var pngquant 		= require('imagemin-pngquant');
 
 /**
  * script vars
@@ -59,6 +61,14 @@ var themeScss = [
 	pathToScss + 'vendor/theme/*.scss.liquid'
 ];
 
+var themeImgs = [
+	pathToDest + '/*.jpg',
+	pathToDest + '/*.jpeg',
+	pathToDest + '/*.png',
+	pathToDest + '/*.gif',
+	pathToDest + '/*.svg'
+];
+
 /**
  * gulp srcStyles task
  *
@@ -238,8 +248,6 @@ gulp.task('srcScripts', function() {
  */
 gulp.task('scripts', ['srcScripts', 'themeScripts'], function() {
 
-	console.log(srcJs);
-
 	return gulp.src(['tmp/js/theme.js.liquid', 'tmp/js/' + pkg.javascriptName + '.js'])
 
 		// final file name
@@ -253,6 +261,29 @@ gulp.task('scripts', ['srcScripts', 'themeScripts'], function() {
 
 });
 
+/**
+ * gulp images task
+ *
+ * `gulp images`
+ *
+ * compress all images in theme assets folder
+ */
+gulp.task('images', function() {
+
+	return gulp.src(themeImgs)
+
+		.pipe(imagemin({
+
+			progressive: true,
+			svgoPlugins: [{removeViewBox: false}],
+			use: [pngquant()]
+
+		}))
+
+		.pipe(gulp.dest(pathToDest));
+
+});
+
 /**
  * gulp watch task
  *
@@ -281,6 +312,21 @@ gulp.task('watch', function() {
 
 });
 
+/**
+ * gulp compile task
+ *
+ * `gulp compile`
+ *
+ * compiles all scss, js, and compresses images
+ * useful for forcing a production compile
+ */
+gulp.task('compile', function() {
+
+	isProduction = true;
+	gulp.start('styles', 'scripts', 'images');
+
+});
+
 /**
  * gulp default task
  *
@@ -291,7 +337,7 @@ gulp.task('watch', function() {
  */
 gulp.task('default', function() {
 
-	gulp.start('styles', 'scripts');
+	gulp.start('styles', 'scripts', 'images');
 	gulp.start('watch');
 
 });

build-script/README.md

@@ -15,17 +15,21 @@ Make sure you're running Node v5.8 using NVM, and that there is no node_modules/
 
 ## Installation
 
-1. use node v5.8
-2. delete `node_modules/` dir, if exists
-3. drop `Gulpfile.js` and `package.json` into project root
-4. run `sudo npm install` from project root
+1. go to project directory
+2. use node v5.8
+3. delete `node_modules/` dir, if exists
+4. drop `Gulpfile.js` and `package.json` into project root
+5. create src/ folder and subfolders if they don't exist
+6. run `sudo npm install` from project root
 
 ## Commands
 
 - `gulp styles`: compiles stylesheets
 - `gulp scripts`: compiles JS
+- `gulp images`: compresses images in assets folder
 - `gulp watch`: watches for changes in src folder, then compiles CSS and/or JS
-- `gulp`: runs all three commands above, in sequence
+- `gulp`: runs all four commands above, in sequence
+- `gulp compile`: runs a production compile of stylesheets and JS, and compresses images
 
 ## Compiling Source JS and Sass
 

build-script/package.json

@@ -10,6 +10,7 @@
     "gulp-cssbeautify": "^0.1.3",
     "gulp-headerfooter": "^1.0.3",
     "gulp-if": "^2.0.0",
+    "gulp-imagemin": "^2.4.0",
     "gulp-jshint": "^2.0.0",
     "gulp-minify-css": "^1.2.4",
     "gulp-order": "^1.1.1",
@@ -19,6 +20,7 @@
     "gulp-strip-debug": "^1.1.0",
     "gulp-uglify": "^1.5.3",
     "gulp-utf8-convert": "0.0.7",
+    "imagemin-pngquant": "^4.2.2",
     "install": "^0.6.1",
     "jshint": "^2.9.1"
   }