restructure directory structure

.browserslistrc

@@ -0,0 +1 @@
+defaults

.eslintignore

@@ -0,0 +1 @@
+node_modules/

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  parser: "babel-eslint",
+  "env": {
+      "browser": true,
+      "commonjs": true,
+      "es6": true
+  },
+  "extends": [
+    "plugin:prettier/recommended"
+  ],
+  "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+      "ecmaVersion": 2018
+  },
+  "rules": {
+  }
+};

README.md

@@ -0,0 +1,9 @@
+## Build Directory
+
+Default build directory is `./build`. To change edit `gulpfile.js`.
+
+## Implemented so Far
+
+* JS transpilation, minification with Babel, Terser.
+* SASS compilation, css minification.
+* BrowserSync.

babel.config.js

@@ -0,0 +1,3 @@
+const presets = [["@babel/env"]];
+
+module.exports = { presets };

gulpfile.js

@@ -0,0 +1,71 @@
+const { src, dest, series, parallel, watch } = require("gulp");
+
+const path = require("path");
+const del = require("del");
+const babel = require("gulp-babel");
+const terser = require("gulp-terser");
+const sass = require("gulp-sass");
+const postcss = require("gulp-postcss");
+const postcssPresetEnv = require("postcss-preset-env");
+const cssnano = require("cssnano");
+const browserSync = require("browser-sync");
+
+sass.compiler = require("node-sass");
+
+const server = browserSync.create();
+
+const babelConfig = require("./babel.config.js");
+const postcssPlugins = [postcssPresetEnv(), cssnano()];
+
+const srcDir = "./src/";
+const buildDir = "./build/";
+const jsSrc = path.join(srcDir, "js/**/*.js");
+const jsDest = path.join(buildDir, "js/");
+const scssSrc = path.join(srcDir, "scss/**/*.scss");
+const cssDest = path.join(buildDir, "css/");
+
+function jsClean() {
+  return del(jsDest, { force: true });
+}
+
+function cssClean() {
+  return del(cssDest, { force: true });
+}
+
+function jsTranspile() {
+  return src(jsSrc, { sourcemaps: true })
+    .pipe(babel(babelConfig))
+    .pipe(terser())
+    .pipe(dest(jsDest, { sourcemaps: true }));
+}
+
+function scssCompile() {
+  return src(scssSrc, { sourcemaps: true })
+    .pipe(sass().on("error", sass.logError))
+    .pipe(postcss(postcssPlugins))
+    .pipe(dest(cssDest, { sourcemaps: true }));
+}
+
+function serve(done) {
+  server.init({
+    open: false,
+    server: {
+      baseDir: buildDir,
+    }
+    // or instead of server
+    // proxy: "example.home"
+  });
+  done();
+}
+
+function reload(done) {
+  server.reload();
+  done();
+}
+
+const jsWatch = () =>
+  watch(jsSrc, { ignoreInitial: false }, series(jsClean, jsTranspile));
+const cssWatch = () =>
+  watch(scssSrc, { ignoreInitial: false }, series(cssClean, scssCompile));
+
+exports.default = parallel(jsWatch, cssWatch, serve);

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "gulp-web",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "ray <git@gabbaell.co.uk>",
+  "license": "MIT",
+  "private": true,
+  "devDependencies": {
+    "@babel/cli": "^7.6.2",
+    "@babel/core": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
+    "babel-eslint": "^10.0.3",
+    "babel-preset-env": "^1.7.0",
+    "browser-sync": "^2.26.7",
+    "cssnano": "^4.1.10",
+    "del": "^5.1.0",
+    "eslint": "^6.4.0",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-postcss": "^8.0.0",
+    "gulp-sass": "^4.0.2",
+    "gulp-sourcemaps": "^2.6.5",
+    "gulp-terser": "^1.2.0",
+    "node-sass": "^4.12.0",
+    "postcss-preset-env": "^6.7.0",
+    "prettier": "1.18.2"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.6.0"
+  }
+}

src/js/index.js

@@ -0,0 +1,5 @@
+(function() {
+  window.addEventListener("DOMContentLoaded", event => {
+    // TODO
+  });
+})();

src/scss/_base.scss

@@ -0,0 +1,3 @@
+html {
+  font-size: 100%;
+}

src/scss/style.scss

@@ -0,0 +1,2 @@
+@import "variables";
+@import "base";