v6.2.0 - Updated the CSS task so that it produces map files for both …

…the concatenated and the minified files produced (#96)
justeat · Oct 3, 2017 · 485a817 · 485a817
1 parent 869cbab
commit 485a817
Show file tree

Hide file tree

Showing 5 changed files with 278 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,14 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+v6.2.0
+------------------------------
+*October 03, 2017*
+
+### Changed
+- Updated the CSS task so that it produces map files for both the concatenated and the minified files produced
+
+
 v6.1.1
 ------------------------------
 *September 22, 2017*

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@justeat/gulp-build-fozzie",
-  "version": "6.1.1",
+  "version": "6.2.0",
   "description": "Gulp build tasks for use across Fozzie modules",
   "main": "index.js",
   "author": "Damian Mullins <[email protected]> (http://www.damianmullins.com)",
@@ -47,6 +47,7 @@
     "gulp": "^3.9.1",
     "gulp-cached": "^1.1.1",
     "gulp-changed": "^3.1.0",
+    "gulp-clone": "^1.0.0",
     "gulp-eslint": "^4.0.0",
     "gulp-extname": "^0.2.2",
     "gulp-filenames": "^4.0.1",
@@ -71,6 +72,7 @@
     "helper-markdown": "^1.0.0",
     "helper-md": "^0.2.2",
     "jest-cli": "^20.0.0",
+    "merge-stream": "^1.0.1",
     "postcss-assets": "^4.2.0",
     "postcss-reporter": "^5.0.0",
     "postcss-scss": "^1.0.2",

diff --git a/tasks-dev/browser-sync.js b/tasks-dev/browser-sync.js
@@ -36,6 +36,7 @@ gulp.task('browser-sync', ['watch'], () => {
  */
 gulp.task('browser-sync:docs', ['assemble'], () => {
 
+    // TODO : SORT OUT PATHS AS NOT WORKING ON INTERNATIONAL CONSUMERWEB PROPERLY
     const options = {
         files: [
             `${pathBuilder.docsDistDir}/**/*.html`,

diff --git a/tasks/css.js b/tasks/css.js
@@ -6,6 +6,8 @@ const gulpif = require('gulp-if');
 const rename = require('gulp-rename');
 const filesizegzip = require('filesizegzip');
 const tap = require('gulp-tap');
+const clone = require('gulp-clone');
+const merge = require('merge-stream');
 const rev = require('gulp-rev');
 
 const sass = require('gulp-sass');
@@ -102,71 +104,81 @@ gulp.task('css:lint', () => gulp.src(`${pathBuilder.cssDistDir}/**/*.css`)
  *  ---------
  *
  */
-gulp.task('css:bundle', () => gulp.src(`${pathBuilder.scssSrcDir}/**/*.scss`)
-    // stops watch from breaking on error
-    .pipe(plumber(config.gulp.onError))
-
-    .pipe(gulpif(config.isDev,
-        sourcemaps.init()
-    ))
-
-    // compile using Sass & pulling int any Eyeglass modules (SCSS NPM modules)
-    .pipe(
-        sass(eyeglass())
-    )
-
-    .pipe(
-        postcss([
-            // Converts any specified assets to data URIs
-            assets({
-                loadPaths: [pathBuilder.imgSrcDir, path.dirname(config.assetDistDir)]
-            }),
-
-            // Autoprefixes CSS properties for various browsers – browsers specified in package.json config
-            autoprefixer()
-        ])
-    )
-
-    // output our unminified files – not for use in prod but useful to be able to debug from
-    .pipe(gulp.dest(pathBuilder.cssDistDir))
-
-    // Output file-size
-    .pipe(gulpif(config.misc.showFileSize,
-        tap(file => {
-            gutil.log(`❯❯ CSS ${file.relative}`, filesizegzip(file.contents, true));
-        })
-    ))
-
-    .pipe(
-        postcss([
-            // run CSSO – a CSS minifier
-            cssnano()
-        ])
-    )
+gulp.task('css:bundle', () => {
+
+    const source = gulp.src(`${pathBuilder.scssSrcDir}/**/*.scss`)
+        // stops watch from breaking on error
+        .pipe(plumber(config.gulp.onError))
+
+        .pipe(gulpif(config.isDev,
+            sourcemaps.init()
+        ))
+
+        // compile using Sass & pulling int any Eyeglass modules (SCSS NPM modules)
+        .pipe(
+            sass(eyeglass())
+        )
+
+        .pipe(
+            postcss([
+                // Converts any specified assets to data URIs
+                assets({
+                    loadPaths: [pathBuilder.imgSrcDir, path.dirname(config.assetDistDir)]
+                }),
+
+                // Autoprefixes CSS properties for various browsers – browsers specified in package.json config
+                autoprefixer()
+            ])
+        );
+
+    const unminified = source.pipe(clone())
+        // export sourcemaps (as a separate file)
+        .pipe(gulpif(config.isDev,
+            sourcemaps.write('.')
+        ))
+        // output our unminified files – not for use in prod but useful to be able to debug from
+        .pipe(gulp.dest(pathBuilder.cssDistDir))
+
+        // Output file-size
+        .pipe(gulpif(config.misc.showFileSize,
+            tap(file => {
+                gutil.log(`❯❯ CSS ${file.relative}`, filesizegzip(file.contents, true));
+            })
+        ));
+
+    const minified = source.pipe(clone())
+        .pipe(
+            postcss([
+                // run CSSO – a CSS minifier
+                cssnano()
+            ])
+        )
+
+        // add .min suffix to CSS files
+        .pipe(rename({ suffix: '.min' }))
+
+        // export sourcemaps (as a separate file)
+        .pipe(gulpif(config.isDev,
+            sourcemaps.write('.')
+        ))
+
+        // output to docs assets folder
+        .pipe(gulpif(config.docs.outputAssets,
+            gulp.dest(pathBuilder.docsCssDistDir)
+        ))
+
+        // revision control for caching
+        .pipe(rev())
+
+        // Output file-size
+        .pipe(gulpif(config.misc.showFileSize,
+            tap(file => {
+                gutil.log(`❯❯ Minified CSS ${file.relative}`, filesizegzip(file.contents, true));
+            })
+        ))
 
-    // add .min suffix to CSS files
-    .pipe(rename({ suffix: '.min' }))
+        // output to destination CSS folder
+        .pipe(gulp.dest(pathBuilder.cssDistDir));
 
-    // export sourcemaps (as a separate file)
-    .pipe(gulpif(config.isDev,
-        sourcemaps.write('.')
-    ))
-
-    // output to docs assets folder
-    .pipe(gulpif(config.docs.outputAssets,
-        gulp.dest(pathBuilder.docsCssDistDir)
-    ))
-
-    // revision control for caching
-    .pipe(rev())
-
-    // Output file-size
-    .pipe(gulpif(config.misc.showFileSize,
-        tap(file => {
-            gutil.log(`❯❯ Minified CSS ${file.relative}`, filesizegzip(file.contents, true));
-        })
-    ))
-
-    // output to destination CSS folder
-    .pipe(gulp.dest(pathBuilder.cssDistDir))
-);
+    return merge(unminified, minified);
+});