🔮

.eslintignore

@@ -0,0 +1 @@
+build/**

.eslintrc

@@ -0,0 +1,45 @@
+{
+  "extends": "eslint:recommended",
+
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+
+  "ecmaFeatures": {
+    "modules": true
+  },
+
+  "rules": {
+    "arrow-parens": 2,
+    "arrow-spacing": [2,  {"before": true, "after": true}],
+    "brace-style": [1, "1tbs"],
+    "callback-return": [2, ["callback", "cb", "fn", "next"]],
+    "comma-style": [1, "last"],
+    "computed-property-spacing": [2, "never"],
+    "eqeqeq": 2,
+    "indent": [2, 2, {"SwitchCase": 1}],
+    "linebreak-style": [2, "unix"],
+    "no-class-assign": 2,
+    "no-console": 0,
+    "no-const-assign": 2,
+    "no-inner-declarations": [2, "both"],
+    "no-useless-call": 2,
+    "no-var": 2,
+    "object-curly-spacing": [2, "never"],
+    "one-var": [2, "never"],
+    "operator-assignment": [2, "never"],
+    "operator-linebreak": [2, "after"],
+    "prefer-spread": 2,
+    "quotes": [2, "single"],
+    "semi": [2, "always"],
+    "space-after-keywords": 1,
+    "space-before-blocks": 1,
+    "space-before-function-paren": [1, "never"],
+    "space-in-parens": 1,
+    "space-infix-ops": 1,
+    "space-return-throw-case": 1,
+    "wrap-iife": [2, "inside"]
+  }
+}

config/kit.json

@@ -0,0 +1,22 @@
+{
+  "entry": {
+    "css": [
+      "style.css"
+    ],
+
+    "js": [
+      "app.js"
+    ]
+  },
+
+  "discover": ["img", "css", "js", "files"],
+
+  "cssnext": {
+    "browsers": "last 2 versions",
+    "import": false,
+    "features": {
+      "customProperties": false,
+      "rem": false
+    }
+  }
+}

config/webpack.config.js

@@ -0,0 +1,48 @@
+'use strict';
+
+const path = require('path');
+const webpack = require('webpack');
+const options = require(path.resolve('config/kit'));
+
+let files = {};
+options.entry.js.forEach(function(file) {
+  files[path.basename(file, '.js')] = './js/' + file;
+});
+
+module.exports = {
+  context: path.resolve('app'),
+
+  entry: files,
+
+  output: {
+    path: path.resolve('build/js'),
+    filename: '[name].js',
+    pathinfo: true
+  },
+
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      exclude: /node_modules|build/,
+      loader: 'babel-loader',
+      query: {
+        optional: 'runtime',
+        stage: 1,
+        cacheDirectory: true
+      }
+    }]
+  },
+
+  plugins: [
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      output: {
+        comments: false
+      }
+    })
+  ]
+};

gulp/copy.js

@@ -0,0 +1,11 @@
+import fs from 'fs-extra';
+import gulp from 'gulp';
+
+let files = 'app/!(css|js|templates)/**/*';
+
+gulp.task('clean', fs.emptyDir.bind(null, 'build'));
+
+gulp.task('copy', gulp.series('clean', () => {
+  return gulp.src(files, {dot: true})
+    .pipe(gulp.dest('build'));
+}));

gulp/handlebars.js

@@ -0,0 +1,28 @@
+import fs from 'fs-extra';
+import merge from 'merge';
+import gulp from 'gulp';
+import rename from 'gulp-rename';
+import engine from 'gulp-compile-handlebars';
+import {get as bs} from 'browser-sync';
+
+const configure = () => {
+  fs.ensureDirSync('./app/templates/partials');
+  fs.ensureDirSync('./app/templates/helpers');
+
+  return {
+    ignorePartials: true,
+    batch: ['./app/templates/partials'],
+    helpers: merge(
+      require('hbs-helpers'),
+      require('require-dir')('./../app/templates/helpers')
+    )
+  };
+};
+
+gulp.task('handlebars', () => {
+  return gulp.src('app/templates/*.hbs')
+    .pipe(engine({}, configure()))
+    .pipe(rename({extname: '.html'}))
+    .pipe(gulp.dest('build'))
+    .pipe(bs('kit').stream());
+});

gulp/postcss.js

@@ -0,0 +1,40 @@
+import path from 'path';
+import gulp from 'gulp';
+import postcss from 'gulp-postcss';
+import minify from 'gulp-minify-css';
+import {get as bs} from 'browser-sync';
+
+import include from 'postcss-import';
+import mixins from 'postcss-mixins';
+import nested from 'postcss-nested';
+import variables from 'postcss-css-variables';
+import cssnext from 'cssnext';
+import assets from 'postcss-assets';
+import mqpacker from 'css-mqpacker';
+
+const options = require(path.resolve('config/kit'));
+
+let files = options.entry.css.map((file) => path.join('app', 'css', file));
+
+let plugins = [
+  include(),
+  mixins(),
+  nested(),
+  variables(),
+  cssnext(options.cssnext),
+  assets({
+    loadPaths: options.discover,
+    basePath: 'build/'
+  }),
+  mqpacker({
+    sort: true
+  })
+];
+
+gulp.task('postcss', () => {
+  return gulp.src(files, {base: 'app', allowEmpty: true, sourcemaps: true})
+    .pipe(postcss(plugins))
+    .pipe(minify({keepSpecialComments: 0}))
+    .pipe(gulp.dest('build', {sourcemaps: {path: '.'}}))
+    .pipe(bs('kit').stream({match: '**/*.css'}));
+});

gulp/serve.js

@@ -0,0 +1,32 @@
+import gulp from 'gulp';
+
+const bs = require('browser-sync').create('kit');
+
+gulp.task('serve', () => {
+  bs.init({
+    server: 'build/',
+    notify: false,
+    open: false,
+    ui: false
+  });
+
+  gulp.watch(
+    'app/css/**/*.css',
+    gulp.series('postcss')
+  );
+
+  gulp.watch(
+    'app/js/**/*.js',
+    gulp.series('webpack')
+  );
+
+  gulp.watch(
+    'app/templates/**/*.{hbs,js}',
+    gulp.series('handlebars')
+  );
+
+  gulp.watch(
+    'app/img/**/*.{jpg,png,svg,gif}',
+    gulp.series('handlebars')
+  );
+});

gulp/webpack.js

@@ -0,0 +1,17 @@
+import path from 'path';
+import gulp from 'gulp';
+import webpack from 'webpack-stream';
+import {get as bs} from 'browser-sync';
+
+gulp.task('webpack', () => {
+  let options = require(path.resolve('config/webpack.config'));
+
+  options.devtool = 'source-map';
+  options.debug = true;
+  options.cache = true;
+
+  return gulp.src('app/js/app.js', {allowEmpty: true})
+    .pipe(webpack(options))
+    .pipe(gulp.dest('build/js'))
+    .pipe(bs('kit').stream({match: '**/*.js'}));
+});

gulpfile.babel.js

@@ -0,0 +1,10 @@
+import gulp from 'gulp';
+
+require('require-dir')('./gulp');
+
+gulp.task('start', gulp.series(
+  'copy',
+  gulp.parallel('postcss', 'webpack'),
+  'handlebars',
+  'serve'
+));

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "htmlacademy--codeguide",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "normalize.css": "^3.0.3",
+    "prismjs": "0.0.1",
+    "prismjs-default-theme": "0.0.1"
+  },
+  "devDependencies": {
+    "babel-core": "^5.8.25",
+    "babel-loader": "^5.3.2",
+    "babel-runtime": "^5.8.25",
+    "browser-sync": "^2.9.8",
+    "css-mqpacker": "^4.0.0",
+    "cssnext": "^1.8.4",
+    "eslint": "^1.5.1",
+    "fs-extra": "^0.24.0",
+    "gulp": "gulpjs/gulp#4.0",
+    "gulp-compile-handlebars": "^0.5.0",
+    "gulp-minify-css": "^1.2.1",
+    "gulp-postcss": "^6.0.0",
+    "gulp-rename": "^1.2.2",
+    "hbs-helpers": "^1.0.3",
+    "husky": "^0.10.1",
+    "merge": "^1.2.0",
+    "node-libs-browser": "^0.5.3",
+    "postcss-assets": "^3.0.2",
+    "postcss-css-variables": "^0.5.0",
+    "postcss-import": "^7.0.0",
+    "postcss-mixins": "^1.0.1",
+    "postcss-nested": "^1.0.0",
+    "require-dir": "^0.3.0",
+    "webpack": "^1.12.2",
+    "webpack-stream": "^2.1.1"
+  },
+  "scripts": {
+    "build": "gulp build",
+    "dev": "gulp start",
+    "start": "npm run dev",
+    "lint": "eslint .",
+    "prepush": "npm run lint",
+    "test": "npm run lint"
+  },
+  "engines": {
+    "node": ">=0.12"
+  },
+  "license": "MIT"
+}