Merge pull request #105 from justeat/CPD-11077-setup-fozzie-base-css-…

…generation

CPD-11077: Setup versioned fozzie css file. Updated readme, changelog…

CHANGELOG.md

@@ -3,6 +3,15 @@
 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).
 
+v7.2.0
+------------------------------
+*January 23, 2018*
+
+### Changed
+- Added `usePackageVersion` to config file to handle the css versioning, default value is set to `false`.
+- Added `packageVersion` to config file which returns the current scoped package version.
+- Updated `config.test` tests to cover the above changes.
+
 
 v7.1.0
 ------------------------------

README.md

@@ -285,22 +285,25 @@ Here is the outline of the configuration options, descriptions of each are below
     assetSrcDir,
     assetDistDir,
     applyRevision,
+    packageVersion,
     css: {
         scssDir,
         cssDir,
         lintPaths,
-        sourcemaps
+        sourcemaps,
+        usePackageVersion
     },
     js: {
         files: {
             main: {
                 srcPath,
-                distFile                
+                distFile
             },
             …
         ],
         jsDir,
         lintPaths,
+        usePackageVersion
     },
     img: {
         imgDir,
@@ -391,6 +394,14 @@ Default: true
 
 Will add a content hash to the JS and CSS filenames, generating a new filename if any of the file's contents have changed. This can be utilised to force the clients to get the latest version of an updated asset.
 
+
+### `packageVersion`
+
+  Type: `String`
+
+  Returns the current package version.
+  
+  
 ### `css`
 
 - #### `scssDir`
@@ -427,6 +438,12 @@ Will add a content hash to the JS and CSS filenames, generating a new filename i
 
   Turns sourcemaps on or off.
 
+- #### `usePackageVersion`
+
+  Type: `boolean`
+
+  Default is set to false, when set to true this will bundle a versioned css file e.g `'filename-[version].css'`.
+
 
 ### `js`
 
@@ -484,6 +501,12 @@ Will add a content hash to the JS and CSS filenames, generating a new filename i
   By default, the task will lint all files within the `jsDir` directory.
 
 
+- #### `usePackageVersion`
+
+  Type: `boolean`
+
+  Default is set to false, when set to true this will bundle a versioned JS file e.g `'filename-[version].js'`.
+
 
 ### `img`
 

config.js

@@ -16,11 +16,11 @@ const ConfigOptions = () => {
     let config = {
         isProduction,
         isDev,
-
         webRootDir: '.',
         assetSrcDir: 'src',
         assetDistDir: 'dist',
         applyRevision: true,
+        packageVersion: consumingPackageConfig.version,
 
         /**
          * CSS-related variables
@@ -29,7 +29,8 @@ const ConfigOptions = () => {
             scssDir: 'scss',
             cssDir: 'css',
             lintPaths: [''],
-            sourcemaps: isDev
+            sourcemaps: isDev,
+            usePackageVersion: false
         },
 
         /**
@@ -43,7 +44,8 @@ const ConfigOptions = () => {
                 }
             },
             jsDir: 'js',
-            lintPaths: ['']
+            lintPaths: [''],
+            usePackageVersion: false
         },
 
         /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeat/gulp-build-fozzie",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "Gulp build tasks for use across Fozzie modules",
   "main": "index.js",
   "author": "Damian Mullins <[email protected]> (http://www.damianmullins.com)",

tasks/css.js

@@ -139,6 +139,11 @@ gulp.task('css:bundle', () => {
         .pipe(gulpif(config.isDev,
             sourcemaps.write('.')
         ))
+
+        // If the package version name is set to `true`, version the css file name with the package number.
+        .pipe(gulpif(config.css.usePackageVersion,
+            rename({ suffix: `-${config.packageVersion}` })
+        ))
         // output our unminified files – not for use in prod but useful to be able to debug from
         .pipe(gulp.dest(pathBuilder.cssDistDir))
 
@@ -157,8 +162,11 @@ gulp.task('css:bundle', () => {
             ])
         )
 
-        // add .min suffix to CSS files
-        .pipe(rename({ suffix: '.min' }))
+        // If the package version name is set to `true`, version the css file name with the package number.
+        // Additionally adds .min suffix in both `true` or `false` cases.
+        .pipe(gulpif(config.css.usePackageVersion,
+            rename({ suffix: `-${config.packageVersion}.min` }), rename({ suffix: '.min' })
+        ))
 
         // export sourcemaps (as a separate file)
         .pipe(gulpif(config.isDev,

test/config.test.js

@@ -70,6 +70,20 @@ describe('environment config', () => {
         expect(config.applyRevision).toBe(applyRevision);
     });
 
+    it('`packageVersion` should exist', () => {
+        expect(config.packageVersion).toBeDefined();
+    });
+
+    it('`packageVersion` should return a package version', () => {
+        // Arrange
+        const packageVersion = 'Some package version';
+
+        // Act
+        config.update({ packageVersion });
+
+        // Assert
+        expect(config.packageVersion).toBe(packageVersion);
+    });
 });
 
 describe('css config', () => {
@@ -134,6 +148,13 @@ describe('css config', () => {
         expect(config.css.sourcemaps).toBe(sourcemaps);
     });
 
+    it('`usePackageVersion` should exist', () => {
+        expect(config.css.usePackageVersion).toBeDefined();
+    });
+
+    it('`usePackageVersion` should be set to `false` by default', () => {
+        expect(config.css.usePackageVersion).toBe(false);
+    });
 });
 
 describe('javascript config', () => {
@@ -198,6 +219,14 @@ describe('javascript config', () => {
         expect(config.js.files.main.distFile).toBe(distFile);
     });
 
+    it('`usePackageVersion` should exist', () => {
+        expect(config.js.usePackageVersion).toBeDefined();
+    });
+
+    it('`usePackageVersion` should be set to `false` by default', () => {
+        expect(config.js.usePackageVersion).toBe(false);
+    });
+
 });
 
 describe('image config', () => {