Add Frontie Webpack

frontie/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": { "node": "current" }
+      }
+    ]
+  ]
+}

frontie/.eslintrc

@@ -0,0 +1,12 @@
+{
+  "extends": ["eslint:recommended"],
+  "parserOptions": {
+    "ecmaVersion": 6,
+    #"ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  }
+}

frontie/.gitignore

@@ -0,0 +1,28 @@
+# Dependency directories
+node_modules
+bower_components
+dist
+
+# Optional npm cache directory
+.npm
+
+# SASS Cache
+.sass-cache
+.sass-cache/*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# OSX
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Windows
+Thumbs.db
+ehthumbs.db
+
+# Misc
+.publish

frontie/.stylelintrc

@@ -0,0 +1,25 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-recommended-scss"
+  ],
+  "plugins": [
+    "stylelint-order"
+  ],
+  "rules": {
+    "at-rule-empty-line-before": null,
+    "at-rule-name-space-after": "always",
+    "at-rule-no-unknown": null,
+    "block-closing-brace-empty-line-before": null,
+    "block-closing-brace-newline-after": null,
+    "block-no-empty": null,
+    "block-opening-brace-space-before": null,
+    "declaration-empty-line-before": null,
+    "max-empty-lines": 2,
+    "number-leading-zero": "never",
+    "no-descending-specificity": null,
+    "rule-empty-line-before": null,
+    "selector-list-comma-newline-after": "always",
+    "selector-pseudo-element-colon-notation": null
+  }
+}

frontie/README.md

@@ -0,0 +1,73 @@
+# Frontie Webpack - Front-end Boilerplate
+
+**🚀 Gulp 4 + Webpack 4 + Babel + BrowserSync + ITCSS Architecture + BEM Methodology**
+
+These tools make it a solid front-end boilerplate to get a new project off the ground.
+
+## :gift: Features
+| Features | Description |
+| :------------- | :------------- |
+| Task Runner | [Gulp](http://gulpjs.com/)
+| CSS | [SASS](http://sass-lang.com/), [ITCSS](https://developer.helpscout.com/seed/glossary/itcss/), [CSS Guidelines](https://cssguidelin.es/), [BEM](http://getbem.com/)
+| CSS Tools | [Autoprefixer](https://github.com/postcss/autoprefixer), [Source Maps](https://www.npmjs.com/package/gulp-sourcemaps), [Stylelint](https://stylelint.io/)
+| Bootstrap 4 | [Grid System](https://getbootstrap.com/docs/4.1/layout/grid/), [Responsive Breakpoints](https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints)
+| JS | [Webpack](https://webpack.js.org/), [Babel](http://babeljs.io/), [ESLint](http://eslint.org/)
+| Live Reload | [BrowserSync](http://www.browsersync.io/)
+| HTML Templates | [Twig.js](https://github.com/twigjs/twig.js)
+| Deployment | [GitHub Pages]((https://www.npmjs.com/package/gulp-gh-pages))
+
+## Usage
+
+### Requirements
+Make sure all dependencies have been installed before moving on:
+
+* [yarn](https://yarnpkg.com/lang/en/) or [npm](https://www.npmjs.com/get-npm)
+* [Node.js](https://nodejs.org/en/download/)
+* [Gulp](http://gulpjs.com/)
+
+### Quick start: Installation
+Clone this repository and run
+- `yarn` or `npm install` to install dependencies
+
+### Tasks
+| Task Name | Description | Environment |
+| :------------- | :------------- | :------------- |
+| `yarn start` or `npm run start` | Generate a development environment, start the server and watch for changes | Development
+| `yarn watch` or `npm run watch` | Start the server and watch for changes | Development
+| `yarn build` or `npm run build` | Compile production code | Production
+| `yarn deploy` or `npm run deploy` | Compile production code and deploy to GitHub Pages | Production
+
+## Structure
+
+```
+|--dist/                   # →  Static version of the website ready to upload (never edit)
+|
+|--gulpfile.babel.js/      # →  Gulpfile config and tasks
+|--node_modules/           # →  Node.js packages (never edit)
+|--src/                    # →  Source files
+|  |--assets/              # →  Assets
+|  |  |--fonts/            # →  Assets: Fonts
+|  |  |--img/              # →  Assets: Images
+|  |--modules/             # →  Modules: Multi-part components e.g. Navbar (HTML, CSS and JS)
+|  |--scripts/             # →  JS
+|  |  |--components/       # →  JS: Components
+|  |  |--app.js            # →  JS: Main file
+|  |--styles/              # →  Styles: ITCSS Architecture + BEM Methodology
+|  |  |--main.scss         # →  Styles: Main stylesheet file
+|  |--templates/           # →  Site templates (Twig.js)
+|  |  |--layouts/          # →  Templates: Layouts
+|  |  |--components/       # →  Templates: Components
+|  |  |--pages/            # →  Templates: Pages
+|--.babelrc                # →  Babel presets
+|--.eslintrc               # →  ESLint config
+|--.gitignore              # →  Gitignore
+|--.stylelintrc            # →  Stylelint config
+|--package-lock.json       # →  NPM lock file (never edit)
+|--package.json            # →  Node.js dependencies and scripts
+|--webpack.config.js       # →  Webpack config
+|--yarn.lock               # →  Yarn lock file (never edit)
+```
+
+## Copyright and license
+
+Copyright 2018 Tomasz Bujnowicz under the [MIT license](http://opensource.org/licenses/MIT).

frontie/gulpfile.babel.js/config.js

@@ -0,0 +1,43 @@
+/*
+ * @title Config
+ */
+
+// Paths
+export const paths = {
+  src: './src',
+  dest: './dist',
+  deploy: './dist/**/*',
+  styles: {
+    src: 'src/styles/main.scss',
+    watch: 'src/styles/**/*.scss',
+    modules: 'src/modules/**/*.scss',
+    dest: 'dist/css',
+    lint: 'src/styles/**/*.s+(a|c)ss'
+  },
+  scripts: {
+    src: './src/scripts/app.js',
+    watch: 'src/scripts/**/*.js',
+    modules: 'src/modules/**/*.js',
+    dest: 'dist/js',
+  },
+  templates: {
+    src: 'src/templates/pages/*.{twig,html}',
+    watch: 'src/templates/**/*.{twig,html}',
+    modules: 'src/modules/**/*.{twig,html}',
+    dest: 'dist/'
+  },
+  images: {
+    src: 'src/assets/img/**/*',
+    dest: 'dist/assets/img'
+  },
+  fonts: {
+    src: 'src/assets/fonts/**/*',
+    dest: 'dist/assets/fonts'
+  },
+  copy: {
+    src: 'src/robots.txt',
+    dest: 'dist/'
+  }
+};
+
+export const isProd = process.env.NODE_ENV === 'production';

frontie/gulpfile.babel.js/index.js

@@ -0,0 +1,53 @@
+/*
+ * @title gulpfile.babel.js
+ * @description A directory file loader to include all the gulp tasks
+ */
+
+// Dependencies
+import gulp from 'gulp';
+import { series, parallel } from 'gulp';
+
+// Tasks
+import { reload, serve } from './tasks/server';
+import { clean } from './tasks/clean';
+import { styles } from './tasks/styles';
+import { scripts } from './tasks/scripts';
+import { templates } from './tasks/templates';
+import { images } from './tasks/images';
+import { fonts } from './tasks/fonts';
+import { copy } from './tasks/copy';
+import { deploy } from './tasks/deploy';
+
+// Config
+import { paths } from './config';
+
+// Gulp Tasks
+function watchFiles() {
+  gulp.watch([paths.styles.watch, paths.styles.modules], styles);
+  gulp.watch([paths.scripts.watch, paths.scripts.modules], series(scripts, reload));
+  gulp.watch([paths.templates.watch, paths.templates.modules], series(templates, reload));
+  gulp.watch(paths.images.src, series(images, reload));
+  gulp.watch(paths.fonts.src, series(fonts, reload));
+}
+
+export const build = series(
+  clean,
+  parallel(styles, scripts, templates, images, fonts, copy)
+);
+
+export const dev = series(
+  build,
+  serve,
+  watchFiles
+);
+
+export const devWatch = series(
+  serve,
+  watchFiles
+);
+
+exports.deploy = deploy;
+
+exports.watch = devWatch;
+
+export default dev;

frontie/gulpfile.babel.js/tasks/clean.js

@@ -0,0 +1,15 @@
+/*
+ * @title Clean
+ * @description A task to delete the output directory
+ */
+
+// Dependencies
+import del from 'del';
+
+// Config
+import { paths } from "../config";
+
+// Task
+export function clean() {
+  return del([ paths.dest ]);
+}

frontie/gulpfile.babel.js/tasks/copy.js

@@ -0,0 +1,18 @@
+/*
+ * @title Copy
+ * @description A task to copy font files to the output directory
+ */
+
+// Dependencies
+import { src, dest } from 'gulp';
+import changed from "gulp-changed";
+
+// Config
+import { paths } from "../config";
+
+// Task
+export function copy() {
+  return src(paths.copy.src)
+    .pipe(changed(paths.copy.dest))
+    .pipe(dest(paths.copy.dest))
+ }

frontie/gulpfile.babel.js/tasks/deploy.js

@@ -0,0 +1,17 @@
+/*
+ * @title Deploy
+ * @description Publish contents to Github pages
+ */
+
+// Dependencies
+import { src } from 'gulp';
+import ghPages from 'gulp-gh-pages';
+
+// Config
+import { paths } from "../config";
+
+// Task
+export function deploy() {
+  return src(paths.deploy)
+    .pipe(ghPages())
+ }

frontie/gulpfile.babel.js/tasks/fonts.js

@@ -0,0 +1,18 @@
+/*
+ * @title Fonts
+ * @description A task to copy fonts
+ */
+
+// Dependencies
+import { src, dest } from 'gulp';
+import changed from "gulp-changed";
+
+// Config
+import { paths } from "../config";
+
+// Task
+export function fonts() {
+  return src(paths.fonts.src)
+    .pipe(changed(paths.fonts.dest))
+    .pipe(dest(paths.fonts.dest))
+}

frontie/gulpfile.babel.js/tasks/images.js

@@ -0,0 +1,22 @@
+/*
+ * @title Images
+ * @description A task to copy images
+ */
+
+// Dependencies
+import { src, dest } from 'gulp';
+import babel from 'gulp-babel';
+import plumber from 'gulp-plumber';
+import changed from "gulp-changed";
+import errorHandler from '../util/errorHandler.js';
+
+// Config
+import { paths } from "../config";
+
+// Task
+export function images() {
+  return src(paths.images.src)
+    .pipe(plumber({errorHandler}))
+    .pipe(changed(paths.images.dest))
+    .pipe(dest(paths.images.dest));
+}

frontie/gulpfile.babel.js/tasks/scripts.js

@@ -0,0 +1,34 @@
+/*
+ * @title Scripts
+ * @description A task to concatenate and compress js files via webpack
+ */
+
+// Dependencies
+import { src, dest, series } from 'gulp';
+import gulpif from 'gulp-if';
+import babel from 'gulp-babel';
+import webpack from 'webpack';
+import gulpWebpack from 'webpack-stream';
+import gulpEslint from 'gulp-eslint';
+import plumber from 'gulp-plumber';
+import errorHandler from '../util/errorHandler.js';
+
+// Config
+import { paths, isProd } from "../config";
+
+// Task
+export function esTranspile() {
+  return src(paths.scripts.src)
+    .pipe(plumber({errorHandler}))
+    .pipe(gulpWebpack(require('../../webpack.config.js'), webpack))
+    .pipe(dest(paths.scripts.dest))
+}
+
+export function esLint() {
+  return src(paths.scripts.src)
+    .pipe(gulpEslint())
+    .pipe(gulpEslint.format())
+    .pipe(gulpif(isProd, gulpEslint.failAfterError()))
+}
+
+export const scripts = series(esLint, esTranspile);