more update

Author: tanmoythander

README.md

@@ -11,73 +11,74 @@ If you don't have, [click here](https://nodejs.org/)
 
 
 #### 1. Check if you have it installed or not,
-
-	npm -v
-
+```
+npm -v
+```
 and,
-
-	node -v
-
+```
+node -v
+```
 you should see some version info in return.
 
 #### 2. Install global packages
 run on any directory,
-
-	npm install -g gulp-cli node-gyp
-
+```
+npm install -g gulp-cli node-gyp
+```
 in case of mac or linux, you might need to mention "sudo"
 
 
 #### 3. Now go to the directory where you want to place the project files using git bash
 (terminal for mac or linux)
 run the command,
-
-	git clone URL
-
+```
+git clone URL
+```
 here URL is the http url you get from the repository page, [Click here to clone](https://github.com/tanmoythander/angular-gulp-boilerplate)
 
 #### 4. now navigate to the project directory with cmd (terminal for mac or linux)</b><br>
 run the command,
-
-	npm install
-	
-wait for it to be completed. It usually takes 5-10 minutes to complete.<br>
-It will download all the dependencies, build the project and serve the build on browser<br><br>
+```
+npm install
+```
+wait for it to be completed. It usually takes 5-10 minutes to complete.
+It will download all the dependencies, build the project and serve the build on browser.
 
 ## Using the gulp commands
 
 
 #### 1. Serve the source
 File watching enabled (Development Mode)
 ```
-	gulp
+gulp
 ```
 You should see the browser window opening address http://localhost:3000 (opens another port if unavailable).
 
 
-If you want to serve the source without watching file changes(Source Testing Mode),
+If you want to serve the source without watching file changes (Source Testing Mode),
 run this,
 ```
-	gulp serveSource
+gulp serveSource
 ```
 
 
 #### 2. Build the source
 Build the source code into ./_build (Deployment Mode)
 ```
-	gulp build
+gulp build
 ```
-Warning: it will delete previous build !!!
+Warning: It will delete previous build !!!
 
 
 #### 3. Serve the build
-Serve the ./_build/ without watch (Build Testing Mode)
+Serve the ./_build/ without watching file changes (Build Testing Mode)
 
 ```
-	gulp serveBuild
+gulp serveBuild
 ```
 you should see the browser window opening address http://localhost:3000 (opens another port if unavailable).
-Warning: it will delete previous build !!!
+
+Warning: It will delete previous build !!!
 
 
 ## Developer Hint

gulpfile.js

@@ -94,11 +94,17 @@ function images() {
 	var images = size();
 	return gulp.src('./images/**/*')
 		.pipe(changed('./_build/images'))
-		.pipe(imagemin({
-			optimizationLevel: 3,
-			progressive: true,
-			interlaced: true
-		}))
+		.pipe(imagemin([
+			imagemin.gifsicle({interlaced: true}),
+			imagemin.jpegtran({progressive: true}),
+			imagemin.optipng({optimizationLevel: 5}),
+			imagemin.svgo({
+				plugins: [
+					{removeViewBox: true},
+					{cleanupIDs: false}
+				]
+			})
+    ]))
 		.pipe(gulp.dest('./_build/images'))
 		.pipe(images)
 		.pipe(notify({
@@ -152,7 +158,7 @@ function minCssJs() {
 		.pipe(gulp.dest('./_build/'));
 }
 
-// size
+// File sizes
 function sourceTemplateSize() {
 	var sourceTemplate = size();
 	return gulp.src(['*.html',
@@ -177,6 +183,17 @@ function sourceJsSize() {
 			}
 		}));
 }
+function sourceCssSize() {
+	var sourceCss = size();
+	return gulp.src('./styles/**/*.css')
+		.pipe(sourceCss)
+		.pipe(notify({
+			onLast: true,
+			message: function() {
+				return 'Source CSS size ' + sourceCss.prettySize;
+			}
+		}));
+}
 function buildCssSize() {
 	var buildCss = size();
 	return gulp.src('./_build/css/style.min.css')
@@ -244,7 +261,8 @@ function watch() {
 		gulp.parallel(syncReload, sourceTemplateSize));
 	gulp.watch(['app/**/*.js', 'components/**/*.js', 'js/**/*.js'],
 		gulp.parallel(syncReload, sourceJsSize, lint));
-	gulp.watch('./styles/**/*.css', syncReload);
+	gulp.watch('./styles/**/*.css', 
+		gulp.parallel(syncReload, sourceCssSize));
 }
 
 // define output tasks