From ee9c65e3478fb4bf71dd7eed06d328c5b218d0f0 Mon Sep 17 00:00:00 2001 From: lejoe Date: Wed, 17 Aug 2016 22:36:31 +0200 Subject: [PATCH 01/47] Watches the js files in the components folders --- gulp/tasks/serve.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/gulp/tasks/serve.js b/gulp/tasks/serve.js index d2d260d..839bf70 100644 --- a/gulp/tasks/serve.js +++ b/gulp/tasks/serve.js @@ -18,6 +18,9 @@ module.exports = function (gulp, $, config) { var componentsDirs = config.components; + _.map(componentsDirs, function(componentDir) { + scriptFiles.push(componentDir + '**/*.js'); + }); _.map(componentsDirs, function(componentDir) { stylesFiles.push(componentDir + '**/*.scss'); }); From afd430efc7f423a4ec372435bfdfef0c41c06ab3 Mon Sep 17 00:00:00 2001 From: lejoe Date: Wed, 17 Aug 2016 22:47:11 +0200 Subject: [PATCH 02/47] Fixes JS error reporting in gulp --- gulp/tasks/scripts.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/gulp/tasks/scripts.js b/gulp/tasks/scripts.js index 3c76490..91ea5cb 100644 --- a/gulp/tasks/scripts.js +++ b/gulp/tasks/scripts.js @@ -1,5 +1,6 @@ 'use strict'; var stream = require('../utils/browserSync').stream; +var handleError = require('../utils/handleError'); var webpack = require('webpack'); var gulpWebpack = require('webpack-stream'); var glob = require('glob'); @@ -15,6 +16,7 @@ module.exports = function (gulp, $, config) { var task = function () { return gulp.src(scriptsFiles) + .pipe($.plumber(handleError)) .pipe($.eslint({envs: ['browser']})) .pipe($.eslint.format()) .pipe(gulpWebpack({ From 0aec0e2545fbeb2c95f8650b0c201756b8c52e79 Mon Sep 17 00:00:00 2001 From: lejoe Date: Thu, 1 Sep 2016 16:26:32 +0200 Subject: [PATCH 03/47] Fixes the relative path calculations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Here’s an example of the change: Assume such a folder structure: ``` src/pages | `- index.html | `- A | `- A.html | `- B | `- B.html ``` ## Before `index.html`: `./` `A/A.html`: `B/` `A/B/B.html`: `A/B/` ## After `index.html`: `./` `A/A.html`: `../` `A/B/B.html`: `../../` --- gulp/tasks/pages.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/gulp/tasks/pages.js b/gulp/tasks/pages.js index 4fcbc89..09eb922 100644 --- a/gulp/tasks/pages.js +++ b/gulp/tasks/pages.js @@ -30,8 +30,7 @@ module.exports = function (gulp, $, config) { var getRelativePath = function(file, language) { var destPath = config.paths.pages.src + getLanguagePath(language); var filePath = path.dirname(file.path); - - return (path.relative(destPath, filePath) || '.') + '/'; + return (path.relative(filePath, destPath) || '.') + '/'; }; var task = function () { From 37c7a1618dcc464f4012753af51040505ddab91a Mon Sep 17 00:00:00 2001 From: David Aerne Date: Fri, 28 Oct 2016 13:54:52 +0200 Subject: [PATCH 04/47] fixes babel loader for es 2015 --- gulp/tasks/scripts.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/gulp/tasks/scripts.js b/gulp/tasks/scripts.js index 91ea5cb..79500df 100644 --- a/gulp/tasks/scripts.js +++ b/gulp/tasks/scripts.js @@ -29,9 +29,11 @@ module.exports = function (gulp, $, config) { output: { filename: 'main.js' }, - loaders: [ - { test: /\.js$/, loader: 'babel?presets[]=es2015', exclude: /node_modules/} - ], + module: { + loaders: [ + { test: /\.js$/, loader: 'babel?presets[]=es2015', exclude: /node_modules/} + ], + }, resolve: { // Makes sure the paths are relative to the root and not this file root: skeletonRoot, From 14c83af93cccc54974d2c916d1f2a4b2f8bc99ef Mon Sep 17 00:00:00 2001 From: David Aerne Date: Fri, 28 Oct 2016 13:55:17 +0200 Subject: [PATCH 05/47] adds es2015 linting --- .eslintrc | 1 + package.json | 1 + 2 files changed, 2 insertions(+) diff --git a/.eslintrc b/.eslintrc index e4a6dba..7148509 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,3 +1,4 @@ +extends: 'es2015' rules: # specify whether double or single quotes should be used quotes: [2, "single", "avoid-escape"] diff --git a/package.json b/package.json index c195ae2..2f753de 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "babel-preset-es2015": "^6.1.18", "browser-sync": "^2.6.5", "del": "^2.2.1", + "eslint-config-es2015": "^1.1.0", "glob": "^7.0.5", "gulp": "gulpjs/gulp.git#4.0", "gulp-autoprefixer": "^3.1.0", From e1a3c6ea31c4bb16a711aa8decdfe95b70900d5f Mon Sep 17 00:00:00 2001 From: David Aerne Date: Fri, 28 Oct 2016 14:01:08 +0200 Subject: [PATCH 06/47] make use of the query option for presets so its much easier to add plugins and presets in the future. And its also nicer to read --- gulp/tasks/scripts.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/gulp/tasks/scripts.js b/gulp/tasks/scripts.js index 79500df..8422784 100644 --- a/gulp/tasks/scripts.js +++ b/gulp/tasks/scripts.js @@ -31,7 +31,14 @@ module.exports = function (gulp, $, config) { }, module: { loaders: [ - { test: /\.js$/, loader: 'babel?presets[]=es2015', exclude: /node_modules/} + { + test: /\.js$/, + loader: 'babel', + exclude: /node_modules/, + query: { + presets: ['es2015'], + } + } ], }, resolve: { From 4520a7650f88032ae1eb75db315fa4a64772f511 Mon Sep 17 00:00:00 2001 From: David Aerne Date: Mon, 31 Oct 2016 13:47:43 +0100 Subject: [PATCH 07/47] makes sure its easier to mix classes with attributes --- src/modules/card/layout.jade | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/modules/card/layout.jade b/src/modules/card/layout.jade index 17ceb41..d9f4df1 100644 --- a/src/modules/card/layout.jade +++ b/src/modules/card/layout.jade @@ -17,7 +17,9 @@ mixin card(data, options) if options.float - classes.push('card--' + options.float); - div(class=classes) + - attributes.class = classes; + + div&attributes(attributes) if data.background img(src=relativePath + data.background.image, alt=data.background.alt).card-background .l-absolute-centered.card-content From 567aa88b598f2b0ec180b652496ae5cd3ca516ff Mon Sep 17 00:00:00 2001 From: Bruno Lourenco Date: Thu, 9 Feb 2017 15:20:24 +0000 Subject: [PATCH 08/47] Add Wercker to README --- readme.md => README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) rename readme.md => README.md (73%) diff --git a/readme.md b/README.md similarity index 73% rename from readme.md rename to README.md index 09a07b9..3020698 100644 --- a/readme.md +++ b/README.md @@ -1,11 +1,12 @@ +[![wercker status](https://app.wercker.com/status/0b69514873a64ce32a5976e252359809/s/master "wercker status")](https://app.wercker.com/project/byKey/0b69514873a64ce32a5976e252359809) + # project-name --- - ## Instructions to run the project ### Prerequisites -You will need +You will need - [node.js](http://nodejs.org) to run the skeleton. ### Build From c3631946013666bec78c8b9581fd5c321ec66520 Mon Sep 17 00:00:00 2001 From: Bruno Lourenco Date: Thu, 9 Feb 2017 15:27:30 +0000 Subject: [PATCH 09/47] Add wercker.yml --- wercker.yml | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 wercker.yml diff --git a/wercker.yml b/wercker.yml new file mode 100644 index 0000000..0295bca --- /dev/null +++ b/wercker.yml @@ -0,0 +1,70 @@ +box: node + +build: + steps: + + - script: + name: echo nodejs information + code: | + echo "node version $(node -v) running" + echo "npm version $(npm -v) running" + - npm-install + + - maxon/npm-run: + script: build + +deploy-branch: + steps: + - install-packages: + packages: rsync + + - add-to-known_hosts: + hostname: $G_STAGING_HOST + + - add-ssh-key: + keyname: G_STAGING_KEY + + - lejoe/rsync-deploy: + host: $G_STAGING_HOST + homepath: $G_STAGING_HOME_PATH + directory: $G_STAGING_PROJECT_PATH/branch/$WERCKER_GIT_BRANCH + user: $G_STAGING_USER + sshkey: $G_STAGING_KEY + source: $WERCKER_SOURCE_DIR/build/ + +deploy-master: + steps: + - install-packages: + packages: rsync + + - add-to-known_hosts: + hostname: $G_STAGING_HOST + + - add-ssh-key: + keyname: G_STAGING_KEY + + - lejoe/rsync-deploy: + host: $G_STAGING_HOST + homepath: $G_STAGING_HOME_PATH + directory: $G_STAGING_PROJECT_PATH/master + user: $G_STAGING_USER + sshkey: $G_STAGING_KEY + source: $WERCKER_SOURCE_DIR/build/ + +deploy-live: + steps: + - install-packages: + packages: rsync + + - add-to-known_hosts: + hostname: $G_LIVE_HOST + + - add-ssh-key: + keyname: G_LIVE_KEY + + - sjoerdmulder/rsync-deploy: + host: $G_LIVE_HOST + directory: $G_LIVE_HOME_PATH/$G_LIVE_PROJECT_PATH + user: $G_LIVE_USER + sshkey: $G_LIVE_KEY + source: $WERCKER_SOURCE_DIR/build/ From 5384d18c3fa02a2455f9b35fdc120b9049411386 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=ABl=20Bez?= Date: Tue, 14 Feb 2017 10:09:16 +0100 Subject: [PATCH 10/47] Removes the live deploy --- wercker.yml | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/wercker.yml b/wercker.yml index 0295bca..eeb5a8e 100644 --- a/wercker.yml +++ b/wercker.yml @@ -50,21 +50,5 @@ deploy-master: user: $G_STAGING_USER sshkey: $G_STAGING_KEY source: $WERCKER_SOURCE_DIR/build/ - -deploy-live: - steps: - - install-packages: - packages: rsync - - - add-to-known_hosts: - hostname: $G_LIVE_HOST - - - add-ssh-key: - keyname: G_LIVE_KEY - - - sjoerdmulder/rsync-deploy: - host: $G_LIVE_HOST - directory: $G_LIVE_HOME_PATH/$G_LIVE_PROJECT_PATH - user: $G_LIVE_USER sshkey: $G_LIVE_KEY source: $WERCKER_SOURCE_DIR/build/ From 28f9e8fc61a70da7941486dd9e04da621181c12b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Thu, 16 Feb 2017 16:06:31 +0100 Subject: [PATCH 11/47] Adds npm-debug.log to .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 1676a24..7940c4c 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ node_modules .DS_Store *.orig .tmp +npm-debug.log From 593f8a7819e7909fbbe82adff69dec070df9c933 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Thu, 16 Feb 2017 17:11:35 +0100 Subject: [PATCH 12/47] Replaces jade by pug. --- gulp/config.js | 4 +-- gulp/tasks/pages.js | 25 ++++++++++--------- gulp/tasks/serve.js | 2 +- gulp/utils/pagesHelpers.js | 4 +-- gulpfile.js | 2 +- package.json | 6 ++--- .../header/{layout.jade => layout.pug} | 0 src/layouts/{default.jade => default.pug} | 11 +++----- src/modules/card/{layout.jade => layout.pug} | 0 src/pages/{index.jade => index.pug} | 6 ++--- 10 files changed, 28 insertions(+), 32 deletions(-) rename src/elements/header/{layout.jade => layout.pug} (100%) rename src/layouts/{default.jade => default.pug} (66%) rename src/modules/card/{layout.jade => layout.pug} (100%) rename src/pages/{index.jade => index.pug} (78%) diff --git a/gulp/config.js b/gulp/config.js index 86d1076..46d1df0 100644 --- a/gulp/config.js +++ b/gulp/config.js @@ -57,8 +57,8 @@ module.exports = function () { 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', + pages: paths.pages.src + '**/*.pug', + layouts: paths.layouts.src + '**/*.pug', images: paths.images.src + '**/*', logos: paths.logos.src + '**/*', favicons: paths.favicons.src + '**/*', diff --git a/gulp/tasks/pages.js b/gulp/tasks/pages.js index 09eb922..8013060 100644 --- a/gulp/tasks/pages.js +++ b/gulp/tasks/pages.js @@ -1,10 +1,10 @@ 'use strict'; -var yamljs = require('yamljs'); -var jade = require('jade'); -var merge = require('merge-stream'); -var path = require('path'); -var pageshelpers = require('../utils/pagesHelpers'); -var handleError = require('../utils/handleError'); +var yamljs = require('yamljs'); +var pugIncludeGlob = require('pug-include-glob'); +var merge = require('merge-stream'); +var path = require('path'); +var pageshelpers = require('../utils/pagesHelpers'); +var handleError = require('../utils/handleError'); module.exports = function (gulp, $, config) { @@ -52,7 +52,6 @@ module.exports = function (gulp, $, config) { return gulp.src(srcFiles) .pipe($.plumber(handleError)) - .pipe($.jadeGlobbing()) .pipe($.data(function(file) { return { data: loadContent(language), @@ -61,11 +60,13 @@ module.exports = function (gulp, $, config) { language: language }; })) - .pipe($.jade({ - jade: jade, - pretty: true, + .pipe($.pug({ client: false, - basedir: baseDir + pretty: true, + basedir: baseDir, + plugins: [ + pugIncludeGlob() + ] })) .pipe(gulp.dest(destPath)); } @@ -76,6 +77,6 @@ module.exports = function (gulp, $, config) { return merge(pagesStreams); }; - task.description = 'Generate all pages from the jade files'; + task.description = 'Generate all pages from the pug files'; return task; }; diff --git a/gulp/tasks/serve.js b/gulp/tasks/serve.js index 839bf70..d443fae 100644 --- a/gulp/tasks/serve.js +++ b/gulp/tasks/serve.js @@ -25,7 +25,7 @@ module.exports = function (gulp, $, config) { stylesFiles.push(componentDir + '**/*.scss'); }); _.map(componentsDirs, function(componentDir) { - pagesFiles.push(componentDir + '**/*.jade'); + pagesFiles.push(componentDir + '**/*.pug'); }); _.map(componentsDirs, function(componentDir) { pagesFiles.push(componentDir + '**/*.yml'); diff --git a/gulp/utils/pagesHelpers.js b/gulp/utils/pagesHelpers.js index 87b670d..b929d8b 100644 --- a/gulp/utils/pagesHelpers.js +++ b/gulp/utils/pagesHelpers.js @@ -2,7 +2,7 @@ var yamljs = require('yamljs'); var _ = require('lodash'); var markdown = require('marked'); -var jadeInline = require('jade-inline-file'); +var pugInline = require('jade-inline-file'); module.exports = function (config) { var srcDir = config.basePaths.src; @@ -103,6 +103,6 @@ module.exports = function (config) { return { mergeDefaultOptions: mergeDefaultOptions, markdown: markdown, - inline: jadeInline + inline: pugInline }; }; diff --git a/gulpfile.js b/gulpfile.js index fe367e0..3905edf 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -16,7 +16,7 @@ gulp.task('build:assets', t.getTask('assets')); // Concatenates all the content files gulp.task('build:content', t.getTask('content')); -// Generate all pages from the jade files +// Generate all pages from the pug files gulp.task('build:pages', t.getTask('pages')); // Generate all stylesheets from the sass files diff --git a/package.json b/package.json index 2f753de..a1b36fd 100644 --- a/package.json +++ b/package.json @@ -29,20 +29,20 @@ "gulp-css-globbing": "^0.1.7", "gulp-data": "^1.2.0", "gulp-eslint": "^3.0.1", - "gulp-jade": "^1.0.0", - "gulp-jade-globbing": "^0.1.9", "gulp-load-plugins": "^1.2.4", "gulp-notify": "^2.2.0", "gulp-plumber": "^1.0.0", + "gulp-pug": "^3.2.0", "gulp-sass": "^2.0.1", "gulp-sourcemaps": "^1.5.2", "gulp-sync": "^0.1.4", "gulp-util": "^3.0.4", - "jade": "^1.11.0", "jade-inline-file": "^0.1.0", "lodash": "^4.13.1", "marked": "^0.3.3", "merge-stream": "^1.0.0", + "pug": "^2.0.0-beta11", + "pug-include-glob": "^0.3.2", "rsyncwrapper": "^1.0.1", "webpack": "^1.12.8", "webpack-stream": "^3.2.0", diff --git a/src/elements/header/layout.jade b/src/elements/header/layout.pug similarity index 100% rename from src/elements/header/layout.jade rename to src/elements/header/layout.pug diff --git a/src/layouts/default.jade b/src/layouts/default.pug similarity index 66% rename from src/layouts/default.jade rename to src/layouts/default.pug index 7cac998..c253e4f 100644 --- a/src/layouts/default.jade +++ b/src/layouts/default.pug @@ -1,5 +1,3 @@ -doctype html - html(lang=language) head meta(charset='utf-8') @@ -8,7 +6,7 @@ html(lang=language) meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no') meta(name='format-detection', content='telephone=no') - link(rel='stylesheet', href='#{relativePath}css/styles.css') + link(rel='stylesheet', href=relativePath + 'css/styles.css') block meta @@ -17,8 +15,5 @@ html(lang=language) body block body - script(src='#{relativePath}/js/vendor.min.js') - script(src='#{relativePath}/js/main.js') - - - + script(src=relativePath + '/js/vendor.min.js') + script(src=relativePath + '/js/main.js') diff --git a/src/modules/card/layout.jade b/src/modules/card/layout.pug similarity index 100% rename from src/modules/card/layout.jade rename to src/modules/card/layout.pug diff --git a/src/pages/index.jade b/src/pages/index.pug similarity index 78% rename from src/pages/index.jade rename to src/pages/index.pug index ea6fb63..7f1bcb6 100644 --- a/src/pages/index.jade +++ b/src/pages/index.pug @@ -1,8 +1,8 @@ -include ../modules/**/*.jade -include ../elements/**/*.jade - extends ../layouts/default +include ../modules/**/* +include ../elements/**/* + block meta title project-name //- TODO: add you page meta tags From ffc63e01416a0fd20983a9cae1563f4d22020eda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Thu, 16 Feb 2017 16:04:12 +0100 Subject: [PATCH 13/47] Updates to webpack2 Also moves webpack configuration to its own file for easier readability. --- gulp/tasks/scripts.js | 43 +++----------------------------------- package.json | 4 ++-- webpack.config.js | 48 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 53 insertions(+), 42 deletions(-) create mode 100644 webpack.config.js diff --git a/gulp/tasks/scripts.js b/gulp/tasks/scripts.js index 8422784..0d4eb98 100644 --- a/gulp/tasks/scripts.js +++ b/gulp/tasks/scripts.js @@ -3,55 +3,18 @@ var stream = require('../utils/browserSync').stream; var handleError = require('../utils/handleError'); var webpack = require('webpack'); var gulpWebpack = require('webpack-stream'); -var glob = require('glob'); +var webpackConfig = require('../../webpack.config'); module.exports = function (gulp, $, config) { - var tasksHelper = require('../utils/tasksHelpers')(gulp, config); var scriptsFiles = config.appFiles.scripts; - var vendorFile = config.paths.scripts.src + 'vendor.js'; - var srcFiles = glob.sync(scriptsFiles, {ignore: vendorFile}); - var destPath = config.paths.scripts.dest; - var skeletonRoot = config.basePaths.root; - var srcRoot = config.basePaths.src; + var destPath = config.paths.scripts.dest; var task = function () { return gulp.src(scriptsFiles) .pipe($.plumber(handleError)) .pipe($.eslint({envs: ['browser']})) .pipe($.eslint.format()) - .pipe(gulpWebpack({ - debug: true, //TODO improve this one we have env depending builds - entry: { - main: srcFiles, - // Add modules you want to load from vendors to this file - vendor: vendorFile - }, - output: { - filename: 'main.js' - }, - module: { - loaders: [ - { - test: /\.js$/, - loader: 'babel', - exclude: /node_modules/, - query: { - presets: ['es2015'], - } - } - ], - }, - resolve: { - // Makes sure the paths are relative to the root and not this file - root: skeletonRoot, - // Makes sure the compiler looks for modules in /src and node_modules - modulesDirectories: [srcRoot, 'node_modules'] - }, - plugins: [ - // Makes sure the vendors are only imported once in this seperate file - new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min.js') - ] - })) + .pipe(gulpWebpack(webpackConfig(config), webpack)) .pipe(gulp.dest(destPath)) .pipe(stream()); }; diff --git a/package.json b/package.json index a1b36fd..03c7086 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ "browser-sync": "^2.6.5", "del": "^2.2.1", "eslint-config-es2015": "^1.1.0", - "glob": "^7.0.5", "gulp": "gulpjs/gulp.git#4.0", "gulp-autoprefixer": "^3.1.0", "gulp-changed": "^1.2.1", @@ -44,7 +43,8 @@ "pug": "^2.0.0-beta11", "pug-include-glob": "^0.3.2", "rsyncwrapper": "^1.0.1", - "webpack": "^1.12.8", + "webpack": "^2.2.1", + "webpack-glob-entries": "^1.0.1", "webpack-stream": "^3.2.0", "yamljs": "^0.2.8", "yargs": "^4.8.0" diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..153189b --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,48 @@ +'use strict'; + +const webpack = require('webpack'); +const path = require('path'); +const globEntries = require('webpack-glob-entries') + +module.exports = config => { + return { + // Here the application starts executing + // and webpack starts bundling + // can be string | object {entryname: entrypath} | array + // we are using an object here (result of `globEntries`) + entry: globEntries(config.appFiles.scripts), + + // options related to how webpack emits results + output: { + // the filename template for entry chunks + filename: '[name].js', + + // the target directory for all output files + // must be an absolute path (thus the `path.resolve`) + path: path.resolve(__dirname, 'build') + }, + + + // options for resolving module requests + resolve: { + + // directories where to look for modules + modules: [ + 'node_modules', + path.join(__dirname, '.'), + path.resolve(__dirname, 'src') + ] + }, + + plugins: [ + // The CommonsChunkPlugin is an opt-in feature that creates a separate file + // (known as a chunk), consisting of common modules shared between multiple + // entry points. By separating common modules from bundles, the resulting + // chunked file can be loaded once initially, and stored in cache for later + // use. This results in pagespeed optimizations as the browser can quickly + // serve the shared code from cache, rather than being forced to load a + // larger bundle whenever a new page is visited. + new webpack.optimize.CommonsChunkPlugin('vendor') + ] + }; +}; From b8d64fd0623c1edd76d2743ec9d9118aadac9910 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Thu, 16 Feb 2017 16:35:44 +0100 Subject: [PATCH 14/47] correct configuration for CommonChunksPlugin we still expect vendor.min.js --- webpack.config.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 153189b..82c8c51 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -42,7 +42,10 @@ module.exports = config => { // use. This results in pagespeed optimizations as the browser can quickly // serve the shared code from cache, rather than being forced to load a // larger bundle whenever a new page is visited. - new webpack.optimize.CommonsChunkPlugin('vendor') + new webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + filename: 'vendor.min.js', + }) ] }; }; From 61dcc7aa4ead00ce31bda6d7fcae9a3e77044e5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Thu, 16 Feb 2017 16:36:00 +0100 Subject: [PATCH 15/47] Adds babel loader but moves configuration to its own file. --- .babelrc | 3 +++ webpack.config.js | 12 ++++++++++++ 2 files changed, 15 insertions(+) create mode 100644 .babelrc diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..c13c5f6 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015"] +} diff --git a/webpack.config.js b/webpack.config.js index 82c8c51..1aff632 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -22,6 +22,18 @@ module.exports = config => { path: path.resolve(__dirname, 'build') }, + module: { + rules: [ + { + test: /\.js$/, + exclude: /node_modules/, + use: [ + 'babel-loader' + ] + } + ], + }, + // options for resolving module requests resolve: { From bd6a398cc8297e5f60bdfede577836e1b8aff2bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Thu, 16 Feb 2017 16:19:07 +0100 Subject: [PATCH 16/47] Moves eslint file to its own file for better ide integration. --- gulp/tasks/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gulp/tasks/scripts.js b/gulp/tasks/scripts.js index 0d4eb98..7f4b11c 100644 --- a/gulp/tasks/scripts.js +++ b/gulp/tasks/scripts.js @@ -12,7 +12,7 @@ module.exports = function (gulp, $, config) { var task = function () { return gulp.src(scriptsFiles) .pipe($.plumber(handleError)) - .pipe($.eslint({envs: ['browser']})) + .pipe($.eslint()) .pipe($.eslint.format()) .pipe(gulpWebpack(webpackConfig(config), webpack)) .pipe(gulp.dest(destPath)) From 98c0f84e61a29ca9abaf339945343f79dea474c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Thu, 16 Feb 2017 16:19:46 +0100 Subject: [PATCH 17/47] adds airbnb-base extends as it provides better defaults. --- .eslintrc | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/.eslintrc b/.eslintrc index 7148509..53bc67f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,4 +1,8 @@ -extends: 'es2015' +extends: 'airbnb-base' +env: + node: false + browser: true + commonjs: true rules: # specify whether double or single quotes should be used quotes: [2, "single", "avoid-escape"] @@ -32,3 +36,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] From 7a523f1987356b1006c969349a675ef961c9a9ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Thu, 16 Feb 2017 16:19:58 +0100 Subject: [PATCH 18/47] gulp eslint file disables browser environment. --- gulp/.eslintrc | 1 + package.json | 3 +++ 2 files changed, 4 insertions(+) diff --git a/gulp/.eslintrc b/gulp/.eslintrc index 8ea5f03..faf584b 100644 --- a/gulp/.eslintrc +++ b/gulp/.eslintrc @@ -1,2 +1,3 @@ env: node: true + browser: false diff --git a/package.json b/package.json index 03c7086..884f653 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,10 @@ "babel-preset-es2015": "^6.1.18", "browser-sync": "^2.6.5", "del": "^2.2.1", + "eslint": "^3.15.0", + "eslint-config-airbnb-base": "^11.1.0", "eslint-config-es2015": "^1.1.0", + "eslint-plugin-import": "^2.2.0", "gulp": "gulpjs/gulp.git#4.0", "gulp-autoprefixer": "^3.1.0", "gulp-changed": "^1.2.1", From 240c4379c13f3c77cd54ca749345100215b41d54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Thu, 16 Feb 2017 16:21:23 +0100 Subject: [PATCH 19/47] fix lint with airbnb-base rules. --- src/scripts/main.js | 14 +++++--------- src/scripts/vendor.js | 2 -- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/src/scripts/main.js b/src/scripts/main.js index 065152c..0290022 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,15 +1,11 @@ -'use strict'; +// This is how you require a component from node_modules +// Make sure to add it to the vendors in /src/scripts/vendor.js +const mediaQuery = require('sensible/mediaQuery'); // This is how you require your component script: require('elements/header/script'); -// This is how you require a component from node_modules -// Make sure to add it to the vendors in /src/scripts/vendor.js -var mediaQuery = require('sensible/mediaQuery'); - // The code for the website comes here. -if ( mediaQuery.isNot('mobile') ){ - console.log("I'm a not a mobile") +if (mediaQuery.isNot('mobile')) { + console.log("I'm a not a mobile"); } - - diff --git a/src/scripts/vendor.js b/src/scripts/vendor.js index 11cd041..7939759 100644 --- a/src/scripts/vendor.js +++ b/src/scripts/vendor.js @@ -1,4 +1,2 @@ -'use strict'; - // Require here all the files that you want to be bundled in the vendor.js file require('sensible/mediaQuery'); From 3159806f3ede5b2f5257c9768571f02fadd330f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 10:33:22 +0100 Subject: [PATCH 20/47] Removes our custom eslint rules (just kept the static complexity warnings) --- .eslintrc | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/.eslintrc b/.eslintrc index 53bc67f..56337e6 100644 --- a/.eslintrc +++ b/.eslintrc @@ -4,20 +4,10 @@ env: browser: true commonjs: true rules: - # specify whether double or single quotes should be used - quotes: [2, "single", "avoid-escape"] - # controls location of Use Strict Directives - strict: [2, "global"] - - # disallow use of multiple spaces - no-multi-spaces: [0] - - # 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) From af767714dffd702b19b5c14a545b4fee0dde7fa1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 11:34:10 +0100 Subject: [PATCH 21/47] Fixes lint error on header element. --- src/elements/header/script.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/elements/header/script.js b/src/elements/header/script.js index bbfa154..18f5d8d 100644 --- a/src/elements/header/script.js +++ b/src/elements/header/script.js @@ -1,7 +1,4 @@ -'use strict'; - - -function foo(){ +function foo() { // The code for this module comes here } From 45c6a399c349167f83272e2e69e698ed43909308 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 3 Feb 2017 18:19:39 +0100 Subject: [PATCH 22/47] Cache-busting on scripts, styles, images and logos. Only changes references on .html files. --- gulp/tasks/pages.js | 3 +++ gulp/tasks/scripts.js | 6 ++++++ gulp/tasks/styles.js | 8 +++++++- gulpfile.js | 10 +++++----- package.json | 5 ++++- 5 files changed, 25 insertions(+), 7 deletions(-) diff --git a/gulp/tasks/pages.js b/gulp/tasks/pages.js index 8013060..83118df 100644 --- a/gulp/tasks/pages.js +++ b/gulp/tasks/pages.js @@ -15,6 +15,8 @@ module.exports = function (gulp, $, config) { var baseDir = config.basePaths.src; var moduleHelpers = pageshelpers(config); + const isProd = process.env.NODE_ENV === 'production'; + // Put the default language at the root @@ -68,6 +70,7 @@ module.exports = function (gulp, $, config) { pugIncludeGlob() ] })) + .pipe($.if(isProd, $.revReplace({manifest: gulp.src(['build/**/rev-manifest.json'])}))) .pipe(gulp.dest(destPath)); } diff --git a/gulp/tasks/scripts.js b/gulp/tasks/scripts.js index 7f4b11c..5ffd8b4 100644 --- a/gulp/tasks/scripts.js +++ b/gulp/tasks/scripts.js @@ -9,6 +9,8 @@ module.exports = function (gulp, $, config) { var scriptsFiles = config.appFiles.scripts; var destPath = config.paths.scripts.dest; + const isProd = process.env.NODE_ENV === 'production'; + var task = function () { return gulp.src(scriptsFiles) .pipe($.plumber(handleError)) @@ -16,6 +18,10 @@ module.exports = function (gulp, $, config) { .pipe($.eslint.format()) .pipe(gulpWebpack(webpackConfig(config), webpack)) .pipe(gulp.dest(destPath)) + .pipe($.if(isProd, $.rev())) + .pipe($.if(isProd, gulp.dest(destPath))) + .pipe($.if(isProd, $.rev.manifest())) + .pipe($.if(isProd, gulp.dest(destPath))) .pipe(stream()); }; diff --git a/gulp/tasks/styles.js b/gulp/tasks/styles.js index ad2dbdb..b050ff3 100644 --- a/gulp/tasks/styles.js +++ b/gulp/tasks/styles.js @@ -1,4 +1,5 @@ 'use strict'; +var merge = require('merge-stream'); var stream = require('../utils/browserSync').stream; var handleError = require('../utils/handleError'); @@ -7,6 +8,8 @@ module.exports = function (gulp, $, config) { var destFiles = config.paths.styles.dest; var task = function () { + const isProd = process.env.NODE_ENV === 'production'; + return gulp.src(srcFiles) .pipe($.plumber(handleError)) .pipe($.cssGlobbing({ @@ -16,7 +19,10 @@ module.exports = function (gulp, $, config) { .pipe($.sass({includePaths: ['node_modules']})) .pipe($.autoprefixer({browsers: ['last 2 versions', 'ie 9']})) .pipe($.sourcemaps.write({includeContent: true})) - .pipe(gulp.dest(destFiles)) + .pipe($.if(isProd, $.rev())) + .pipe($.if(isProd, gulp.dest(destFiles))) + .pipe($.if(isProd, $.rev.manifest())) + .pipe($.if(isProd,gulp.dest(destFiles))) .pipe(stream({match: '**/*.css'})); }; diff --git a/gulpfile.js b/gulpfile.js index 3905edf..1031a37 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -29,14 +29,14 @@ gulp.task( 'build', gulp.series( 'clean', + 'build:assets', gulp.parallel( - gulp.series( - 'build:content', - 'build:pages' - ), - 'build:assets', 'build:styles', 'build:scripts' + ), + gulp.series( + 'build:content', + 'build:pages' ) ) ); diff --git a/package.json b/package.json index 884f653..870c2e8 100644 --- a/package.json +++ b/package.json @@ -31,10 +31,13 @@ "gulp-css-globbing": "^0.1.7", "gulp-data": "^1.2.0", "gulp-eslint": "^3.0.1", + "gulp-if": "^2.0.2", + "gulp-pug": "^3.2.0", "gulp-load-plugins": "^1.2.4", "gulp-notify": "^2.2.0", "gulp-plumber": "^1.0.0", - "gulp-pug": "^3.2.0", + "gulp-rev": "^7.1.2", + "gulp-rev-replace": "^0.4.3", "gulp-sass": "^2.0.1", "gulp-sourcemaps": "^1.5.2", "gulp-sync": "^0.1.4", From 96a1d6166c377e0fc27fcd8d62ebb3360c7fda37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Mon, 13 Feb 2017 10:27:26 +0100 Subject: [PATCH 23/47] Moved isProd to gulp/config. --- gulp/config.js | 5 ++--- gulp/tasks/pages.js | 6 +----- gulp/tasks/scripts.js | 10 ++++------ gulp/tasks/styles.js | 10 ++++------ 4 files changed, 11 insertions(+), 20 deletions(-) diff --git a/gulp/config.js b/gulp/config.js index 46d1df0..5b47e86 100644 --- a/gulp/config.js +++ b/gulp/config.js @@ -92,8 +92,7 @@ module.exports = function () { appFiles: appFiles, components: components, gulpFiles: gulpFiles, - environments: environments + environments: environments, + isProd: process.env.NODE_ENV === 'production' }; }; - - diff --git a/gulp/tasks/pages.js b/gulp/tasks/pages.js index 83118df..f9bbfdc 100644 --- a/gulp/tasks/pages.js +++ b/gulp/tasks/pages.js @@ -15,10 +15,6 @@ module.exports = function (gulp, $, config) { var baseDir = config.basePaths.src; var moduleHelpers = pageshelpers(config); - const isProd = process.env.NODE_ENV === 'production'; - - - // Put the default language at the root var getLanguagePath = function(language) { if (language === config.languages[0]) { @@ -70,7 +66,7 @@ module.exports = function (gulp, $, config) { pugIncludeGlob() ] })) - .pipe($.if(isProd, $.revReplace({manifest: gulp.src(['build/**/rev-manifest.json'])}))) + .pipe($.if(config.isProd, $.revReplace({manifest: gulp.src(['build/**/rev-manifest.json'])}))) .pipe(gulp.dest(destPath)); } diff --git a/gulp/tasks/scripts.js b/gulp/tasks/scripts.js index 5ffd8b4..86a4b41 100644 --- a/gulp/tasks/scripts.js +++ b/gulp/tasks/scripts.js @@ -9,8 +9,6 @@ module.exports = function (gulp, $, config) { var scriptsFiles = config.appFiles.scripts; var destPath = config.paths.scripts.dest; - const isProd = process.env.NODE_ENV === 'production'; - var task = function () { return gulp.src(scriptsFiles) .pipe($.plumber(handleError)) @@ -18,10 +16,10 @@ module.exports = function (gulp, $, config) { .pipe($.eslint.format()) .pipe(gulpWebpack(webpackConfig(config), webpack)) .pipe(gulp.dest(destPath)) - .pipe($.if(isProd, $.rev())) - .pipe($.if(isProd, gulp.dest(destPath))) - .pipe($.if(isProd, $.rev.manifest())) - .pipe($.if(isProd, gulp.dest(destPath))) + .pipe($.if(config.isProd, $.rev())) + .pipe($.if(config.isProd, gulp.dest(destPath))) + .pipe($.if(config.isProd, $.rev.manifest())) + .pipe($.if(config.isProd, gulp.dest(destPath))) .pipe(stream()); }; diff --git a/gulp/tasks/styles.js b/gulp/tasks/styles.js index b050ff3..53af92b 100644 --- a/gulp/tasks/styles.js +++ b/gulp/tasks/styles.js @@ -8,8 +8,6 @@ module.exports = function (gulp, $, config) { var destFiles = config.paths.styles.dest; var task = function () { - const isProd = process.env.NODE_ENV === 'production'; - return gulp.src(srcFiles) .pipe($.plumber(handleError)) .pipe($.cssGlobbing({ @@ -19,10 +17,10 @@ module.exports = function (gulp, $, config) { .pipe($.sass({includePaths: ['node_modules']})) .pipe($.autoprefixer({browsers: ['last 2 versions', 'ie 9']})) .pipe($.sourcemaps.write({includeContent: true})) - .pipe($.if(isProd, $.rev())) - .pipe($.if(isProd, gulp.dest(destFiles))) - .pipe($.if(isProd, $.rev.manifest())) - .pipe($.if(isProd,gulp.dest(destFiles))) + .pipe($.if(config.isProd, $.rev())) + .pipe($.if(config.isProd, gulp.dest(destFiles))) + .pipe($.if(config.isProd, $.rev.manifest())) + .pipe($.if(config.isProd,gulp.dest(destFiles))) .pipe(stream({match: '**/*.css'})); }; From 01efe7c361d3346c9f7f5087137626a97d8d4f8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Mon, 13 Feb 2017 13:39:32 +0100 Subject: [PATCH 24/47] Forces build to be on production mode --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 870c2e8..e57c9d2 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "gulp": "gulp", "start": "gulp", - "build": "gulp build", + "build": "NODE_ENV=production gulp build", "test": "gulp test", "serve": "gulp serve", "deploy": "gulp deploy" From 168de9d1e648f0460696122603a4367493e9b593 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Mon, 13 Feb 2017 13:40:25 +0100 Subject: [PATCH 25/47] =?UTF-8?q?doesn=E2=80=99t=20write=20original=20js?= =?UTF-8?q?=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit renames vendor.min to vendor (as it is now minified with an hash). --- gulp/tasks/scripts.js | 3 +-- src/layouts/default.pug | 3 ++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/gulp/tasks/scripts.js b/gulp/tasks/scripts.js index 86a4b41..168c345 100644 --- a/gulp/tasks/scripts.js +++ b/gulp/tasks/scripts.js @@ -15,11 +15,10 @@ module.exports = function (gulp, $, config) { .pipe($.eslint()) .pipe($.eslint.format()) .pipe(gulpWebpack(webpackConfig(config), webpack)) - .pipe(gulp.dest(destPath)) .pipe($.if(config.isProd, $.rev())) .pipe($.if(config.isProd, gulp.dest(destPath))) .pipe($.if(config.isProd, $.rev.manifest())) - .pipe($.if(config.isProd, gulp.dest(destPath))) + .pipe(gulp.dest(destPath)) .pipe(stream()); }; diff --git a/src/layouts/default.pug b/src/layouts/default.pug index c253e4f..7448fad 100644 --- a/src/layouts/default.pug +++ b/src/layouts/default.pug @@ -15,5 +15,6 @@ html(lang=language) body block body - script(src=relativePath + '/js/vendor.min.js') + + script(src=relativePath + '/js/vendor.js') script(src=relativePath + '/js/main.js') From 3c309a857059b0cdc3132c3716fff69534172148 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Mon, 13 Feb 2017 13:41:10 +0100 Subject: [PATCH 26/47] fixes css files not being copied on non production. --- gulp/tasks/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gulp/tasks/styles.js b/gulp/tasks/styles.js index 53af92b..298326a 100644 --- a/gulp/tasks/styles.js +++ b/gulp/tasks/styles.js @@ -20,7 +20,7 @@ module.exports = function (gulp, $, config) { .pipe($.if(config.isProd, $.rev())) .pipe($.if(config.isProd, gulp.dest(destFiles))) .pipe($.if(config.isProd, $.rev.manifest())) - .pipe($.if(config.isProd,gulp.dest(destFiles))) + .pipe(gulp.dest(destFiles)) .pipe(stream({match: '**/*.css'})); }; From ff33cd0741dc28e156244f1b7e349e0791dd6c76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Mon, 13 Feb 2017 13:41:43 +0100 Subject: [PATCH 27/47] Also cache-busts images and logos. --- gulp/tasks/assets.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/gulp/tasks/assets.js b/gulp/tasks/assets.js index d547d0d..75be668 100644 --- a/gulp/tasks/assets.js +++ b/gulp/tasks/assets.js @@ -14,10 +14,17 @@ module.exports = function (gulp, $, config) { var task = function () { var 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())) + .pipe(gulp.dest(imagesDest)) + ; var 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())) .pipe(gulp.dest(logosDest)); var faviconsSt = gulp.src(faviconsSrc) From 799f8749ba21be33924613b099d081b04ecb3ea8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Thu, 16 Feb 2017 10:37:08 +0100 Subject: [PATCH 28/47] Removes unused merge import. --- gulp/tasks/styles.js | 1 - 1 file changed, 1 deletion(-) diff --git a/gulp/tasks/styles.js b/gulp/tasks/styles.js index 298326a..6ae3264 100644 --- a/gulp/tasks/styles.js +++ b/gulp/tasks/styles.js @@ -1,5 +1,4 @@ 'use strict'; -var merge = require('merge-stream'); var stream = require('../utils/browserSync').stream; var handleError = require('../utils/handleError'); From 5dd66fe8b713958bda61aa5aab06ca04a4cc3a62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Thu, 16 Feb 2017 11:42:45 +0100 Subject: [PATCH 29/47] uses gulp-rev-replace also on scripts. merges all rev-manifest files into one. --- gulp/config.js | 3 +++ gulp/tasks/assets.js | 5 +++-- gulp/tasks/pages.js | 3 ++- gulp/tasks/scripts.js | 5 ++++- gulp/tasks/styles.js | 10 +++++++--- 5 files changed, 19 insertions(+), 7 deletions(-) diff --git a/gulp/config.js b/gulp/config.js index 5b47e86..7113900 100644 --- a/gulp/config.js +++ b/gulp/config.js @@ -50,6 +50,9 @@ module.exports = function () { fonts: { src: basePaths.assets + 'fonts/', dest: basePaths.dest + 'assets/fonts/' + }, + revManifest: { + dest: basePaths.dest + 'rev-manifest.json' } }; diff --git a/gulp/tasks/assets.js b/gulp/tasks/assets.js index 75be668..ef49ef5 100644 --- a/gulp/tasks/assets.js +++ b/gulp/tasks/assets.js @@ -10,13 +10,14 @@ module.exports = function (gulp, $, config) { var faviconsDest = config.paths.favicons.dest; var fontsSrc = config.appFiles.fonts; var fontsDest = config.paths.fonts.dest; + var manifestFile = config.paths.revManifest.dest; var task = function () { var imagesSt = gulp.src(imagesSrc) .pipe($.changed(imagesDest)) .pipe($.if(config.isProd, $.rev())) .pipe($.if(config.isProd, gulp.dest(imagesDest))) - .pipe($.if(config.isProd, $.rev.manifest())) + .pipe($.if(config.isProd, $.rev.manifest(manifestFile, { merge: true, base: imagesDest }))) .pipe(gulp.dest(imagesDest)) ; @@ -24,7 +25,7 @@ module.exports = function (gulp, $, config) { .pipe($.changed(logosSrc)) .pipe($.if(config.isProd, $.rev())) .pipe($.if(config.isProd, gulp.dest(logosSrc))) - .pipe($.if(config.isProd, $.rev.manifest())) + .pipe($.if(config.isProd, $.rev.manifest(manifestFile, { merge: true, base: logosDest }))) .pipe(gulp.dest(logosDest)); var faviconsSt = gulp.src(faviconsSrc) diff --git a/gulp/tasks/pages.js b/gulp/tasks/pages.js index f9bbfdc..cbf3d33 100644 --- a/gulp/tasks/pages.js +++ b/gulp/tasks/pages.js @@ -14,6 +14,7 @@ module.exports = function (gulp, $, config) { var contentPath = config.paths.content.dest; var baseDir = config.basePaths.src; var moduleHelpers = pageshelpers(config); + var manifestFile = config.paths.revManifest.dest; // Put the default language at the root var getLanguagePath = function(language) { @@ -66,7 +67,7 @@ module.exports = function (gulp, $, config) { pugIncludeGlob() ] })) - .pipe($.if(config.isProd, $.revReplace({manifest: gulp.src(['build/**/rev-manifest.json'])}))) + .pipe($.if(config.isProd, $.revReplace({manifest: gulp.src(manifestFile)}))) .pipe(gulp.dest(destPath)); } diff --git a/gulp/tasks/scripts.js b/gulp/tasks/scripts.js index 168c345..d2acc36 100644 --- a/gulp/tasks/scripts.js +++ b/gulp/tasks/scripts.js @@ -8,6 +8,9 @@ var webpackConfig = require('../../webpack.config'); module.exports = function (gulp, $, config) { var scriptsFiles = config.appFiles.scripts; var destPath = config.paths.scripts.dest; + var manifestFile = config.paths.revManifest.dest; + + var task = function () { return gulp.src(scriptsFiles) @@ -17,7 +20,7 @@ module.exports = function (gulp, $, config) { .pipe(gulpWebpack(webpackConfig(config), webpack)) .pipe($.if(config.isProd, $.rev())) .pipe($.if(config.isProd, gulp.dest(destPath))) - .pipe($.if(config.isProd, $.rev.manifest())) + .pipe($.if(config.isProd, $.rev.manifest(manifestFile, { merge: true, base: destPath }))) .pipe(gulp.dest(destPath)) .pipe(stream()); }; diff --git a/gulp/tasks/styles.js b/gulp/tasks/styles.js index 6ae3264..be03210 100644 --- a/gulp/tasks/styles.js +++ b/gulp/tasks/styles.js @@ -3,8 +3,11 @@ var stream = require('../utils/browserSync').stream; var handleError = require('../utils/handleError'); module.exports = function (gulp, $, config) { - var srcFiles = config.appFiles.styles; - var destFiles = config.paths.styles.dest; + var srcFiles = config.appFiles.styles; + var destFiles = config.paths.styles.dest; + // previously rev files such as assets that might have been referenced + // in the styles (and their path needs to be updated) + var manifestFile = config.paths.revManifest.dest; var task = function () { return gulp.src(srcFiles) @@ -16,9 +19,10 @@ module.exports = function (gulp, $, config) { .pipe($.sass({includePaths: ['node_modules']})) .pipe($.autoprefixer({browsers: ['last 2 versions', 'ie 9']})) .pipe($.sourcemaps.write({includeContent: true})) + .pipe($.if(config.isProd, $.revReplace({manifest: gulp.src(manifestFile)}))) .pipe($.if(config.isProd, $.rev())) .pipe($.if(config.isProd, gulp.dest(destFiles))) - .pipe($.if(config.isProd, $.rev.manifest())) + .pipe($.if(config.isProd, $.rev.manifest(manifestFile, { merge: true, base: destFiles }))) .pipe(gulp.dest(destFiles)) .pipe(stream({match: '**/*.css'})); }; From 8818e0813aefc1d2d96abcde8b8356f0ebb7d013 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Thu, 16 Feb 2017 18:24:29 +0100 Subject: [PATCH 30/47] =?UTF-8?q?defensive=20programming=20when=20there?= =?UTF-8?q?=E2=80=99s=20no=20images.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gulp/tasks/pages.js | 13 +++++++------ gulp/tasks/styles.js | 3 ++- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/gulp/tasks/pages.js b/gulp/tasks/pages.js index cbf3d33..69e472f 100644 --- a/gulp/tasks/pages.js +++ b/gulp/tasks/pages.js @@ -1,10 +1,11 @@ 'use strict'; -var yamljs = require('yamljs'); +var fs = require('fs'); +var yamljs = require('yamljs'); var pugIncludeGlob = require('pug-include-glob'); -var merge = require('merge-stream'); -var path = require('path'); -var pageshelpers = require('../utils/pagesHelpers'); -var handleError = require('../utils/handleError'); +var merge = require('merge-stream'); +var path = require('path'); +var pageshelpers = require('../utils/pagesHelpers'); +var handleError = require('../utils/handleError'); module.exports = function (gulp, $, config) { @@ -67,7 +68,7 @@ module.exports = function (gulp, $, config) { pugIncludeGlob() ] })) - .pipe($.if(config.isProd, $.revReplace({manifest: gulp.src(manifestFile)}))) + .pipe($.if(config.isProd, $.revReplace({manifest: fs.existsSync(manifestFile) && gulp.src([manifestFile])}))) .pipe(gulp.dest(destPath)); } diff --git a/gulp/tasks/styles.js b/gulp/tasks/styles.js index be03210..88d2fa2 100644 --- a/gulp/tasks/styles.js +++ b/gulp/tasks/styles.js @@ -1,4 +1,5 @@ 'use strict'; +var fs = require('fs'); var stream = require('../utils/browserSync').stream; var handleError = require('../utils/handleError'); @@ -19,7 +20,7 @@ module.exports = function (gulp, $, config) { .pipe($.sass({includePaths: ['node_modules']})) .pipe($.autoprefixer({browsers: ['last 2 versions', 'ie 9']})) .pipe($.sourcemaps.write({includeContent: true})) - .pipe($.if(config.isProd, $.revReplace({manifest: gulp.src(manifestFile)}))) + .pipe($.if(config.isProd, $.revReplace({manifest: fs.existsSync(manifestFile) && gulp.src(manifestFile)}))) .pipe($.if(config.isProd, $.rev())) .pipe($.if(config.isProd, gulp.dest(destFiles))) .pipe($.if(config.isProd, $.rev.manifest(manifestFile, { merge: true, base: destFiles }))) From d8d3b6978f0a09bded29e706df6b91505aa8397b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 11:46:27 +0100 Subject: [PATCH 31/47] Fixes webpack commonchunks plugin vendor splitting. --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 1aff632..b90028b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -56,7 +56,7 @@ module.exports = config => { // larger bundle whenever a new page is visited. new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', - filename: 'vendor.min.js', + filename: 'vendor.js', }) ] }; From 941d9bfa2a0a639fe1c28058572f0bf98714b62e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 12:55:59 +0100 Subject: [PATCH 32/47] Moves .eslint from gulp to root (default is node) and creates .eslint in src/ for browser linting. --- .eslintrc | 5 ++--- gulp/.eslintrc | 3 --- src/.eslintrc | 4 ++++ 3 files changed, 6 insertions(+), 6 deletions(-) delete mode 100644 gulp/.eslintrc create mode 100644 src/.eslintrc diff --git a/.eslintrc b/.eslintrc index 56337e6..0a63f2f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,8 +1,7 @@ extends: 'airbnb-base' env: - node: false - browser: true - commonjs: true + node: true + browser: false rules: # ------------------- diff --git a/gulp/.eslintrc b/gulp/.eslintrc deleted file mode 100644 index faf584b..0000000 --- a/gulp/.eslintrc +++ /dev/null @@ -1,3 +0,0 @@ -env: - node: true - browser: false diff --git a/src/.eslintrc b/src/.eslintrc new file mode 100644 index 0000000..6e6e925 --- /dev/null +++ b/src/.eslintrc @@ -0,0 +1,4 @@ +env: + node: false + browser: true + commonjs: true From be6e418d5272022734e2191e33869bbbc990078d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 12:58:22 +0100 Subject: [PATCH 33/47] Fixes linting on webpack.config.js --- webpack.config.js | 118 ++++++++++++++++++++++------------------------ 1 file changed, 57 insertions(+), 61 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index b90028b..4c9969d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,63 +1,59 @@ -'use strict'; - const webpack = require('webpack'); const path = require('path'); -const globEntries = require('webpack-glob-entries') - -module.exports = config => { - return { - // Here the application starts executing - // and webpack starts bundling - // can be string | object {entryname: entrypath} | array - // we are using an object here (result of `globEntries`) - entry: globEntries(config.appFiles.scripts), - - // options related to how webpack emits results - output: { - // the filename template for entry chunks - filename: '[name].js', - - // the target directory for all output files - // must be an absolute path (thus the `path.resolve`) - path: path.resolve(__dirname, 'build') - }, - - module: { - rules: [ - { - test: /\.js$/, - exclude: /node_modules/, - use: [ - 'babel-loader' - ] - } - ], - }, - - - // options for resolving module requests - resolve: { - - // directories where to look for modules - modules: [ - 'node_modules', - path.join(__dirname, '.'), - path.resolve(__dirname, 'src') - ] - }, - - plugins: [ - // The CommonsChunkPlugin is an opt-in feature that creates a separate file - // (known as a chunk), consisting of common modules shared between multiple - // entry points. By separating common modules from bundles, the resulting - // chunked file can be loaded once initially, and stored in cache for later - // use. This results in pagespeed optimizations as the browser can quickly - // serve the shared code from cache, rather than being forced to load a - // larger bundle whenever a new page is visited. - new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - filename: 'vendor.js', - }) - ] - }; -}; +const globEntries = require('webpack-glob-entries'); + +module.exports = config => ({ + // Here the application starts executing + // and webpack starts bundling + // can be string | object {entryname: entrypath} | array + // we are using an object here (result of `globEntries`) + entry: globEntries(config.appFiles.scripts), + + // options related to how webpack emits results + output: { + // the filename template for entry chunks + filename: '[name].js', + + // the target directory for all output files + // must be an absolute path (thus the `path.resolve`) + path: path.resolve(__dirname, 'build'), + }, + + module: { + rules: [ + { + test: /\.js$/, + exclude: /node_modules/, + use: [ + 'babel-loader', + ], + }, + ], + }, + + + // options for resolving module requests + resolve: { + + // directories where to look for modules + modules: [ + 'node_modules', + path.join(__dirname, '.'), + path.resolve(__dirname, 'src'), + ], + }, + + plugins: [ + // The CommonsChunkPlugin is an opt-in feature that creates a separate file + // (known as a chunk), consisting of common modules shared between multiple + // entry points. By separating common modules from bundles, the resulting + // chunked file can be loaded once initially, and stored in cache for later + // use. This results in pagespeed optimizations as the browser can quickly + // serve the shared code from cache, rather than being forced to load a + // larger bundle whenever a new page is visited. + new webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + filename: 'vendor.js', + }), + ], +}); From c1029d2de246a83ea3562f59e76dfeb5d3a77eed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 13:00:37 +0100 Subject: [PATCH 34/47] Fixes linting. --- .eslintrc | 23 ++++++ gulp/config.js | 146 ++++++++++++++++++------------------- gulp/tasks/assets.js | 33 ++++----- gulp/tasks/clean.js | 12 +-- gulp/tasks/content.js | 25 ++++--- gulp/tasks/deploy.js | 89 ++++++++++------------ gulp/tasks/pages.js | 96 ++++++++++++------------ gulp/tasks/scripts.js | 34 ++++----- gulp/tasks/serve.js | 58 ++++++--------- gulp/tasks/styles.js | 40 +++++----- gulp/tasks/tasks.js | 16 ++-- gulp/utils/browserSync.js | 17 ++--- gulp/utils/handleError.js | 21 +++--- gulp/utils/pagesHelpers.js | 47 ++++++------ gulp/utils/tasksHelpers.js | 14 ++-- gulpfile.js | 33 ++++----- webpack.config.js | 31 ++++---- 17 files changed, 359 insertions(+), 376 deletions(-) diff --git a/.eslintrc b/.eslintrc index 0a63f2f..1b940d8 100644 --- a/.eslintrc +++ b/.eslintrc @@ -4,6 +4,29 @@ env: browser: false rules: + # Forces alignment of objects values and colons of both single line objects + # and multiLine objects. This promotes smaller diffs. + key-spacing: + - 2 + - singleLine: + beforeColon: false + afterColon: true + multiLine: + beforeColon: true + afterColon: true + align: colon + + no-multi-spaces: + - 2 + - exceptions: + VariableDeclarator: true + + no-multiple-empty-lines: + - 2 + - max: 1 + + + # ------------------- # Static Complexity Rules: they guide us to write better code. # ------------------- diff --git a/gulp/config.js b/gulp/config.js index 7113900..030b2c5 100644 --- a/gulp/config.js +++ b/gulp/config.js @@ -1,101 +1,99 @@ -'use strict'; -var argv = require('yargs').argv; -var path = require('path'); +const argv = require('yargs').argv; +const path = require('path'); -module.exports = function () { - - var basePaths = { - root: path.join(__dirname, '..'), - src: 'src/', - content: 'content/', - assets: 'assets/', - dest: 'build/', - tmp: '.tmp/' +module.exports = () => { + const basePaths = { + root : path.join(__dirname, '..'), + src : 'src/', + content : 'content/', + assets : 'assets/', + dest : 'build/', + tmp : '.tmp/', }; - var languages = ['en']; + const languages = ['en']; - var paths = { - scripts: { - src: basePaths.src + 'scripts/', - dest: basePaths.dest + 'js/' + const paths = { + scripts : { + src : `${basePaths.src}scripts/`, + dest : `${basePaths.dest}js/`, + }, + styles : { + src : `${basePaths.src}styles/`, + dest : `${basePaths.dest}css/`, }, - styles: { - src: basePaths.src + 'styles/', - dest: basePaths.dest + 'css/' + content : { + src : `${basePaths.content}texts/`, + dest : `${basePaths.dest}content/texts/`, }, - content: { - src: basePaths.content + 'texts/', - dest: basePaths.dest + 'content/texts/' + pages : { + src : `${basePaths.src}pages/`, + dest : basePaths.dest, }, - pages: { - src: basePaths.src + 'pages/', - dest: basePaths.dest + layouts : { + src : `${basePaths.src}layouts/`, }, - layouts: { - src: basePaths.src + 'layouts/' + images : { + src : `${basePaths.content}images/`, + dest : `${basePaths.dest}content/images/`, }, - images: { - src: basePaths.content + 'images/', - dest: basePaths.dest + 'content/images/' + logos : { + src : `${basePaths.assets}logos/`, + dest : `${basePaths.dest}assets/logos/`, }, - logos: { - src: basePaths.assets + 'logos/', - dest: basePaths.dest + 'assets/logos/' + favicons : { + src : `${basePaths.assets}favicons/`, + dest : basePaths.dest, }, - favicons: { - src: basePaths.assets + 'favicons/', - dest: basePaths.dest + fonts : { + src : `${basePaths.assets}fonts/`, + dest : `${basePaths.dest}assets/fonts/`, }, - fonts: { - src: basePaths.assets + 'fonts/', - dest: basePaths.dest + 'assets/fonts/' + revManifest : { + dest : `${basePaths.dest}rev-manifest.json`, }, - 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 + '**/*.pug', - layouts: paths.layouts.src + '**/*.pug', - 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 + 'elements/' + const components = [ + `${basePaths.src}modules/`, + `${basePaths.src}elements/`, ]; - var gulpFiles = [ + const gulpFiles = [ 'gulp/**/*.js', - 'gulpfile.js' + 'gulpfile.js', ]; - var environments = { - testing: { - host: argv.host, - username: argv.username, - projectPath: 'preview.ginetta.net/skeleton/', // 'client.ginetta.net/project-name/' - releasePath: argv.path, - privateKey: argv.privateKey - } + const environments = { + testing : { + host : argv.host, + username : argv.username, + projectPath : 'preview.ginetta.net/skeleton/', // 'client.ginetta.net/project-name/' + releasePath : argv.path, + privateKey : argv.privateKey, + }, }; return { - basePaths: basePaths, - languages: languages, - paths: paths, - appFiles: appFiles, - components: components, - gulpFiles: gulpFiles, - environments: environments, - isProd: process.env.NODE_ENV === 'production' + basePaths, + languages, + paths, + appFiles, + components, + gulpFiles, + environments, + isProd : process.env.NODE_ENV === 'production', }; }; diff --git a/gulp/tasks/assets.js b/gulp/tasks/assets.js index ef49ef5..39c71b3 100644 --- a/gulp/tasks/assets.js +++ b/gulp/tasks/assets.js @@ -1,19 +1,18 @@ -'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; - var manifestFile = config.paths.revManifest.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($.if(config.isProd, $.rev())) .pipe($.if(config.isProd, gulp.dest(imagesDest))) @@ -21,18 +20,18 @@ module.exports = function (gulp, $, config) { .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)); diff --git a/gulp/tasks/clean.js b/gulp/tasks/clean.js index 6ac90a2..8cc9029 100644 --- a/gulp/tasks/clean.js +++ b/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; }; - diff --git a/gulp/tasks/content.js b/gulp/tasks/content.js index 9fbeda7..dbfb998 100644 --- a/gulp/tasks/content.js +++ b/gulp/tasks/content.js @@ -1,18 +1,19 @@ -'use strict'; -var merge = require('merge-stream'); +const merge = require('merge-stream'); -module.exports = function (gulp, $, config) { - var srcFiles = config.paths.content.src; - var languages = config.languages; - var destFiles = config.paths.content.dest; +module.exports = (gulp, $, config) => { + const srcFiles = config.paths.content.src; + const languages = config.languages; + const destFiles = config.paths.content.dest; - var task = function () { + const task = () => { // Generate the language file for each language - var contentStreams = languages.map(function(language) { - return gulp.src(srcFiles + language + '/**/*.yml') - .pipe($.concat(language + '.yml')) - // TODO: warn when there is a duplicate key - .pipe(gulp.dest(destFiles)); + // eslint-disable-next-line arrow-body-style + const contentStreams = languages.map((language) => { + return gulp.src(`${srcFiles}${language}/**/*.yml`) + .pipe($.concat(`${language}.yml`)) + // TODO: warn when there is a duplicate key + .pipe(gulp.dest(destFiles)) + ; }); return merge(contentStreams); diff --git a/gulp/tasks/deploy.js b/gulp/tasks/deploy.js index 02e245d..b79acca 100644 --- a/gulp/tasks/deploy.js +++ b/gulp/tasks/deploy.js @@ -1,69 +1,60 @@ -'use strict'; -var gutil = require('gulp-util'); -var rsync = require('rsyncwrapper'); - - -module.exports = function (gulp, $, config) { - var environment = config.environments.testing; - var defaultPath = '/home/www-clients/'; - var serverPath = environment.username + '@' + environment.host; - var deploySrc = config.basePaths.dest; - var deployDest = serverPath + ':' + defaultPath + environment.projectPath + environment.releasePath; - - - var task = function (done) { - var rsyncOptions = { - ssh: true, - src: deploySrc, - dest: deployDest, - recursive: true, - delete: true, - privateKey: environment.privateKey, - onStdout: function (data) { - console.log(data.toString('utf8')); - }, - onStderr: function (data) { - gutil.log(data.toString('utf8')); - }, - args: ['-av'] +const gutil = require('gulp-util'); +const rsync = require('rsyncwrapper'); + +module.exports = (gulp, $, config) => { + const environment = config.environments.testing; + const defaultPath = '/home/www-clients/'; + const serverPath = `${environment.username}@${environment.host}`; + const deploySrc = config.basePaths.dest; + const deployDest = `${serverPath}:${defaultPath}${environment.projectPath}${environment.releasePath}`; + + const task = (done) => { + const rsyncOptions = { + ssh : true, + src : deploySrc, + dest : deployDest, + recursive : true, + delete : true, + privateKey : environment.privateKey, + // eslint-disable-next-line no-console + onStdout : data => console.log(data.toString('utf8')), + onStderr : data => gutil.log(data.toString('utf8')), + args : ['-av'], }; - if(!environment.username) { + if (!environment.username) { throw new gutil.PluginError({ - plugin: 'Gulp deploy', - message: 'You should specify a username for the deployement. ' + - 'Example: gulp deploy --path=pulls/1 --username=testuser --host=domain.com' + plugin : 'Gulp deploy', + message : 'You should specify a username for the deployement. ' + + 'Example: gulp deploy --path=pulls/1 --username=testuser --host=domain.com', }); } - if(!environment.host) { + if (!environment.host) { throw new gutil.PluginError({ - plugin: 'Gulp deploy', - message: 'You should specify a host for the deployement. ' + - 'Example: gulp deploy --path=pulls/1 --username=testuser --host=domain.com' + plugin : 'Gulp deploy', + message : 'You should specify a host for the deployement. ' + + 'Example: gulp deploy --path=pulls/1 --username=testuser --host=domain.com', }); } - if(!environment.releasePath) { + if (!environment.releasePath) { throw new gutil.PluginError({ - plugin: 'Gulp deploy', - message: 'You should specify a path for the deployement. ' + - 'Example: gulp deploy --path=pulls/1 --username=testuser --host=domain.com' + plugin : 'Gulp deploy', + message : 'You should specify a path for the deployement. ' + + 'Example: gulp deploy --path=pulls/1 --username=testuser --host=domain.com', }); } - - rsync(rsyncOptions, function(error, stdout) { - gutil.log(stdout); - if(error) { - gutil.log(error); - } - done(); + rsync(rsyncOptions, (error, stdout) => { + gutil.log(stdout); + if (error) { + gutil.log(error); + } + done(); }); }; task.description = 'Deploys to testing'; return task; }; - - diff --git a/gulp/tasks/pages.js b/gulp/tasks/pages.js index 69e472f..00353b5 100644 --- a/gulp/tasks/pages.js +++ b/gulp/tasks/pages.js @@ -1,79 +1,73 @@ -'use strict'; -var fs = require('fs'); -var yamljs = require('yamljs'); -var pugIncludeGlob = require('pug-include-glob'); -var merge = require('merge-stream'); -var path = require('path'); -var pageshelpers = require('../utils/pagesHelpers'); -var handleError = require('../utils/handleError'); +const fs = require('fs'); +const yamljs = require('yamljs'); +const pugIncludeGlob = require('pug-include-glob'); +const merge = require('merge-stream'); +const path = require('path'); +const pageshelpers = require('../utils/pagesHelpers'); +const handleError = require('../utils/handleError'); - -module.exports = function (gulp, $, config) { - var srcFiles = config.appFiles.pages; - var destFiles = config.paths.pages.dest; - var languages = config.languages; - var contentPath = config.paths.content.dest; - var baseDir = config.basePaths.src; - var moduleHelpers = pageshelpers(config); - var manifestFile = config.paths.revManifest.dest; +module.exports = (gulp, $, config) => { + const srcFiles = config.appFiles.pages; + const destFiles = config.paths.pages.dest; + const languages = config.languages; + const contentPath = config.paths.content.dest; + const baseDir = config.basePaths.src; + const moduleHelpers = pageshelpers(config); + const manifestFile = config.paths.revManifest.dest; // Put the default language at the root - var getLanguagePath = function(language) { + const getLanguagePath = (language) => { if (language === config.languages[0]) { return ''; - } else { - return language + '/'; } + return `${language}/`; }; // Returns the relative path between the page and the root of the web server - var getRelativePath = function(file, language) { - var destPath = config.paths.pages.src + getLanguagePath(language); - var filePath = path.dirname(file.path); - return (path.relative(filePath, destPath) || '.') + '/'; + const getRelativePath = (file, language) => { + const destPath = config.paths.pages.src + getLanguagePath(language); + const filePath = path.dirname(file.path); + return `${path.relative(filePath, destPath) || '.'}/`; }; - var task = function () { - + const task = () => { // Load the content for the page function loadContent(language) { - - return yamljs.load(contentPath + language + '.yml'); + return yamljs.load(`${contentPath}${language}.yml`); } function getDestPath(language) { - var destPath = destFiles + getLanguagePath(language); + const destPath = destFiles + getLanguagePath(language); return destPath; } - function compilePages(language) { - var destPath = getDestPath(language); + const destPath = getDestPath(language); return gulp.src(srcFiles) - .pipe($.plumber(handleError)) - .pipe($.data(function(file) { - return { - data: loadContent(language), - relativePath: getRelativePath(file, language), - helpers: moduleHelpers, - language: language - }; - })) - .pipe($.pug({ - client: false, - pretty: true, - basedir: baseDir, - plugins: [ - pugIncludeGlob() - ] - })) - .pipe($.if(config.isProd, $.revReplace({manifest: fs.existsSync(manifestFile) && gulp.src([manifestFile])}))) - .pipe(gulp.dest(destPath)); + .pipe($.plumber(handleError)) + .pipe($.data(file => ({ + data : loadContent(language), + relativePath : getRelativePath(file, language), + helpers : moduleHelpers, + language, + }))) + .pipe($.pug({ + client : false, + pretty : true, + basedir : baseDir, + plugins : [ + pugIncludeGlob(), + ], + })) + .pipe($.if(config.isProd, $.revReplace({ + manifest : fs.existsSync(manifestFile) && gulp.src([manifestFile]), + }))) + .pipe(gulp.dest(destPath)); } // Generate the pages for each language - var pagesStreams = languages.map(compilePages); + const pagesStreams = languages.map(compilePages); return merge(pagesStreams); }; diff --git a/gulp/tasks/scripts.js b/gulp/tasks/scripts.js index d2acc36..184f299 100644 --- a/gulp/tasks/scripts.js +++ b/gulp/tasks/scripts.js @@ -1,29 +1,29 @@ -'use strict'; -var stream = require('../utils/browserSync').stream; -var handleError = require('../utils/handleError'); -var webpack = require('webpack'); -var gulpWebpack = require('webpack-stream'); -var webpackConfig = require('../../webpack.config'); +const stream = require('../utils/browserSync').stream; +const handleError = require('../utils/handleError'); +const webpack = require('webpack'); +const gulpWebpack = require('webpack-stream'); +const webpackConfig = require('../../webpack.config'); -module.exports = function (gulp, $, config) { - var scriptsFiles = config.appFiles.scripts; - var destPath = config.paths.scripts.dest; - var manifestFile = config.paths.revManifest.dest; +module.exports = (gulp, $, config) => { + const scriptsFiles = config.appFiles.scripts; + const destPath = config.paths.scripts.dest; + const manifestFile = config.paths.revManifest.dest; - - - var task = function () { - return gulp.src(scriptsFiles) + const task = () => + gulp.src(scriptsFiles) .pipe($.plumber(handleError)) .pipe($.eslint()) .pipe($.eslint.format()) .pipe(gulpWebpack(webpackConfig(config), webpack)) .pipe($.if(config.isProd, $.rev())) .pipe($.if(config.isProd, gulp.dest(destPath))) - .pipe($.if(config.isProd, $.rev.manifest(manifestFile, { merge: true, base: destPath }))) + .pipe($.if(config.isProd, $.rev.manifest(manifestFile, { + merge : true, + base : destPath, + }))) .pipe(gulp.dest(destPath)) - .pipe(stream()); - }; + .pipe(stream()) + ; task.description = 'Move all javscript files to the build'; return task; diff --git a/gulp/tasks/serve.js b/gulp/tasks/serve.js index d443fae..b15a9b8 100644 --- a/gulp/tasks/serve.js +++ b/gulp/tasks/serve.js @@ -1,37 +1,27 @@ -'use strict'; -var browserSync = require('../utils/browserSync'); -var reload = browserSync.reload; - -var _ = require('lodash'); - -module.exports = function (gulp, $, config) { - var serverBase = config.basePaths.dest; - var scriptFiles = [config.appFiles.scripts]; - var stylesFiles = [config.appFiles.styles]; - var pagesFiles = [config.appFiles.pages, config.appFiles.layouts]; - var contentSrcFiles = config.appFiles.content; - var gulpFiles = config.gulpFiles; - var logosFiles = config.appFiles.logos; - var faviconsFiles = config.appFiles.favicons; - var imagesFiles = config.appFiles.images; - var fontsFiles = config.appFiles.fonts; - - var componentsDirs = config.components; - - _.map(componentsDirs, function(componentDir) { - scriptFiles.push(componentDir + '**/*.js'); - }); - _.map(componentsDirs, function(componentDir) { - stylesFiles.push(componentDir + '**/*.scss'); - }); - _.map(componentsDirs, function(componentDir) { - pagesFiles.push(componentDir + '**/*.pug'); - }); - _.map(componentsDirs, function(componentDir) { - pagesFiles.push(componentDir + '**/*.yml'); - }); - - var task = function () { +const _ = require('lodash'); +const browserSync = require('../utils/browserSync'); + +const reload = browserSync.reload; + +// eslint-disable-next-line max-statements +module.exports = (gulp, $, config) => { + const serverBase = config.basePaths.dest; + const scriptFiles = [config.appFiles.scripts]; + const stylesFiles = [config.appFiles.styles]; + const pagesFiles = [config.appFiles.pages, config.appFiles.layouts]; + const contentSrcFiles = config.appFiles.content; + const logosFiles = config.appFiles.logos; + const faviconsFiles = config.appFiles.favicons; + const imagesFiles = config.appFiles.images; + const fontsFiles = config.appFiles.fonts; + const componentsDirs = config.components; + + _.map(componentsDirs, componentDir => scriptFiles.push(`${componentDir}**/*.js`)); + _.map(componentsDirs, componentDir => stylesFiles.push(`${componentDir}**/*.scss`)); + _.map(componentsDirs, componentDir => pagesFiles.push(`${componentDir}**/*.pug`)); + _.map(componentsDirs, componentDir => pagesFiles.push(`${componentDir}**/*.yml`)); + + const task = () => { // Initialising the server browserSync.start(serverBase); diff --git a/gulp/tasks/styles.js b/gulp/tasks/styles.js index 88d2fa2..f2a1162 100644 --- a/gulp/tasks/styles.js +++ b/gulp/tasks/styles.js @@ -1,32 +1,36 @@ -'use strict'; -var fs = require('fs'); -var stream = require('../utils/browserSync').stream; -var handleError = require('../utils/handleError'); +const fs = require('fs'); +const stream = require('../utils/browserSync').stream; +const handleError = require('../utils/handleError'); -module.exports = function (gulp, $, config) { - var srcFiles = config.appFiles.styles; - var destFiles = config.paths.styles.dest; +module.exports = (gulp, $, config) => { + const srcFiles = config.appFiles.styles; + const destFiles = config.paths.styles.dest; // previously rev files such as assets that might have been referenced // in the styles (and their path needs to be updated) - var manifestFile = config.paths.revManifest.dest; + const manifestFile = config.paths.revManifest.dest; - var task = function () { - return gulp.src(srcFiles) + const task = () => + gulp.src(srcFiles) .pipe($.plumber(handleError)) .pipe($.cssGlobbing({ - extensions: ['.scss'] + extensions : ['.scss'], })) .pipe($.sourcemaps.init()) - .pipe($.sass({includePaths: ['node_modules']})) - .pipe($.autoprefixer({browsers: ['last 2 versions', 'ie 9']})) - .pipe($.sourcemaps.write({includeContent: true})) - .pipe($.if(config.isProd, $.revReplace({manifest: fs.existsSync(manifestFile) && gulp.src(manifestFile)}))) + .pipe($.sass({ includePaths: ['node_modules'] })) + .pipe($.autoprefixer({ browsers: ['last 2 versions', 'ie 9'] })) + .pipe($.sourcemaps.write({ includeContent: true })) + .pipe($.if(config.isProd, $.revReplace({ + manifest : fs.existsSync(manifestFile) && gulp.src(manifestFile), + }))) .pipe($.if(config.isProd, $.rev())) .pipe($.if(config.isProd, gulp.dest(destFiles))) - .pipe($.if(config.isProd, $.rev.manifest(manifestFile, { merge: true, base: destFiles }))) + .pipe($.if(config.isProd, $.rev.manifest(manifestFile, { + merge : true, + base : destFiles, + }))) .pipe(gulp.dest(destFiles)) - .pipe(stream({match: '**/*.css'})); - }; + .pipe(stream({ match: '**/*.css' })) + ; task.description = 'Generate all stylesheets from the sass files'; return task; diff --git a/gulp/tasks/tasks.js b/gulp/tasks/tasks.js index f683fe0..b6696c1 100644 --- a/gulp/tasks/tasks.js +++ b/gulp/tasks/tasks.js @@ -1,13 +1,11 @@ -'use strict'; +module.exports = (gulp, $, config) => { + const gulpFiles = config.gulpFiles; -module.exports = function (gulp, $, config) { - var gulpFiles = config.gulpFiles; - - var task = function () { - return gulp.src(gulpFiles) - .pipe($.eslint({envs: ['node']})) - .pipe($.eslint.format()); - }; + const task = () => + gulp.src(gulpFiles) + .pipe($.eslint()) + .pipe($.eslint.format()) + ; task.description = 'Lints the gulp tasks'; return task; diff --git a/gulp/utils/browserSync.js b/gulp/utils/browserSync.js index b2560fe..9edc538 100644 --- a/gulp/utils/browserSync.js +++ b/gulp/utils/browserSync.js @@ -1,22 +1,21 @@ -'use strict'; -var browserSync = require('browser-sync').create(); +const browserSync = require('browser-sync').create(); // This module makes sure we keep a single instance of browserSync module.exports = { - start: function(serverBase) { + start : (serverBase) => { if (browserSync.active) { browserSync.reload(); } else { browserSync.init({ - server: serverBase, - index: 'index.html' + server : serverBase, + index : 'index.html', }); } }, - notify: browserSync.notify, - stream: browserSync.stream, - reload: function (done) { + notify : browserSync.notify, + stream : browserSync.stream, + reload : (done) => { browserSync.reload(); done(); - } + }, }; diff --git a/gulp/utils/handleError.js b/gulp/utils/handleError.js index d701d81..3d5042e 100644 --- a/gulp/utils/handleError.js +++ b/gulp/utils/handleError.js @@ -1,22 +1,19 @@ -'use strict'; +const gNotify = require('gulp-notify'); +const bsNotify = require('./browserSync').notify; -var gNotify = require('gulp-notify'); -var bsNotify = require('./browserSync').notify; - - -module.exports = function() { - var args = Array.prototype.slice.call(arguments); +module.exports = () => { + const args = Array.prototype.slice.call(arguments); // Send error to the terminal with gulp-notify gNotify.onError({ - title: '<%= error.plugin %>', - message: '<%= error.message %>' + title : '<%= error.plugin %>', + message : '<%= error.message %>', }).apply(this, args); // Send error to the browser with Browserify - var error = args[0]; - var browserSynMsg = 'Oh boy, there was a problem with:' + error.plugin + '
' + - 'Ckeck you terminal for more infos.'; + const error = args[0]; + const browserSynMsg = `Oh boy, there was a problem with: ${error.plugin}
` + + 'Ckeck you terminal for more infos.'; bsNotify(browserSynMsg, 6000); // Prevent gulp from hanging on this task diff --git a/gulp/utils/pagesHelpers.js b/gulp/utils/pagesHelpers.js index b929d8b..f577f36 100644 --- a/gulp/utils/pagesHelpers.js +++ b/gulp/utils/pagesHelpers.js @@ -1,18 +1,17 @@ -'use strict'; -var yamljs = require('yamljs'); -var _ = require('lodash'); -var markdown = require('marked'); -var pugInline = require('jade-inline-file'); +const yamljs = require('yamljs'); +const _ = require('lodash'); +const markdown = require('marked'); +const pugInline = require('jade-inline-file'); -module.exports = function (config) { - var srcDir = config.basePaths.src; +module.exports = (config) => { + const srcDir = config.basePaths.src; // TODO: Rewrite and document this helper function /** * Helper doesn't validates if a user specifies a value */ - function hasValue (value) { + function hasValue(value) { return value !== null && value !== undefined; } @@ -26,7 +25,7 @@ module.exports = function (config) { * * If the user doesn't pass any value, take the default from the schema */ - function mergeSimpleOptionDefault (optionValue, optionSchema) { + function mergeSimpleOptionDefault(optionValue, optionSchema) { // if the passed options has any value for this option // just take that value if (hasValue(optionValue)) { @@ -49,20 +48,21 @@ module.exports = function (config) { * doesn't specify any value */ function mergeComplexOptionDefault(optionValue, optionSchema) { - var transformedOption = {}; + const transformedOption = {}; // For each sub-option of the schema - _.forEach(optionSchema, function(subO, subOKey) { - var subOptionValue = mergeSimpleOptionDefault(optionValue[subOKey], subO); + _.forEach(optionSchema, (subO, subOKey) => { + const subOptionValue = mergeSimpleOptionDefault(optionValue[subOKey], subO); + let realSubOKey; // process the suboption transformed key if (subOKey === 'all') { - subOKey = ''; + realSubOKey = ''; } else { - subOKey = '-' + subOKey; + realSubOKey = `-${subOKey}`; } - transformedOption[subOKey] = subOptionValue; + transformedOption[realSubOKey] = subOptionValue; }); return transformedOption; } @@ -85,12 +85,11 @@ module.exports = function (config) { // ratio: // '': value3 // border: true - var mergeDefaultOptions = function(options, path) { - var optionsSchema, schema; - options = options || {}; - schema = yamljs.load(srcDir + path + '/definition.yml'); - optionsSchema = schema.options; - return _.mapValues(optionsSchema, function(o, oKey) { + const mergeDefaultOptions = (options = {}, path) => { + const schema = yamljs.load(`${srcDir}${path}/definition.yml`); + const optionsSchema = schema.options; + + return _.mapValues(optionsSchema, (o, oKey) => { // Handle simple option (options that are just an array) if (Array.isArray(o)) { return mergeSimpleOptionDefault(options[oKey], o); @@ -101,8 +100,8 @@ module.exports = function (config) { }; return { - mergeDefaultOptions: mergeDefaultOptions, - markdown: markdown, - inline: pugInline + mergeDefaultOptions, + markdown, + inline : pugInline, }; }; diff --git a/gulp/utils/tasksHelpers.js b/gulp/utils/tasksHelpers.js index 786fc77..50b8402 100644 --- a/gulp/utils/tasksHelpers.js +++ b/gulp/utils/tasksHelpers.js @@ -1,18 +1,18 @@ -'use strict'; - function TaskHelpers(gulp, config) { - if (this instanceof TaskHelpers === false){ + if (this instanceof TaskHelpers === false) { return new TaskHelpers(gulp, config); } - this.getTask = function getTask (task) { - return require('../tasks/' + task)(this.gulp, this.$, this.config); + this.getTask = function getTask(task) { + // eslint-disable-next-line import/no-dynamic-require,global-require + return require(`../tasks/${task}`)(this.gulp, this.$, this.config); }; - this.configure = function configure (config) { - this.config = config; + this.configure = function configure(configuration) { + this.config = configuration; }; + // eslint-disable-next-line global-require this.$ = require('gulp-load-plugins')(); this.config = null; this.gulp = gulp; diff --git a/gulpfile.js b/gulpfile.js index 1031a37..59e00f5 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,11 +1,10 @@ -'use strict'; -var gulp = require('gulp'); -var config = require('./gulp/config')(); -var t = require('./gulp/utils/tasksHelpers')(gulp, config); +const gulp = require('gulp'); +const config = require('./gulp/config')(); +const t = require('./gulp/utils/tasksHelpers')(gulp, config); -/////////////// +// ----------// // Build // -/////////////// +// ----------// // Cleans the build folder gulp.task('clean', t.getTask('clean')); @@ -32,26 +31,24 @@ gulp.task( 'build:assets', gulp.parallel( 'build:styles', - 'build:scripts' + 'build:scripts', ), gulp.series( 'build:content', - 'build:pages' - ) - ) + 'build:pages', + ), + ), ); - -//////////// +// -------// // Deploy // -//////////// +// -------// gulp.task('deploy', t.getTask('deploy')); - -///////////// +// ------- -// // Others // -///////////// +// ------ --// // Serve the build folder gulp.task('serve', t.getTask('serve')); @@ -64,6 +61,6 @@ gulp.task( 'default', gulp.series( 'build', - 'serve' - ) + 'serve', + ), ); diff --git a/webpack.config.js b/webpack.config.js index 4c9969d..d93cae9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,43 +7,40 @@ module.exports = config => ({ // and webpack starts bundling // can be string | object {entryname: entrypath} | array // we are using an object here (result of `globEntries`) - entry: globEntries(config.appFiles.scripts), + entry : globEntries(config.appFiles.scripts), // options related to how webpack emits results - output: { + output : { // the filename template for entry chunks - filename: '[name].js', + filename : '[name].js', // the target directory for all output files // must be an absolute path (thus the `path.resolve`) - path: path.resolve(__dirname, 'build'), + path : path.resolve(__dirname, 'build'), }, - module: { - rules: [ + module : { + rules : [ { - test: /\.js$/, - exclude: /node_modules/, - use: [ - 'babel-loader', - ], + test : /\.js$/, + exclude : /node_modules/, + use : ['babel-loader'], }, ], }, - // options for resolving module requests - resolve: { + resolve : { // directories where to look for modules - modules: [ + modules : [ 'node_modules', path.join(__dirname, '.'), path.resolve(__dirname, 'src'), ], }, - plugins: [ + plugins : [ // The CommonsChunkPlugin is an opt-in feature that creates a separate file // (known as a chunk), consisting of common modules shared between multiple // entry points. By separating common modules from bundles, the resulting @@ -52,8 +49,8 @@ module.exports = config => ({ // serve the shared code from cache, rather than being forced to load a // larger bundle whenever a new page is visited. new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - filename: 'vendor.js', + name : 'vendor', + filename : 'vendor.js', }), ], }); From bf6bd0ab88a376f15d0dbac4504a833bda5956fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 14:28:08 +0100 Subject: [PATCH 35/47] fixes node trailing comma error on functions. adjusts eslint rules so that it is disabled for node but node for browser code. Adds babelrc rule that makes this possible on browser code. --- .babelrc | 5 ++++- .eslintrc | 11 +++++++++++ gulpfile.js | 12 ++++++------ package.json | 3 ++- src/.eslintrc | 5 +++++ 5 files changed, 28 insertions(+), 8 deletions(-) diff --git a/.babelrc b/.babelrc index c13c5f6..8e445f8 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,6 @@ { - "presets": ["es2015"] + "presets": ["es2015"], + "plugins": [ + "syntax-trailing-function-commas" + ] } diff --git a/.eslintrc b/.eslintrc index 1b940d8..38be12e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -25,6 +25,17 @@ rules: - 2 - max: 1 + # 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: always + objects: always + imports: always + exports: always + functions: never + # ------------------- diff --git a/gulpfile.js b/gulpfile.js index 59e00f5..8024bff 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -31,13 +31,13 @@ gulp.task( 'build:assets', gulp.parallel( 'build:styles', - 'build:scripts', + 'build:scripts' ), gulp.series( 'build:content', - 'build:pages', - ), - ), + 'build:pages' + ) + ) ); // -------// @@ -61,6 +61,6 @@ gulp.task( 'default', gulp.series( 'build', - 'serve', - ), + 'serve' + ) ); diff --git a/package.json b/package.json index e57c9d2..e601120 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "devDependencies": { "babel-core": "^6.10.4", "babel-loader": "^6.2.0", + "babel-plugin-syntax-trailing-function-commas": "^6.22.0", "babel-preset-es2015": "^6.1.18", "browser-sync": "^2.6.5", "del": "^2.2.1", @@ -32,10 +33,10 @@ "gulp-data": "^1.2.0", "gulp-eslint": "^3.0.1", "gulp-if": "^2.0.2", - "gulp-pug": "^3.2.0", "gulp-load-plugins": "^1.2.4", "gulp-notify": "^2.2.0", "gulp-plumber": "^1.0.0", + "gulp-pug": "^3.2.0", "gulp-rev": "^7.1.2", "gulp-rev-replace": "^0.4.3", "gulp-sass": "^2.0.1", diff --git a/src/.eslintrc b/src/.eslintrc index 6e6e925..7ed1003 100644 --- a/src/.eslintrc +++ b/src/.eslintrc @@ -2,3 +2,8 @@ env: node: false browser: true commonjs: true + +rules: + # override default rule. this forces trailling commas also on functions + # as we have babel transpilation that removes the syntax error. + comma-dangle: [2, "always"] From de966072e6e51d139ce50d3b97b5b22f4eb17bde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 14:41:29 +0100 Subject: [PATCH 36/47] comma-dangle only on multi-line --- .eslintrc | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.eslintrc b/.eslintrc index 38be12e..cf877e4 100644 --- a/.eslintrc +++ b/.eslintrc @@ -30,10 +30,10 @@ rules: # transpilation) comma-dangle: - 2 - - arrays: always - objects: always - imports: always - exports: always + - arrays: only-multiline + objects: only-multiline + imports: only-multiline + exports: only-multiline functions: never From e17671e277f70e3f50726f3927d650c511d16059 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 15:56:48 +0100 Subject: [PATCH 37/47] Removes key-spacing and uses airbnb default. As the default promotes smaller diffs. --- .eslintrc | 12 ----- gulp/config.js | 100 ++++++++++++++++++------------------- gulp/tasks/deploy.js | 30 +++++------ gulp/tasks/pages.js | 16 +++--- gulp/tasks/scripts.js | 4 +- gulp/tasks/styles.js | 8 +-- gulp/utils/browserSync.js | 12 ++--- gulp/utils/handleError.js | 4 +- gulp/utils/pagesHelpers.js | 2 +- webpack.config.js | 28 +++++------ 10 files changed, 102 insertions(+), 114 deletions(-) diff --git a/.eslintrc b/.eslintrc index cf877e4..dfe8d8f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -4,18 +4,6 @@ env: browser: false rules: - # Forces alignment of objects values and colons of both single line objects - # and multiLine objects. This promotes smaller diffs. - key-spacing: - - 2 - - singleLine: - beforeColon: false - afterColon: true - multiLine: - beforeColon: true - afterColon: true - align: colon - no-multi-spaces: - 2 - exceptions: diff --git a/gulp/config.js b/gulp/config.js index 030b2c5..de71886 100644 --- a/gulp/config.js +++ b/gulp/config.js @@ -3,67 +3,67 @@ const path = require('path'); module.exports = () => { const basePaths = { - root : path.join(__dirname, '..'), - src : 'src/', - content : 'content/', - assets : 'assets/', - dest : 'build/', - tmp : '.tmp/', + root: path.join(__dirname, '..'), + src: 'src/', + content: 'content/', + assets: 'assets/', + dest: 'build/', + tmp: '.tmp/', }; const languages = ['en']; const paths = { - scripts : { - src : `${basePaths.src}scripts/`, - dest : `${basePaths.dest}js/`, + scripts: { + src: `${basePaths.src}scripts/`, + dest: `${basePaths.dest}js/`, }, - styles : { - src : `${basePaths.src}styles/`, - dest : `${basePaths.dest}css/`, + styles: { + src: `${basePaths.src}styles/`, + dest: `${basePaths.dest}css/`, }, - content : { - src : `${basePaths.content}texts/`, - dest : `${basePaths.dest}content/texts/`, + content: { + src: `${basePaths.content}texts/`, + dest: `${basePaths.dest}content/texts/`, }, - pages : { - src : `${basePaths.src}pages/`, - dest : basePaths.dest, + pages: { + src: `${basePaths.src}pages/`, + dest: basePaths.dest, }, - layouts : { - src : `${basePaths.src}layouts/`, + layouts: { + src: `${basePaths.src}layouts/`, }, - images : { - src : `${basePaths.content}images/`, - dest : `${basePaths.dest}content/images/`, + images: { + src: `${basePaths.content}images/`, + dest: `${basePaths.dest}content/images/`, }, - logos : { - src : `${basePaths.assets}logos/`, - dest : `${basePaths.dest}assets/logos/`, + logos: { + src: `${basePaths.assets}logos/`, + dest: `${basePaths.dest}assets/logos/`, }, - favicons : { - src : `${basePaths.assets}favicons/`, - dest : basePaths.dest, + favicons: { + src: `${basePaths.assets}favicons/`, + dest: basePaths.dest, }, - fonts : { - src : `${basePaths.assets}fonts/`, - dest : `${basePaths.dest}assets/fonts/`, + fonts: { + src: `${basePaths.assets}fonts/`, + dest: `${basePaths.dest}assets/fonts/`, }, - revManifest : { - dest : `${basePaths.dest}rev-manifest.json`, + revManifest: { + dest: `${basePaths.dest}rev-manifest.json`, }, }; 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}**/*`, + 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}**/*`, }; const components = [ @@ -77,12 +77,12 @@ module.exports = () => { ]; const environments = { - testing : { - host : argv.host, - username : argv.username, - projectPath : 'preview.ginetta.net/skeleton/', // 'client.ginetta.net/project-name/' - releasePath : argv.path, - privateKey : argv.privateKey, + testing: { + host: argv.host, + username: argv.username, + projectPath: 'preview.ginetta.net/skeleton/', // 'client.ginetta.net/project-name/' + releasePath: argv.path, + privateKey: argv.privateKey, }, }; @@ -94,6 +94,6 @@ module.exports = () => { components, gulpFiles, environments, - isProd : process.env.NODE_ENV === 'production', + isProd: process.env.NODE_ENV === 'production', }; }; diff --git a/gulp/tasks/deploy.js b/gulp/tasks/deploy.js index b79acca..d8b34a6 100644 --- a/gulp/tasks/deploy.js +++ b/gulp/tasks/deploy.js @@ -10,38 +10,38 @@ module.exports = (gulp, $, config) => { const task = (done) => { const rsyncOptions = { - ssh : true, - src : deploySrc, - dest : deployDest, - recursive : true, - delete : true, - privateKey : environment.privateKey, + ssh: true, + src: deploySrc, + dest: deployDest, + recursive: true, + delete: true, + privateKey: environment.privateKey, // eslint-disable-next-line no-console - onStdout : data => console.log(data.toString('utf8')), - onStderr : data => gutil.log(data.toString('utf8')), - args : ['-av'], + onStdout: data => console.log(data.toString('utf8')), + onStderr: data => gutil.log(data.toString('utf8')), + args: ['-av'], }; if (!environment.username) { throw new gutil.PluginError({ - plugin : 'Gulp deploy', - message : 'You should specify a username for the deployement. ' + + plugin: 'Gulp deploy', + message: 'You should specify a username for the deployement. ' + 'Example: gulp deploy --path=pulls/1 --username=testuser --host=domain.com', }); } if (!environment.host) { throw new gutil.PluginError({ - plugin : 'Gulp deploy', - message : 'You should specify a host for the deployement. ' + + plugin: 'Gulp deploy', + message: 'You should specify a host for the deployement. ' + 'Example: gulp deploy --path=pulls/1 --username=testuser --host=domain.com', }); } if (!environment.releasePath) { throw new gutil.PluginError({ - plugin : 'Gulp deploy', - message : 'You should specify a path for the deployement. ' + + plugin: 'Gulp deploy', + message: 'You should specify a path for the deployement. ' + 'Example: gulp deploy --path=pulls/1 --username=testuser --host=domain.com', }); } diff --git a/gulp/tasks/pages.js b/gulp/tasks/pages.js index 00353b5..24f2d3f 100644 --- a/gulp/tasks/pages.js +++ b/gulp/tasks/pages.js @@ -47,21 +47,21 @@ module.exports = (gulp, $, config) => { return gulp.src(srcFiles) .pipe($.plumber(handleError)) .pipe($.data(file => ({ - data : loadContent(language), - relativePath : getRelativePath(file, language), - helpers : moduleHelpers, + data: loadContent(language), + relativePath: getRelativePath(file, language), + helpers: moduleHelpers, language, }))) .pipe($.pug({ - client : false, - pretty : true, - basedir : baseDir, - plugins : [ + client: false, + pretty: true, + basedir: baseDir, + plugins: [ pugIncludeGlob(), ], })) .pipe($.if(config.isProd, $.revReplace({ - manifest : fs.existsSync(manifestFile) && gulp.src([manifestFile]), + manifest: fs.existsSync(manifestFile) && gulp.src([manifestFile]), }))) .pipe(gulp.dest(destPath)); } diff --git a/gulp/tasks/scripts.js b/gulp/tasks/scripts.js index 184f299..b98485c 100644 --- a/gulp/tasks/scripts.js +++ b/gulp/tasks/scripts.js @@ -18,8 +18,8 @@ module.exports = (gulp, $, config) => { .pipe($.if(config.isProd, $.rev())) .pipe($.if(config.isProd, gulp.dest(destPath))) .pipe($.if(config.isProd, $.rev.manifest(manifestFile, { - merge : true, - base : destPath, + merge: true, + base: destPath, }))) .pipe(gulp.dest(destPath)) .pipe(stream()) diff --git a/gulp/tasks/styles.js b/gulp/tasks/styles.js index f2a1162..8d28d0f 100644 --- a/gulp/tasks/styles.js +++ b/gulp/tasks/styles.js @@ -13,20 +13,20 @@ module.exports = (gulp, $, config) => { gulp.src(srcFiles) .pipe($.plumber(handleError)) .pipe($.cssGlobbing({ - extensions : ['.scss'], + extensions: ['.scss'], })) .pipe($.sourcemaps.init()) .pipe($.sass({ includePaths: ['node_modules'] })) .pipe($.autoprefixer({ browsers: ['last 2 versions', 'ie 9'] })) .pipe($.sourcemaps.write({ includeContent: true })) .pipe($.if(config.isProd, $.revReplace({ - manifest : fs.existsSync(manifestFile) && gulp.src(manifestFile), + manifest: fs.existsSync(manifestFile) && gulp.src(manifestFile), }))) .pipe($.if(config.isProd, $.rev())) .pipe($.if(config.isProd, gulp.dest(destFiles))) .pipe($.if(config.isProd, $.rev.manifest(manifestFile, { - merge : true, - base : destFiles, + merge: true, + base: destFiles, }))) .pipe(gulp.dest(destFiles)) .pipe(stream({ match: '**/*.css' })) diff --git a/gulp/utils/browserSync.js b/gulp/utils/browserSync.js index 9edc538..7c10292 100644 --- a/gulp/utils/browserSync.js +++ b/gulp/utils/browserSync.js @@ -2,19 +2,19 @@ const browserSync = require('browser-sync').create(); // This module makes sure we keep a single instance of browserSync module.exports = { - start : (serverBase) => { + start: (serverBase) => { if (browserSync.active) { browserSync.reload(); } else { browserSync.init({ - server : serverBase, - index : 'index.html', + server: serverBase, + index: 'index.html', }); } }, - notify : browserSync.notify, - stream : browserSync.stream, - reload : (done) => { + notify: browserSync.notify, + stream: browserSync.stream, + reload: (done) => { browserSync.reload(); done(); }, diff --git a/gulp/utils/handleError.js b/gulp/utils/handleError.js index 3d5042e..84db86c 100644 --- a/gulp/utils/handleError.js +++ b/gulp/utils/handleError.js @@ -6,8 +6,8 @@ module.exports = () => { // Send error to the terminal with gulp-notify gNotify.onError({ - title : '<%= error.plugin %>', - message : '<%= error.message %>', + title: '<%= error.plugin %>', + message: '<%= error.message %>', }).apply(this, args); // Send error to the browser with Browserify diff --git a/gulp/utils/pagesHelpers.js b/gulp/utils/pagesHelpers.js index f577f36..0c05e24 100644 --- a/gulp/utils/pagesHelpers.js +++ b/gulp/utils/pagesHelpers.js @@ -102,6 +102,6 @@ module.exports = (config) => { return { mergeDefaultOptions, markdown, - inline : pugInline, + inline: pugInline, }; }; diff --git a/webpack.config.js b/webpack.config.js index d93cae9..bf78aac 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,40 +7,40 @@ module.exports = config => ({ // and webpack starts bundling // can be string | object {entryname: entrypath} | array // we are using an object here (result of `globEntries`) - entry : globEntries(config.appFiles.scripts), + entry: globEntries(config.appFiles.scripts), // options related to how webpack emits results - output : { + output: { // the filename template for entry chunks - filename : '[name].js', + filename: '[name].js', // the target directory for all output files // must be an absolute path (thus the `path.resolve`) - path : path.resolve(__dirname, 'build'), + path: path.resolve(__dirname, 'build'), }, - module : { - rules : [ + module: { + rules: [ { - test : /\.js$/, - exclude : /node_modules/, - use : ['babel-loader'], + test: /\.js$/, + exclude: /node_modules/, + use: ['babel-loader'], }, ], }, // options for resolving module requests - resolve : { + resolve: { // directories where to look for modules - modules : [ + modules: [ 'node_modules', path.join(__dirname, '.'), path.resolve(__dirname, 'src'), ], }, - plugins : [ + plugins: [ // The CommonsChunkPlugin is an opt-in feature that creates a separate file // (known as a chunk), consisting of common modules shared between multiple // entry points. By separating common modules from bundles, the resulting @@ -49,8 +49,8 @@ module.exports = config => ({ // serve the shared code from cache, rather than being forced to load a // larger bundle whenever a new page is visited. new webpack.optimize.CommonsChunkPlugin({ - name : 'vendor', - filename : 'vendor.js', + name: 'vendor', + filename: 'vendor.js', }), ], }); From 6c1c47089f46b58bf500a60cf72a9a19c81971aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 16:01:24 +0100 Subject: [PATCH 38/47] removes custom no-multi-spaces rule as the default airbnb is a better default for smaller diffs. --- .eslintrc | 5 ----- gulp/tasks/assets.js | 16 ++++++++-------- gulp/tasks/clean.js | 2 +- gulp/tasks/content.js | 2 +- gulp/tasks/deploy.js | 6 +++--- gulp/tasks/pages.js | 24 ++++++++++++------------ gulp/tasks/scripts.js | 10 +++++----- gulp/tasks/serve.js | 20 ++++++++++---------- gulp/tasks/styles.js | 6 +++--- gulp/tasks/tasks.js | 2 +- gulp/utils/handleError.js | 2 +- gulp/utils/pagesHelpers.js | 6 +++--- 12 files changed, 48 insertions(+), 53 deletions(-) diff --git a/.eslintrc b/.eslintrc index dfe8d8f..9dd0540 100644 --- a/.eslintrc +++ b/.eslintrc @@ -4,11 +4,6 @@ env: browser: false rules: - no-multi-spaces: - - 2 - - exceptions: - VariableDeclarator: true - no-multiple-empty-lines: - 2 - max: 1 diff --git a/gulp/tasks/assets.js b/gulp/tasks/assets.js index 39c71b3..433c1a6 100644 --- a/gulp/tasks/assets.js +++ b/gulp/tasks/assets.js @@ -1,17 +1,17 @@ const merge = require('merge-stream'); 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 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 fontsSrc = config.appFiles.fonts; + const fontsDest = config.paths.fonts.dest; const manifestFile = config.paths.revManifest.dest; - const task = () => { + const task = () => { const imagesSt = gulp.src(imagesSrc) .pipe($.changed(imagesDest)) .pipe($.if(config.isProd, $.rev())) diff --git a/gulp/tasks/clean.js b/gulp/tasks/clean.js index 8cc9029..f44e386 100644 --- a/gulp/tasks/clean.js +++ b/gulp/tasks/clean.js @@ -1,7 +1,7 @@ const del = require('del'); module.exports = (gulp, $, config) => { - const destFolder = `${config.basePaths.dest}*`; + const destFolder = `${config.basePaths.dest}*`; const task = () => del([destFolder]); diff --git a/gulp/tasks/content.js b/gulp/tasks/content.js index dbfb998..74e6a33 100644 --- a/gulp/tasks/content.js +++ b/gulp/tasks/content.js @@ -1,7 +1,7 @@ const merge = require('merge-stream'); module.exports = (gulp, $, config) => { - const srcFiles = config.paths.content.src; + const srcFiles = config.paths.content.src; const languages = config.languages; const destFiles = config.paths.content.dest; diff --git a/gulp/tasks/deploy.js b/gulp/tasks/deploy.js index d8b34a6..45b8426 100644 --- a/gulp/tasks/deploy.js +++ b/gulp/tasks/deploy.js @@ -4,9 +4,9 @@ const rsync = require('rsyncwrapper'); module.exports = (gulp, $, config) => { const environment = config.environments.testing; const defaultPath = '/home/www-clients/'; - const serverPath = `${environment.username}@${environment.host}`; - const deploySrc = config.basePaths.dest; - const deployDest = `${serverPath}:${defaultPath}${environment.projectPath}${environment.releasePath}`; + const serverPath = `${environment.username}@${environment.host}`; + const deploySrc = config.basePaths.dest; + const deployDest = `${serverPath}:${defaultPath}${environment.projectPath}${environment.releasePath}`; const task = (done) => { const rsyncOptions = { diff --git a/gulp/tasks/pages.js b/gulp/tasks/pages.js index 24f2d3f..d69d684 100644 --- a/gulp/tasks/pages.js +++ b/gulp/tasks/pages.js @@ -1,19 +1,19 @@ -const fs = require('fs'); -const yamljs = require('yamljs'); +const fs = require('fs'); +const yamljs = require('yamljs'); const pugIncludeGlob = require('pug-include-glob'); -const merge = require('merge-stream'); -const path = require('path'); -const pageshelpers = require('../utils/pagesHelpers'); -const handleError = require('../utils/handleError'); +const merge = require('merge-stream'); +const path = require('path'); +const pageshelpers = require('../utils/pagesHelpers'); +const handleError = require('../utils/handleError'); module.exports = (gulp, $, config) => { - const srcFiles = config.appFiles.pages; - const destFiles = config.paths.pages.dest; - const languages = config.languages; - const contentPath = config.paths.content.dest; - const baseDir = config.basePaths.src; + const srcFiles = config.appFiles.pages; + const destFiles = config.paths.pages.dest; + const languages = config.languages; + const contentPath = config.paths.content.dest; + const baseDir = config.basePaths.src; const moduleHelpers = pageshelpers(config); - const manifestFile = config.paths.revManifest.dest; + const manifestFile = config.paths.revManifest.dest; // Put the default language at the root const getLanguagePath = (language) => { diff --git a/gulp/tasks/scripts.js b/gulp/tasks/scripts.js index b98485c..a4b83de 100644 --- a/gulp/tasks/scripts.js +++ b/gulp/tasks/scripts.js @@ -1,12 +1,12 @@ -const stream = require('../utils/browserSync').stream; -const handleError = require('../utils/handleError'); -const webpack = require('webpack'); -const gulpWebpack = require('webpack-stream'); +const stream = require('../utils/browserSync').stream; +const handleError = require('../utils/handleError'); +const webpack = require('webpack'); +const gulpWebpack = require('webpack-stream'); const webpackConfig = require('../../webpack.config'); module.exports = (gulp, $, config) => { const scriptsFiles = config.appFiles.scripts; - const destPath = config.paths.scripts.dest; + const destPath = config.paths.scripts.dest; const manifestFile = config.paths.revManifest.dest; const task = () => diff --git a/gulp/tasks/serve.js b/gulp/tasks/serve.js index b15a9b8..e9e44b6 100644 --- a/gulp/tasks/serve.js +++ b/gulp/tasks/serve.js @@ -1,20 +1,20 @@ -const _ = require('lodash'); +const _ = require('lodash'); const browserSync = require('../utils/browserSync'); const reload = browserSync.reload; // eslint-disable-next-line max-statements module.exports = (gulp, $, config) => { - const serverBase = config.basePaths.dest; - const scriptFiles = [config.appFiles.scripts]; - const stylesFiles = [config.appFiles.styles]; - const pagesFiles = [config.appFiles.pages, config.appFiles.layouts]; + const serverBase = config.basePaths.dest; + const scriptFiles = [config.appFiles.scripts]; + const stylesFiles = [config.appFiles.styles]; + const pagesFiles = [config.appFiles.pages, config.appFiles.layouts]; const contentSrcFiles = config.appFiles.content; - const logosFiles = config.appFiles.logos; - const faviconsFiles = config.appFiles.favicons; - const imagesFiles = config.appFiles.images; - const fontsFiles = config.appFiles.fonts; - const componentsDirs = config.components; + const logosFiles = config.appFiles.logos; + const faviconsFiles = config.appFiles.favicons; + const imagesFiles = config.appFiles.images; + const fontsFiles = config.appFiles.fonts; + const componentsDirs = config.components; _.map(componentsDirs, componentDir => scriptFiles.push(`${componentDir}**/*.js`)); _.map(componentsDirs, componentDir => stylesFiles.push(`${componentDir}**/*.scss`)); diff --git a/gulp/tasks/styles.js b/gulp/tasks/styles.js index 8d28d0f..42cff16 100644 --- a/gulp/tasks/styles.js +++ b/gulp/tasks/styles.js @@ -1,9 +1,9 @@ -const fs = require('fs'); -const stream = require('../utils/browserSync').stream; +const fs = require('fs'); +const stream = require('../utils/browserSync').stream; const handleError = require('../utils/handleError'); module.exports = (gulp, $, config) => { - const srcFiles = config.appFiles.styles; + const srcFiles = config.appFiles.styles; const destFiles = config.paths.styles.dest; // previously rev files such as assets that might have been referenced // in the styles (and their path needs to be updated) diff --git a/gulp/tasks/tasks.js b/gulp/tasks/tasks.js index b6696c1..2d9a4b0 100644 --- a/gulp/tasks/tasks.js +++ b/gulp/tasks/tasks.js @@ -1,5 +1,5 @@ module.exports = (gulp, $, config) => { - const gulpFiles = config.gulpFiles; + const gulpFiles = config.gulpFiles; const task = () => gulp.src(gulpFiles) diff --git a/gulp/utils/handleError.js b/gulp/utils/handleError.js index 84db86c..a4b6fbb 100644 --- a/gulp/utils/handleError.js +++ b/gulp/utils/handleError.js @@ -1,4 +1,4 @@ -const gNotify = require('gulp-notify'); +const gNotify = require('gulp-notify'); const bsNotify = require('./browserSync').notify; module.exports = () => { diff --git a/gulp/utils/pagesHelpers.js b/gulp/utils/pagesHelpers.js index 0c05e24..e73e7ba 100644 --- a/gulp/utils/pagesHelpers.js +++ b/gulp/utils/pagesHelpers.js @@ -1,6 +1,6 @@ -const yamljs = require('yamljs'); -const _ = require('lodash'); -const markdown = require('marked'); +const yamljs = require('yamljs'); +const _ = require('lodash'); +const markdown = require('marked'); const pugInline = require('jade-inline-file'); module.exports = (config) => { From 9c5c0c6c59a485dc2ac5024ae2d1c2b38d54d214 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 14:46:08 +0100 Subject: [PATCH 39/47] Adds webpack production settings. --- webpack.config.js | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index bf78aac..524bf5d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -52,5 +52,30 @@ module.exports = config => ({ name: 'vendor', filename: 'vendor.js', }), - ], + + // Production-Only Plugins + // (they get concatenated only if we're building for production) + // See: https://webpack.js.org/guides/production-build/#the-manual-way-configuring-webpack-for-multiple-environments + ].concat(config.isProd ? [ + new webpack.LoaderOptionsPlugin({ + minimize : true, + debug : false, + }), + new webpack.DefinePlugin({ + 'process.env' : { + NODE_ENV : JSON.stringify('production'), + }, + }), + new webpack.optimize.UglifyJsPlugin({ + beautify : false, + mangle : { + screw_ie8 : true, + keep_fnames : true, + }, + compress : { + screw_ie8 : true, + }, + comments : false, + }), + ] : []), }); From 15109dff1f864f672fb59469013a129f729da1e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 14:46:23 +0100 Subject: [PATCH 40/47] Adds styles settings - compresses sass compilation - removes source maps. --- gulp/tasks/styles.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/gulp/tasks/styles.js b/gulp/tasks/styles.js index 42cff16..f6c022f 100644 --- a/gulp/tasks/styles.js +++ b/gulp/tasks/styles.js @@ -15,10 +15,13 @@ module.exports = (gulp, $, config) => { .pipe($.cssGlobbing({ extensions: ['.scss'], })) - .pipe($.sourcemaps.init()) - .pipe($.sass({ includePaths: ['node_modules'] })) + .pipe($.if(!config.isProd, $.sourcemaps.init())) + .pipe($.sass({ + includePaths : ['node_modules'], + outputStyle : config.isProd ? 'compressed' : '', + })) .pipe($.autoprefixer({ browsers: ['last 2 versions', 'ie 9'] })) - .pipe($.sourcemaps.write({ includeContent: true })) + .pipe($.if(!config.isProd, $.sourcemaps.write({ includeContent: true }))) .pipe($.if(config.isProd, $.revReplace({ manifest: fs.existsSync(manifestFile) && gulp.src(manifestFile), }))) From 55888bccf31fb69af3e94d0305ae8ac17d981905 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 16:27:18 +0100 Subject: [PATCH 41/47] Fixes linting. --- gulp/tasks/styles.js | 4 ++-- webpack.config.js | 22 +++++++++++----------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/gulp/tasks/styles.js b/gulp/tasks/styles.js index f6c022f..a4cf56c 100644 --- a/gulp/tasks/styles.js +++ b/gulp/tasks/styles.js @@ -17,8 +17,8 @@ module.exports = (gulp, $, config) => { })) .pipe($.if(!config.isProd, $.sourcemaps.init())) .pipe($.sass({ - includePaths : ['node_modules'], - outputStyle : config.isProd ? 'compressed' : '', + includePaths: ['node_modules'], + outputStyle: config.isProd ? 'compressed' : '', })) .pipe($.autoprefixer({ browsers: ['last 2 versions', 'ie 9'] })) .pipe($.if(!config.isProd, $.sourcemaps.write({ includeContent: true }))) diff --git a/webpack.config.js b/webpack.config.js index 524bf5d..9bacb1d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -58,24 +58,24 @@ module.exports = config => ({ // See: https://webpack.js.org/guides/production-build/#the-manual-way-configuring-webpack-for-multiple-environments ].concat(config.isProd ? [ new webpack.LoaderOptionsPlugin({ - minimize : true, - debug : false, + minimize: true, + debug: false, }), new webpack.DefinePlugin({ - 'process.env' : { - NODE_ENV : JSON.stringify('production'), + 'process.env': { + NODE_ENV: JSON.stringify('production'), }, }), new webpack.optimize.UglifyJsPlugin({ - beautify : false, - mangle : { - screw_ie8 : true, - keep_fnames : true, + beautify: false, + mangle: { + screw_ie8: true, + keep_fnames: true, }, - compress : { - screw_ie8 : true, + compress: { + screw_ie8: true, }, - comments : false, + comments: false, }), ] : []), }); From 8945351a200cd10a1474ce3705a6c43c8745dce9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 15:07:57 +0100 Subject: [PATCH 42/47] performance improvements on mergeDefaultOptions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It now doesn’t do io calls on every invocation. Instead, this step is moved to gulp and only 1/per module io call is made per pages task run. (instead of 1/per module/invocation. --- gulp/tasks/pages.js | 32 +++++++++++++++++++++++++------- gulp/utils/pagesHelpers.js | 4 ++-- package.json | 1 + 3 files changed, 28 insertions(+), 9 deletions(-) diff --git a/gulp/tasks/pages.js b/gulp/tasks/pages.js index d69d684..c4c6e15 100644 --- a/gulp/tasks/pages.js +++ b/gulp/tasks/pages.js @@ -3,6 +3,8 @@ const yamljs = require('yamljs'); const pugIncludeGlob = require('pug-include-glob'); const merge = require('merge-stream'); const path = require('path'); +const glob = require('glob'); +const _ = require('lodash'); const pageshelpers = require('../utils/pagesHelpers'); const handleError = require('../utils/handleError'); @@ -12,7 +14,6 @@ module.exports = (gulp, $, config) => { const languages = config.languages; const contentPath = config.paths.content.dest; const baseDir = config.basePaths.src; - const moduleHelpers = pageshelpers(config); const manifestFile = config.paths.revManifest.dest; // Put the default language at the root @@ -41,17 +42,34 @@ module.exports = (gulp, $, config) => { return destPath; } + function loadMergedDefinitions() { + return glob.sync(`${config.basePaths.src}**/definition.yml`) + .reduce((acc, definitionPath) => { + const normalizedPath = definitionPath + .replace(config.basePaths.src, '') + .replace('/definition.yml', '') + ; + return _.merge(acc, { + [normalizedPath]: yamljs.load(definitionPath), + }); + }, {}) + ; + } + function compilePages(language) { const destPath = getDestPath(language); return gulp.src(srcFiles) .pipe($.plumber(handleError)) - .pipe($.data(file => ({ - data: loadContent(language), - relativePath: getRelativePath(file, language), - helpers: moduleHelpers, - language, - }))) + .pipe($.data((file) => { + const mergedDefinitions = loadMergedDefinitions(); + return { + data: loadContent(language), + relativePath: getRelativePath(file, language), + helpers: pageshelpers(config, mergedDefinitions), + language, + }; + })) .pipe($.pug({ client: false, pretty: true, diff --git a/gulp/utils/pagesHelpers.js b/gulp/utils/pagesHelpers.js index e73e7ba..2ad4769 100644 --- a/gulp/utils/pagesHelpers.js +++ b/gulp/utils/pagesHelpers.js @@ -3,7 +3,7 @@ const _ = require('lodash'); const markdown = require('marked'); const pugInline = require('jade-inline-file'); -module.exports = (config) => { +module.exports = (config, mergedDefinitions) => { const srcDir = config.basePaths.src; // TODO: Rewrite and document this helper function @@ -86,7 +86,7 @@ module.exports = (config) => { // '': value3 // border: true const mergeDefaultOptions = (options = {}, path) => { - const schema = yamljs.load(`${srcDir}${path}/definition.yml`); + const schema = mergedDefinitions[path]; const optionsSchema = schema.options; return _.mapValues(optionsSchema, (o, oKey) => { diff --git a/package.json b/package.json index e601120..f89a074 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "eslint-config-airbnb-base": "^11.1.0", "eslint-config-es2015": "^1.1.0", "eslint-plugin-import": "^2.2.0", + "glob": "^7.1.1", "gulp": "gulpjs/gulp.git#4.0", "gulp-autoprefixer": "^3.1.0", "gulp-changed": "^1.2.1", From 9ae4c05cc4a0eb795a70fe45ebddf054f3f1d3c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Fri, 17 Feb 2017 16:40:14 +0100 Subject: [PATCH 43/47] Fix lint errors on pageHelpers.js --- gulp/utils/pagesHelpers.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/gulp/utils/pagesHelpers.js b/gulp/utils/pagesHelpers.js index 2ad4769..81da9dd 100644 --- a/gulp/utils/pagesHelpers.js +++ b/gulp/utils/pagesHelpers.js @@ -1,11 +1,8 @@ -const yamljs = require('yamljs'); const _ = require('lodash'); const markdown = require('marked'); const pugInline = require('jade-inline-file'); module.exports = (config, mergedDefinitions) => { - const srcDir = config.basePaths.src; - // TODO: Rewrite and document this helper function /** From 00133f33a65498f5dae24efc886d3b3c2166ea85 Mon Sep 17 00:00:00 2001 From: Bruno Lourenco Date: Sat, 18 Feb 2017 17:06:24 +0000 Subject: [PATCH 44/47] Fix gulp handle error function Since it was using `this.emit` the fix was convert from arrow function to function. Also, this use the recommend rest operator instead of `arguments` following the `prefer-rest-params` eslint rule. --- gulp/utils/handleError.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/gulp/utils/handleError.js b/gulp/utils/handleError.js index a4b6fbb..03fbccc 100644 --- a/gulp/utils/handleError.js +++ b/gulp/utils/handleError.js @@ -1,9 +1,7 @@ const gNotify = require('gulp-notify'); const bsNotify = require('./browserSync').notify; -module.exports = () => { - const args = Array.prototype.slice.call(arguments); - +module.exports = function notify(...args) { // Send error to the terminal with gulp-notify gNotify.onError({ title: '<%= error.plugin %>', From ed9a569950d6d1816b62281b5c5e914c469f99cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Mon, 20 Feb 2017 11:01:23 +0100 Subject: [PATCH 45/47] Fixes .yaml files. --- src/modules/colors/definition.yml | 7 ++++--- src/modules/dropdown/definition.yml | 13 +++++++------ src/modules/nav-group/definition.yml | 13 +++++++------ 3 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/modules/colors/definition.yml b/src/modules/colors/definition.yml index a5988da..26d808c 100644 --- a/src/modules/colors/definition.yml +++ b/src/modules/colors/definition.yml @@ -1,5 +1,6 @@ data: - – name: Color Name - desc: Description - color: #00FFFF + - + name: "Color Name" + desc: "Description" + color: "#00FFFF" options: {} diff --git a/src/modules/dropdown/definition.yml b/src/modules/dropdown/definition.yml index 1699d39..025af77 100644 --- a/src/modules/dropdown/definition.yml +++ b/src/modules/dropdown/definition.yml @@ -1,10 +1,11 @@ +--- data: name: name options: - – label: Small - value: small - – label: Medium - value: medium - – label: Large - value: large + - label: Small + value: small + - label: Medium + value: medium + - label: Large + value: large options: {} diff --git a/src/modules/nav-group/definition.yml b/src/modules/nav-group/definition.yml index 0923506..1d7da7f 100644 --- a/src/modules/nav-group/definition.yml +++ b/src/modules/nav-group/definition.yml @@ -1,10 +1,11 @@ +--- data: title: list title links: - – title: Item 1 - link: # - – title: Item 2 - link: # - – title: Item 3 - link: # + - title: Item 1 + link: "#" + - title: Item 2 + link: "#" + - title: Item 3 + link: "#" options: {} From ac8d1a29f296bb927419463445f9987f86e908bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Mon, 20 Feb 2017 11:01:36 +0100 Subject: [PATCH 46/47] fixes main.js --- src/scripts/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scripts/main.js b/src/scripts/main.js index 8d63234..ea3de42 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -52,7 +52,7 @@ window.onload = () => loadIframe(); window.addEventListener('popstate', loadIframe); // The code for the website comes here. -navItems.each(() => { +navItems.each(function () { $(this).find('.js-styleguide-nav-link').on('click', function (e) { const target = $(this).attr('href'); e.preventDefault(); From 93a25f6afe777e58ebb3e555f64073bca95447d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Figueiredo?= Date: Mon, 20 Feb 2017 11:02:02 +0100 Subject: [PATCH 47/47] fix pages task. --- gulp/tasks/pages.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gulp/tasks/pages.js b/gulp/tasks/pages.js index c4c6e15..8c06ff6 100644 --- a/gulp/tasks/pages.js +++ b/gulp/tasks/pages.js @@ -34,7 +34,7 @@ module.exports = (gulp, $, config) => { const task = () => { // Load the content for the page function loadContent(language) { - return yamljs.load(`${contentPath}${language}.yml`); + return require(`${path.resolve(__dirname, '../..')}/${contentPath}${language}.json`); } function getDestPath(language) { @@ -43,7 +43,7 @@ module.exports = (gulp, $, config) => { } function loadMergedDefinitions() { - return glob.sync(`${config.basePaths.src}**/definition.yml`) + return glob.sync(`./${config.basePaths.src}**/definition.yml`) .reduce((acc, definitionPath) => { const normalizedPath = definitionPath .replace(config.basePaths.src, '')