update to foley 0.4.3

.gitignore

@@ -17,9 +17,7 @@ npm-debug.log
 
 # Project Specific #
 ######################
+backstop_data
 *.orig
 *sublime*
-
-# Test generated files #
-######################
 test/visual/results

.stylelintrc

@@ -1,3 +1,3 @@
 {
-  "extends": "stylelint-config-suitcss"
+  "extends": "stylelint-config-standard"
 }

README.md

@@ -20,7 +20,7 @@ Please work in the develop branch first, and use feature branches for significan
 * Navigate to the workflow folder in command line Terminal,
 * Run: `npm i`.
 
-See [https://github.com/fephil/foley](https://github.com/fephil/foley) for more information about the workflow. This project uses version 0.3.5.
+See [https://github.com/fephil/foley](https://github.com/fephil/foley) for more information about the workflow. This project uses version 0.4.3.
 
 ### Optional Installs
 

foley.json

@@ -2,24 +2,36 @@
   "paths": {
     "build": "_dist/",
     "buildAssets": "_dist/assets/",
-    "svgicon": "_dist",
+    "svgicon": "_svgicon",
     "scss": "src/scss/",
     "files": "src/files/",
     "fonts": "src/fonts/",
     "icons": "src/icons/",
     "img": "src/img/",
     "js": "src/js/",
     "spec": "spec/",
-    "data": "src/data/",
     "layouts": "src/layouts/",
     "pages": "src/pages/",
-    "partials": "src/partials/"
+    "partials": "src/partials/",
+    "data": "src/data/"
   },
   "autoprefixer": {
     "browsers": ["last 2 versions", "IE >= 10"]
   },
+  "critical": {
+    "dimensions": [{
+      "width": "320",
+      "height": "480"
+    }, {
+      "width": "1200",
+      "height": "900"
+    }]
+  },
   "metalsmith": {
     "plugins": {
+      "metalsmith-metadata-directory": {
+        "directory": "./src/data/**/*.json"
+      },
       "metalsmith-drafts": true,
       "metalsmith-markdownit": {
          "typographer": true,

gulpfile.babel.js

@@ -13,24 +13,24 @@ const tasks = requireDir(__dirname + '/tasks') // eslint-disable-line
 gulp.task('watch', () => {
   gulp.watch(config.paths.scss + '**/*.scss', ['scss'])
   gulp.watch(config.paths.spec + '**/*[Ss]pec.js', ['jasmine'])
-  gulp.watch(config.paths.js + '**/*.js', ['jasmine', 'jslint', 'webpack'])
+  gulp.watch(config.paths.js + '**/*.js', ['jasmine', 'standardlint', 'webpack'])
   gulp.watch(config.paths.img + '{,**/}*.{png,jpg,gif,svg}', ['img'])
   gulp.watch(config.paths.icons + '**/*.svg', ['svgsprite'])
   gulp.watch([config.paths.fonts + '**/*', config.paths.files + '**/*'], ['copy'])
-  gulp.watch([config.paths.layouts + '**/*.hbs', config.paths.pages + '**/*.hbs', config.paths.partials + '**/*.hbs'], ['metalsmith'])
+  gulp.watch([config.paths.data + '**/*.json', config.paths.layouts + '**/*.hbs', config.paths.pages + '**/*.hbs', config.paths.partials + '**/*.hbs'], ['metalsmith'])
 })
 
 // jsdev Watch task
 gulp.task('jsdevwatch', () => {
-  gulp.watch(config.paths.spec + '**/*[Ss]pec.js', ['jasmine', 'specsjslint'])
-  gulp.watch(config.paths.js + '**/*.js', ['jasmine'])
+  gulp.watch(config.paths.spec + '**/*[Ss]pec.js', ['jasmine', 'specsstandardlint'])
+  gulp.watch(config.paths.js + '**/*.js', ['jasmine', 'standardlint'])
 })
 
 // Build website, either with development or minified assets and run server with live reloading
 gulp.task('default', (callback) => {
   runSequence(
     'jasmine',
-    'jslint',
+    'standardlint',
     'clean',
     'metalsmith',
     ['htmlmin', 'svgsprite', 'scss', 'webpack', 'img', 'copy'],
@@ -43,7 +43,7 @@ gulp.task('default', (callback) => {
 gulp.task('deploy', (callback) => {
   runSequence(
     'jasmine',
-    'jslint',
+    'standardlint',
     'clean',
     'metalsmith',
     ['htmlmin', 'svgsprite', 'scss', 'webpack', 'img', 'copy'],
@@ -56,7 +56,8 @@ gulp.task('deploy', (callback) => {
 gulp.task('jsdev', (callback) => {
   runSequence(
     'jasmine',
-    'specsjslint',
+    'standardlint',
+    'specsstandardlintlint',
     'jsdevwatch',
     callback
   )
@@ -66,16 +67,16 @@ gulp.task('jsdev', (callback) => {
 gulp.task('auditcode', (callback) => {
   runSequence(
     'scsslint',
-    'jslint',
+    'standardlint',
     callback
   )
 })
 
 // Run the test task to visually test the website -
 // @note run when localhost is already serving the website
-gulp.task('test', (callback) => {
+gulp.task('visualtest', (callback) => {
   runSequence(
-   'visualTest',
-    callback
-  )
+    'visualTesting',
+     callback
+   )
 })

package.json

@@ -1,7 +1,7 @@
 {
   "name": "streetsupport",
   "description": "Street Support Network is a Manchester collective of support groups, charities and kind-hearted folk. We’ve joined forces to make it easier to find help, and give help, to homeless people in Manchester.",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "author": "StreetSupport <streetsupport@objectivesfirst.com>",
   "private": true,
   "license": "MIT",
@@ -17,12 +17,12 @@
   },
   "devDependencies": {
     "autoprefixer": "6.3.6",
-    "babel-core": "6.7.6",
-    "babel-eslint": "6.0.2",
+    "babel-core": "6.7.7",
+    "babel-eslint": "6.0.3",
     "babel-loader": "6.2.4",
     "babel-preset-es2015": "6.6.0",
-    "backstopjs": "^1.2.1",
-    "browser-sync": "2.11.2",
+    "backstopjs": "1.2.1",
+    "browser-sync": "2.12.3",
     "critical": "0.7.2",
     "css-mqpacker": "4.0.1",
     "cssnano": "3.5.2",
@@ -33,7 +33,6 @@
     "gulp-htmlmin": "1.3.0",
     "gulp-if": "2.0.0",
     "gulp-imagemin": "2.4.0",
-    "gulp-jasmine": "2.3.0",
     "gulp-postcss": "6.1.0",
     "gulp-sass": "2.2.0",
     "gulp-sourcemaps": "1.6.0",
@@ -42,30 +41,31 @@
     "gulp-util": "3.0.7",
     "handlebars": "4.0.5",
     "imagemin-pngquant": "4.2.2",
-    "imports-loader": "0.6.5",
-    "jasmine": "2.4.1",
     "metalsmith": "2.1.0",
     "metalsmith-collections": "0.7.0",
     "metalsmith-discover-helpers": "0.1.0",
     "metalsmith-drafts": "0.0.1",
     "metalsmith-in-place": "1.4.3",
     "metalsmith-layouts": "1.6.4",
     "metalsmith-markdownit": "0.3.0",
+    "metalsmith-metadata-directory": "0.1.1",
     "metalsmith-permalinks": "0.5.0",
-    "metalsmith-rename": "1.0.0",
     "path": "0.12.7",
     "postcss-pxtorem": "3.3.1",
     "postcss-reporter": "1.3.3",
     "postcss-scss": "0.1.7",
     "require-dir": "0.3.0",
     "run-sequence": "1.1.5",
     "sass-mq": "3.2.9",
-    "sinon": "1.17.3",
-    "stylelint": "5.4.0",
-    "stylelint-config-suitcss": "5.0.0",
+    "stylelint": "6.0.3",
+    "stylelint-config-standard": "6.0.0",
     "susy": "2.2.12",
-    "webpack": "1.12.14",
-    "yargs": "4.4.0"
+    "webpack": "1.13.0",
+    "yargs": "4.6.0",
+    "gulp-jasmine": "2.3.0",
+    "jasmine": "2.4.1",
+    "imports-loader": "0.6.5",
+    "sinon": "1.17.3"
   },
   "dependencies": {
     "fastclick": "1.0.6",

src/data/site.json

@@ -0,0 +1,5 @@
+{
+  "url": "/",
+  "jsVersion": "0.1",
+  "cssVersion": "0.1"
+}

src/partials/foot.hbs

@@ -1,5 +1,5 @@
 
-    <script src="/assets/js/commons.js"></script>
-    <script src="/assets/js/{{jsBundle}}.bundle.js"></script>
+    <script src="{{site.url}}assets/js/commons.js?v={{site.jsVersion}}"></script>
+    <script src="{{site.url}}assets/js/{{jsBundle}}.bundle.js?v={{site.jsVersion}}"></script>
   </body>
 </html>

src/partials/head.hbs

@@ -7,7 +7,7 @@
     <meta name="description" content="{{description}}" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link rel="stylesheet" href="/assets/css/site.css" />
+    <link rel="stylesheet" href="{{site.url}}assets/css/site.css?v={{site.cssVersion}}" />
 
     <script>
       (function(d) {

src/partials/icon.hbs

@@ -1 +1 @@
-<svg class="svg-{{name}}-dims {{class}}"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svgsprite.svg#{{name}}"></use></svg>
+<svg class="svg-{{name}}-dims {{class}}"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{site.url}}assets/svgsprite.svg#{{name}}"></use></svg>

tasks/criticalcss.js

@@ -9,6 +9,9 @@ import gulpif from 'gulp-if'
 import critical from 'critical'
 const criticalcss = critical.stream
 
+// Get breakpoints from foley.json
+var dimensions = config.critical.dimensions || {}
+
 // HTML minify task
 gulp.task('crticalcss', () => {
   return gulp.src(config.paths.build + '**/*.html')
@@ -18,13 +21,7 @@ gulp.task('crticalcss', () => {
     minify: true,
     extract: false,
     inline: true,
-    dimensions: [{
-      width: 320,
-      height: 480
-    }, {
-      width: 1200,
-      height: 900
-    }]
+    dimensions: dimensions
   }))
   .pipe(gulp.dest(config.paths.build))
 })

tasks/metalsmith.js

@@ -6,8 +6,8 @@ import gulp from 'gulp'
 import browserSync from 'browser-sync'
 import Metalsmith from 'metalsmith'
 
-// Build Metalsmith
-function buildMetalsmith (callback) {
+// Metalsmith task
+gulp.task('metalsmith', function (callback) {
   // Metalsmith instance and options
   var metalsmith = new Metalsmith('.').clean(false)
   var plugins = config.metalsmith.plugins || {}
@@ -32,9 +32,4 @@ function buildMetalsmith (callback) {
     browserSync.reload()
     callback()
   })
-}
-
-// Metalsmith task
-gulp.task('metalsmith', function (callback) {
-  buildMetalsmith(callback)
 })

tasks/standard.js

@@ -0,0 +1,24 @@
+// Load global config and gulp
+import config from '../foley.json'
+import gulp from 'gulp'
+
+// Specific task modules
+import standard from 'gulp-standard'
+
+// Linting task
+gulp.task('standardlint', () => {
+  return gulp.src(config.paths.js + '**/*.js')
+  .pipe(standard())
+  .pipe(standard.reporter('default', {
+    breakOnError: false
+  }))
+})
+
+// Linting task
+gulp.task('specsstandardlint', () => {
+  return gulp.src(config.paths.spec + '**/*.js')
+  .pipe(standard())
+  .pipe(standard.reporter('default', {
+    breakOnError: false
+  }))
+})

tasks/testing.js → tasks/visualtest.js

@@ -46,7 +46,7 @@ gulp.task('reference', () => {
 })
 
 // Runs the tests
-gulp.task('visualTest', () => {
+gulp.task('visualTesting', () => {
   exec('cd node_modules/backstopjs && gulp test', function (error, stdout, stderr) {
     console.log('stdout: ' + stdout)
 

tasks/webpack.js

@@ -0,0 +1,25 @@
+// Load global config and gulp
+// import config from '../foley.json'
+import gulp from 'gulp'
+
+// Specific task modules
+import gutil from 'gulp-util'
+import browserSync from 'browser-sync'
+import webpack from 'webpack'
+import webpackConfig from '../webpack.config.js'
+
+// Webpack build task
+gulp.task('webpack', (callback) => {
+  webpack(webpackConfig, function (err, stats) {
+    if (err) {
+      throw new gutil.PluginError('webpack', err)
+    }
+
+    gutil.log('webpack', stats.toString({
+      colors: true
+    }))
+
+    browserSync.reload()
+    callback()
+  })
+})