Feature/update skeleton

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": ["es2015"],
+  "plugins": [
+    "syntax-trailing-function-commas"
+  ]
+}

.eslintrc

@@ -1,18 +1,29 @@
+extends: 'airbnb-base'
+env:
+  node: true
+  browser: false
 rules:
-  # specify whether double or single quotes should be used
-  quotes: [2, "single", "avoid-escape"]
 
-  # controls location of Use Strict Directives
-  strict: [2, "global"]
+  no-multiple-empty-lines:
+      - 2
+      - max: 1
 
-  # disallow use of multiple spaces
-  no-multi-spaces: [0]
+  # Force trailing commas as this promotes smaller diffs. However
+  # we want to disable on functions, as this is invalid syntax (without any
+  # transpilation)
+  comma-dangle:
+    - 2
+    - arrays: only-multiline
+      objects: only-multiline
+      imports: only-multiline
+      exports: only-multiline
+      functions: never
 
-  # enforces spacing between keys and values in object literal properties
-  key-spacing: [0]
 
-  # allow just one var statement per function (off by default)
-  one-var: [2, {uninitialized: "always", initialized: "never"}]
+
+  # -------------------
+  # Static Complexity Rules: they guide us to write better code.
+  # -------------------
 
   # specify the maximum number of statement allowed in a function
   # (off by default)
@@ -31,3 +42,11 @@ rules:
 
   # specify the maximum depth callbacks can be nested (off by default)
   max-nested-callbacks: [1, 2]
+
+  # Forbid the import of external modules that are not declared in the
+  # package.json's dependencies, devDependencies, optionalDependencies or
+  # peerDependencies
+  # (note: we disable this rule because packages inside `src` behave like
+  # aliases: e.g.: require('elements/foo') works).
+  import/no-extraneous-dependencies: [0]
+  import/no-unresolved: [0]

.gitignore

@@ -4,3 +4,4 @@ node_modules
 .DS_Store
 *.orig
 .tmp
+npm-debug.log

readme.md → README.md

@@ -1,12 +1,11 @@
 # Skeleton - styleguide
 This project is about creating templates to display a frontend styleguide
----
-
+  ---
 
 ## Instructions to run the project
 
 ### Prerequisites
-You will need 
+You will need
   - [node.js](http://nodejs.org) to run the skeleton.
 
 ### Build

gulp/config.js

@@ -1,108 +1,105 @@
-'use strict';
-var argv = require('yargs').argv;
-var path = require('path');
+const argv = require('yargs').argv;
+const path = require('path');
 
-module.exports = function (dest) {
-  var root = path.join(__dirname, '..');
-  var basePaths = {
-    root:    path.join(__dirname, '..'),
-    src:     root + '/src/',
-    content: root + '/content/',
-    assets:  root + '/assets/',
-    dest:    root + '/build/',
-    tmp:     root + '/.tmp/'
+module.exports = (dest) => {
+  const basePaths = {
+    root: path.join(__dirname, '..'),
+    src: 'src/',
+    content: 'content/',
+    assets: 'assets/',
+    dest: 'build/',
+    tmp: '.tmp/',
   };
 
-  // This helps overwriting the target destination
-  // For changing .src folders you need to overwrite by hand:
-  // conf = require('thisConfig');
-  // conf.paths.content.src = 'anotherFolder'
   if (dest != undefined) {
     basePaths.dest = dest;
   }
 
-  var languages = ['en'];
+  const languages = ['en'];
 
-  var paths = {
+  const paths = {
     scripts: {
-      src:  basePaths.src + 'scripts/',
-      dest: basePaths.dest + 'js/'
+      src: `${basePaths.src}scripts/`,
+      dest: `${basePaths.dest}js/`,
     },
     styles: {
-      src:  basePaths.src + 'styles/',
-      dest: basePaths.dest + 'css/'
+      src: `${basePaths.src}styles/`,
+      dest: `${basePaths.dest}css/`,
     },
     content: {
-      src:  basePaths.content + 'data/',
-      dest: basePaths.dest + 'content/data/'
+      src:  `${basePaths.content}data/`,
+      dest: `${basePaths.dest}content/data/`
     },
     pages: {
-      src:  basePaths.src + 'pages/',
-      dest: basePaths.dest
+      src: `${basePaths.src}pages/`,
+      dest: basePaths.dest,
     },
     layouts: {
-      src:  basePaths.src + 'layouts/'
+      src: `${basePaths.src}layouts/`,
     },
     images: {
-      src:  basePaths.content + 'images/',
-      dest: basePaths.dest + 'content/images/'
+      src: `${basePaths.content}images/`,
+      dest: `${basePaths.dest}content/images/`,
     },
     logos: {
-      src:  basePaths.assets + 'logos/',
-      dest: basePaths.dest + 'assets/logos/'
+      src: `${basePaths.assets}logos/`,
+      dest: `${basePaths.dest}assets/logos/`,
     },
     favicons: {
-      src:  basePaths.assets + 'favicons/',
-      dest: basePaths.dest
+      src: `${basePaths.assets}favicons/`,
+      dest: basePaths.dest,
     },
     fonts: {
-      src:  basePaths.assets + 'fonts/',
-      dest: basePaths.dest + 'assets/fonts/'
-    }
+      src: `${basePaths.assets}fonts/`,
+      dest: `${basePaths.dest}assets/fonts/`,
+    },
+    revManifest: {
+      dest: `${basePaths.dest}rev-manifest.json`,
+    },
   };
 
-  var appFiles = {
-    scripts:   paths.scripts.src + '**/*.js',
-    styles:    paths.styles.src + '**/*.scss',
-    content:   paths.content.src + '**/*.yml',
-    pages:     paths.pages.src + '**/*.jade',
-    layouts:   paths.layouts.src + '**/*.jade',
-    images:    paths.images.src + '**/*',
-    logos:     paths.logos.src + '**/*',
-    favicons:  paths.favicons.src + '**/*',
-    fonts:     paths.fonts.src + '**/*'
+  const appFiles = {
+    scripts: `${paths.scripts.src}**/*.js`,
+    styles: `${paths.styles.src}**/*.scss`,
+    content: `${paths.content.src}**/*.yml`,
+    pages: `${paths.pages.src}**/*.pug`,
+    layouts: `${paths.layouts.src}**/*.pug`,
+    images: `${paths.images.src}**/*`,
+    logos: `${paths.logos.src}**/*`,
+    favicons: `${paths.favicons.src}**/*`,
+    fonts: `${paths.fonts.src}**/*`,
   };
 
-  var components = [
-    basePaths.src + 'modules/',
-    basePaths.src + 'partials/'
+  const components = [
+    `${basePaths.src}modules/`,
+    `${basePaths.src}elements/`,
+    `${basePaths.src}partials/`,
   ];
 
-  var gulpFiles = [
+  const gulpFiles = [
     'gulp/**/*.js',
-    'gulpfile.js'
+    'gulpfile.js',
   ];
 
-  var environments = {
+  const environments = {
     testing: {
-      host:        argv.host,
-      username:    argv.username,
+      host: argv.host,
+      username: argv.username,
       projectPath: 'preview.ginetta.net/skeleton-styleguide/',
       releasePath: argv.path,
-      privateKey:  argv.privateKey
-    }
+      privateKey: argv.privateKey,
+    },
   };
 
   return {
-    root:         root,
-    basePaths:    basePaths,
-    languages:    languages,
-    paths:        paths,
-    appFiles:     appFiles,
-    components:   components,
-    gulpFiles:    gulpFiles,
-    environments: environments
+    root,
+    basePaths,
+    languages,
+    paths,
+    appFiles,
+    components,
+    gulpFiles,
+    environments,
+    isProd: process.env.NODE_ENV === 'production',
   };
 };
-
-

gulp/tasks/assets.js

@@ -1,30 +1,37 @@
-'use strict';
-var merge = require('merge-stream');
+const merge = require('merge-stream');
 
-module.exports = function (gulp, $, config) {
-  var imagesSrc    = config.appFiles.images;
-  var imagesDest   = config.paths.images.dest;
-  var logosSrc     = config.appFiles.logos;
-  var logosDest    = config.paths.logos.dest;
-  var faviconsSrc  = config.appFiles.favicons;
-  var faviconsDest = config.paths.favicons.dest;
-  var fontsSrc     = config.appFiles.fonts;
-  var fontsDest    = config.paths.fonts.dest;
+module.exports = (gulp, $, config) => {
+  const imagesSrc = config.appFiles.images;
+  const imagesDest = config.paths.images.dest;
+  const logosSrc = config.appFiles.logos;
+  const logosDest = config.paths.logos.dest;
+  const faviconsSrc = config.appFiles.favicons;
+  const faviconsDest = config.paths.favicons.dest;
+  const fontsSrc = config.appFiles.fonts;
+  const fontsDest = config.paths.fonts.dest;
+  const manifestFile = config.paths.revManifest.dest;
 
-  var task =  function () {
-    var imagesSt = gulp.src(imagesSrc)
+  const task = () => {
+    const imagesSt = gulp.src(imagesSrc)
       .pipe($.changed(imagesDest))
-      .pipe(gulp.dest(imagesDest));
+      .pipe($.if(config.isProd, $.rev()))
+      .pipe($.if(config.isProd, gulp.dest(imagesDest)))
+      .pipe($.if(config.isProd, $.rev.manifest(manifestFile, { merge: true, base: imagesDest })))
+      .pipe(gulp.dest(imagesDest))
+      ;
 
-    var logosSt = gulp.src(logosSrc)
+    const logosSt = gulp.src(logosSrc)
       .pipe($.changed(logosSrc))
+      .pipe($.if(config.isProd, $.rev()))
+      .pipe($.if(config.isProd, gulp.dest(logosSrc)))
+      .pipe($.if(config.isProd, $.rev.manifest(manifestFile, { merge: true, base: logosDest })))
       .pipe(gulp.dest(logosDest));
 
-    var faviconsSt = gulp.src(faviconsSrc)
+    const faviconsSt = gulp.src(faviconsSrc)
       .pipe($.changed(faviconsSrc))
       .pipe(gulp.dest(faviconsDest));
 
-    var fontsSt = gulp.src(fontsSrc)
+    const fontsSt = gulp.src(fontsSrc)
       .pipe($.changed(fontsSrc))
       .pipe(gulp.dest(fontsDest));
 

gulp/tasks/clean.js

@@ -1,14 +1,10 @@
-'use strict';
-var del = require('del');
+const del = require('del');
 
-module.exports = function (gulp, $, config) {
-  var destFolder  = config.basePaths.dest + '*';
+module.exports = (gulp, $, config) => {
+  const destFolder = `${config.basePaths.dest}*`;
 
-  var task = function (cb) {
-    return del([destFolder]);
-  };
+  const task = () => del([destFolder]);
 
   task.description = 'Cleans the build folder';
   return task;
 };
-