Merge pull request #111 from justeat/v7.8.0

v7.8.0 - Making environment variables available inside SCSS

CHANGELOG.md

@@ -4,6 +4,19 @@ 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.8.0
+------------------------------
+*February 1, 2018*
+
+### Added
+- Added the ability to pass environment variables into the SCSS compilation
+- Added $isDev, $isProd, $env and $server variables that are now available in Sass
+- :bear: added to fozzie log notification
+
+### Changed
+- Minor package updates
+
+
 v7.7.0
 ------------------------------
 *January 30, 2018*

README.md

@@ -140,6 +140,7 @@ Runs the following tasks
 
   Performs a variety of tasks including;
 
+  - Makes environment variables available to Sass
   - Pull in Eyeglass modules
   - Run postcss plugins
   - Minify the CSS
@@ -400,8 +401,8 @@ Will add a content hash to the JS and CSS filenames, generating a new filename i
   Type: `String`
 
   Returns the current package version.
-  
-  
+
+
 ### `css`
 
 - #### `scssDir`

config.js

@@ -11,7 +11,7 @@ const ConfigOptions = () => {
     const isDev = !isProduction;
     const envLog = isProduction ? 'production' : 'development';
 
-    gutil.log(gutil.colors.yellow(`Running Gulp task for ${consumingPackageConfig.name}@${consumingPackageConfig.version} in ${gutil.colors.bold(envLog)} mode ${gutil.colors.gray(`(v${packageConfig.version})`)}`));
+    gutil.log(gutil.colors.yellow(`🐻  Running Gulp task for ${consumingPackageConfig.name}@${consumingPackageConfig.version} in ${gutil.colors.bold(envLog)} mode ${gutil.colors.gray(`(v${packageConfig.version})`)}`));
 
     let config = {
         isProduction,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeat/gulp-build-fozzie",
-  "version": "7.7.0",
+  "version": "7.8.0",
   "description": "Gulp build tasks for use across Fozzie modules",
   "main": "index.js",
   "author": "Damian Mullins <damian.mullins@just-eat.com> (http://www.damianmullins.com)",
@@ -33,7 +33,7 @@
     "assemble": "^0.24.3",
     "autoprefixer": "^7.2.5",
     "babelify": "^8.0.0",
-    "browser-sync": "^2.23.5",
+    "browser-sync": "^2.23.6",
     "browserify": "^15.2.0",
     "cssnano": "^3.10.0",
     "del": "^3.0.0",
@@ -47,7 +47,7 @@
     "gulp-cached": "^1.1.1",
     "gulp-changed": "^3.2.0",
     "gulp-clone": "^2.0.1",
-    "gulp-eslint": "^4.0.1",
+    "gulp-eslint": "^4.0.2",
     "gulp-extname": "^0.2.2",
     "gulp-filenames": "^4.0.1",
     "gulp-gh-pages": "^0.5.4",
@@ -59,8 +59,9 @@
     "gulp-rename": "^1.2.2",
     "gulp-rev": "^8.1.1",
     "gulp-sass": "^3.1.0",
+    "gulp-sass-variables": "^1.1.1",
     "gulp-size": "^3.0.0",
-    "gulp-sourcemaps": "^2.6.3",
+    "gulp-sourcemaps": "^2.6.4",
     "gulp-strip-debug": "^2.0.0",
     "gulp-svgmin": "^1.2.4",
     "gulp-svgstore": "^6.1.1",
@@ -79,15 +80,15 @@
     "run-sequence": "^2.2.1",
     "stylelint": "^8.4.0",
     "stylelint-scss": "^2.2.0",
-    "sw-precache": "^5.1.1",
+    "sw-precache": "^5.2.1",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0"
   },
   "devDependencies": {
     "concurrently": "^3.5.1",
     "coveralls": "^3.0.0",
-    "danger": "3.0.5",
-    "release-it": "^5.2.0"
+    "danger": "3.1.3",
+    "release-it": "^6.1.1"
   },
   "peerDependencies": {
     "gulp": "^3.9.1"

tasks/css.js

@@ -11,6 +11,7 @@ const merge = require('merge-stream');
 const rev = require('gulp-rev');
 
 const sass = require('gulp-sass');
+const sassVariables = require('gulp-sass-variables');
 const eyeglass = require('eyeglass');
 const cssnano = require('cssnano');
 const sourcemaps = require('gulp-sourcemaps');
@@ -114,6 +115,14 @@ gulp.task('css:bundle', () => {
             sourcemaps.init()
         ))
 
+        // add custom environment variables into sass
+        .pipe(sassVariables({
+            $isDev: config.isDev,
+            $isProd: config.isProduction,
+            $env: config.envLog,
+            $server: gutil.env.server
+        }))
+
         // compile using Sass & pulling int any Eyeglass modules (SCSS NPM modules)
         .pipe(
             sass(eyeglass())