statikstack · tapmorales · Jul 31, 2018
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,95 @@
+const gulp = require('gulp')
+const babel = require('gulp-babel')
+//const sourcemaps = require('gulp-sourcemaps')
+const browserSync = require('browser-sync')
+const del = require('del')
+const plumber = require('gulp-plumber')
+const autoprefixer = require('gulp-autoprefixer')
+const cssnano = require('gulp-cssnano')
+const htmlreplace = require('gulp-html-replace')
+const concat = require('gulp-concat')
+const uglify = require('gulp-uglify')
+const rename = require('gulp-rename')
+
+const paths = {
+  src: {
+    'root': './statik/',
+    'js': './statik/scripts/',
+    'css': './statik/styles/'
+  },
+  dist: {
+    'root': './dist/',
+    'js': './dist/scripts/',
+    'css': './dist/styles/'
+  }
+}
+
+gulp.task('clean', () => del(`${paths.dist.root}**/*`) )
+
+gulp.task('copy', ['clean'], () => {
+  return gulp.src([
+    `${paths.src.root}**/*`,
+    `!${paths.src.css}**/*.css`,
+    `!${paths.src.js}**/*.js`,
+  ], {"base": paths.src.root})
+    .pipe(gulp.dest(paths.dist.root))
+})
+
+gulp.task('css', () => {
+return gulp.src(`${paths.src.css}**/*.css`)
+    .pipe(plumber())
+    .pipe(concat('main.min.css'))
+    .pipe(autoprefixer())
+    .pipe(cssnano())
+    .pipe(gulp.dest(paths.dist.css))
+})
+
+const minifyJs = (filename) => {
+  return gulp.src(`${paths.src.js}${filename}.js`)
+    .pipe(plumber())
+    .pipe(babel())
+    .pipe(uglify())
+    .pipe(rename(`${filename}.min.js`))
+    .pipe(gulp.dest(paths.dist.js))
+}
+
+gulp.task('js:vendor', () => {
+  return minifyJs('vendor')
+})
+gulp.task('js:app', () => {
+  return minifyJs('app')
+})
+
+gulp.task('htmlreplace', () => {
+  return gulp.src(`${paths.src.root}**/*.html`)
+    .pipe(htmlreplace({
+      'css': '/styles/main.min.css',
+      'js-vendor': '/scripts/vendors.min.js',
+      'js-app': '/scripts/app.min.js'
+    }))
+    .pipe(gulp.dest(paths.dist.root));
+})
+
+gulp.task('server', () => {
+  console.log('server')
+
+  browserSync.init({
+    server: {
+      baseDir: paths.src.root
+    }
+  })
+
+  gulp.watch([
+    `${paths.src.root}**/*`
+  ]).on('change', browserSync.reload)
+})
+
+gulp.task('build', ['copy'], () => {
+  gulp.start('js:vendor', 'js:app', 'css', 'htmlreplace')
+})
+
+gulp.task('default', ['server'], () => {
+  console.log('server is running...')
+})
+
+
diff --git a/package.json b/package.json
@@ -13,7 +13,9 @@
   ],
   "scripts": {
     "lint": "eslint src/**/*.js",
-    "start": "node src/index.js"
+    "start": "gulp",
+    "build": "gulp build",
+    "gulp": "gulp"
   },
   "repository": {
     "type": "git",
@@ -24,9 +26,24 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "babel-core": "6.26.3",
+    "babel-preset-env": "1.7.0",
+    "browser-sync": "2.24.6",
+    "del": "3.0.0",
     "eslint": "5.0.1",
     "eslint-config-prettier": "2.9.0",
     "eslint-plugin-prettier": "2.6.2",
+    "gulp": "3.9.1",
+    "gulp-autoprefixer": "5.0.0",
+    "gulp-babel": "7.0.1",
+    "gulp-concat": "2.6.1",
+    "gulp-cssnano": "2.1.3",
+    "gulp-html-replace": "1.6.2",
+    "gulp-imagemin": "4.1.0",
+    "gulp-plumber": "1.2.0",
+    "gulp-rename": "1.4.0",
+    "gulp-sourcemaps": "2.6.4",
+    "gulp-uglify": "3.0.1",
     "prettier": "1.13.7"
   },
   "license": "MIT"

diff --git a/statik/fonts/open-sans-v15-latin-600.woff b/statik/fonts/open-sans-v15-latin-600.woff
diff --git a/statik/fonts/open-sans-v15-latin-600.woff2 b/statik/fonts/open-sans-v15-latin-600.woff2
diff --git a/statik/fonts/open-sans-v15-latin-700.woff b/statik/fonts/open-sans-v15-latin-700.woff
diff --git a/statik/fonts/open-sans-v15-latin-700.woff2 b/statik/fonts/open-sans-v15-latin-700.woff2
diff --git a/statik/fonts/open-sans-v15-latin-800.woff b/statik/fonts/open-sans-v15-latin-800.woff
diff --git a/statik/fonts/open-sans-v15-latin-800.woff2 b/statik/fonts/open-sans-v15-latin-800.woff2
diff --git a/statik/fonts/open-sans-v15-latin-regular.woff b/statik/fonts/open-sans-v15-latin-regular.woff
diff --git a/statik/fonts/open-sans-v15-latin-regular.woff2 b/statik/fonts/open-sans-v15-latin-regular.woff2
diff --git a/statik/images/favicon.ico b/statik/images/favicon.ico
diff --git a/statik/images/logo.png b/statik/images/logo.png
diff --git a/statik/index.html b/statik/index.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+  <title>Statik Starter Kit</title>
+
+  <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
+  <!-- build:css-->
+  <link rel="stylesheet" href="styles/normalize.css">
+  <link rel="stylesheet" href="styles/fonts.css">
+  <link rel="stylesheet" href="styles/app.css">
+  <!-- endbuild -->
+</head>
+
+<body>
+  <header class="header">
+    <nav class="navbar">
+      <a class="navbar__brand" href="/">
+        <img src="images/logo.png" alt="Statik Logo">
+        <span>Statik</span>
+      </a>
+      <ul class="navbar__social">
+        <li>
+          <a href="https://github.com/statikstack">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 23.406" role="img">
+              <title>GitHub</title>
+              <description>GitHub Profile</description>
+              <path d="M12,.3A12,12,0,0,0,8.2,23.682c.6.113.82-.258.82-.577,0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61A3.181,3.181,0,0,0,3.633,17.7c-1.087-.744.084-.729.084-.729a2.516,2.516,0,0,1,1.838,1.236,2.557,2.557,0,0,0,3.495,1,2.558,2.558,0,0,1,.76-1.6c-2.665-.3-5.466-1.332-5.466-5.93A4.63,4.63,0,0,1,5.579,8.45a4.267,4.267,0,0,1,.105-3.176s1.005-.322,3.3,1.23a11.314,11.314,0,0,1,6,0c2.28-1.552,3.285-1.23,3.285-1.23a4.385,4.385,0,0,1,.12,3.176,4.648,4.648,0,0,1,1.23,3.22c0,4.61-2.805,5.625-5.475,5.92a2.873,2.873,0,0,1,.81,2.22c0,1.606-.015,2.9-.015,3.286,0,.315.21.69.825.57A11.985,11.985,0,0,0,12,.3"
+                transform="translate(0 -0.297)" />
+            </svg>
+          </a>
+        </li>
+        <li>
+          <a href="https://statikstack.slack.com">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24.001" role="img">
+              <title>Slack</title>
+              <description>Slack Channel</description>
+              <g transform="translate(0 0)">
+                <path d="M9.879,10.995l1.035,3.085,3.2-1.074L13.084,9.932l-3.2,1.08v-.017Z" />
+                <path d="M18.824,14.055l-1.555.521.54,1.61a1.246,1.246,0,0,1-.786,1.574,1.337,1.337,0,0,1-.435.063,1.26,1.26,0,0,1-1.155-.849l-.54-1.607-3.21,1.073.539,1.608a1.249,1.249,0,0,1-.794,1.575,1.286,1.286,0,0,1-.435.064,1.266,1.266,0,0,1-1.156-.85L9.3,17.218l-1.561.524A1.451,1.451,0,0,1,7.3,17.8a1.269,1.269,0,0,1-1.155-.855,1.235,1.235,0,0,1,.78-1.575l1.56-.525L7.5,11.76l-1.551.525a1.264,1.264,0,0,1-.428.064,1.241,1.241,0,0,1-.345-2.422l1.56-.52L6.2,7.8a1.249,1.249,0,0,1,2.37-.792L9.1,8.618l3.2-1.074-.54-1.605a1.245,1.245,0,1,1,2.364-.783l.54,1.621,1.555-.51a1.242,1.242,0,1,1,.791,2.354l-1.557.524,1.035,3.086,1.551-.516a1.25,1.25,0,0,1,.8,2.369l-.011-.029ZM22.995,8.7C20.52.456,16.946-1.471,8.7,1S-1.471,7.051,1,15.3s6.046,10.17,14.3,7.694,10.17-6.046,7.694-14.3Z"
+                />
+              </g>
+            </svg>
+          </a>
+        </li>
+        <li>
+          <a href="https://twitter.com/statikstack">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.001 19.507" role="img">
+              <title>Twitter</title>
+              <description>Twitter Profile</description>
+              <path d="M23.954,4.569a10,10,0,0,1-2.825.775,4.958,4.958,0,0,0,2.163-2.723A10.163,10.163,0,0,1,20.165,3.8a4.919,4.919,0,0,0-8.511,3.358,5.035,5.035,0,0,0,.127,1.124A13.935,13.935,0,0,1,1.64,3.161,4.822,4.822,0,0,0,.974,5.636a4.921,4.921,0,0,0,2.188,4.1A4.9,4.9,0,0,1,.934,9.116v.061A4.923,4.923,0,0,0,4.88,14a4.965,4.965,0,0,1-2.212.085,4.937,4.937,0,0,0,4.6,3.417,9.868,9.868,0,0,1-6.1,2.1A10.444,10.444,0,0,1,0,19.544a14,14,0,0,0,7.557,2.209,13.9,13.9,0,0,0,14-13.986c0-.209,0-.42-.015-.63A9.936,9.936,0,0,0,24,4.589l-.047-.02Z"
+                transform="translate(0 -2.246)" />
+            </svg>
+          </a>
+        </li>
+      </ul>
+    </nav>
+
+    <div class="hero">
+      <h1>Statik</h1>
+      <h2>Many stacks. One place.</h2>
+    </div>
+  </header>
+
+  <main class="main">
+    <section class="section">
+      <h2>Welcome</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus nec ligula at vehicula. Cras dapibus pellentesque
+        neque. Aliquam convallis nunc a purus sodales, ut maximus lectus scelerisque. Morbi a malesuada velit, ut tincidunt
+        sapien. Fusce placerat tellus a ullamcorper faucibus.
+      </p>
+    </section>
+
+    <section class="section">
+      <h2>Features</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus nec ligula at vehicula. Cras dapibus pellentesque
+        neque. Aliquam convallis nunc a purus sodales, ut maximus lectus scelerisque. Morbi a malesuada velit, ut tincidunt
+        sapien. Fusce placerat tellus a ullamcorper faucibus.
+      </p>
+    </section>
+  </main>
+  <!-- All vendors here -->
+  <!-- build:js-vendor -->
+  <script src="scripts/vendor.js"></script>
+  <!-- endbuild -->
+
+  <!-- All app scripts here -->
+  <!-- build:js-app -->
+  <script src="scripts/app.js"></script>
+  <!-- endbuild -->
+
+</body>
+
+</html>
diff --git a/src/index.js → statik/index.js b/src/index.js → statik/index.js
diff --git a/statik/scripts/app.js b/statik/scripts/app.js
@@ -0,0 +1,7 @@
+// import '../styles/app.css';
+
+// import '../images/logo.png';
+// import '../images/favicon.ico';
+
+console.log('App is running...');
+
diff --git a/statik/scripts/vendor.js b/statik/scripts/vendor.js
@@ -0,0 +1,4 @@
+// import 'normalize.css';
+// import '../styles/fonts.css';
+
+console.log('Vendor is running...');
diff --git a/statik/styles/app.css b/statik/styles/app.css
@@ -0,0 +1,142 @@
+:root {
+  --electromagnetic: #2f3640;
+  --hint-of-pensive: #dcdde1;
+  --lynx-white: #f5f6fa;
+  --pico-void: #192a56;
+  --rise-n-shine: #fbc531;
+  --text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--lynx-white);
+  border-top: 4px solid var(--rise-n-shine);
+  color: var(--electromagnetic);
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+h1,
+h2,
+p {
+  font-weight: 400;
+  margin: 0;
+  max-width: 80ch;
+  padding: 0;
+}
+
+p {
+  margin: 1rem 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+.header {
+  background-color: var(--pico-void);
+}
+
+.navbar {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 1rem;
+}
+
+.navbar__brand {
+  align-items: center;
+  color: var(--lynx-white);
+  display: flex;
+}
+
+.navbar__brand img {
+  margin-right: 1rem;
+}
+
+.navbar__brand span {
+  font-size: 1.5rem;
+}
+
+.navbar__social {
+  align-items: center;
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar__social li {
+  margin-left: 1rem;
+}
+
+.navbar__social a {
+  display: block;
+}
+
+.navbar__social svg {
+  fill: var(--hint-of-pensive);
+  transition: fill 200ms;
+  width: 1.5rem;
+}
+
+.navbar__social a:hover svg {
+  fill: var(--lynx-white);
+}
+
+.hero {
+  padding: 1rem;
+  text-align: center;
+}
+
+.hero h1 {
+  color: var(--lynx-white);
+  font-size: 3rem;
+  font-weight: 700;
+  text-shadow: var(--text-shadow);
+}
+
+.hero h2 {
+  color: var(--lynx-white);
+  font-size: 2rem;
+  padding: 1rem;
+  text-shadow: var(--text-shadow);
+}
+
+.main {
+  display: grid;
+  grid-gap: 2rem;
+  grid-template-columns: repeat(2, 1fr);
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 2rem 1rem;
+}
+
+.section h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+@media (max-width: 768px) {
+  .main {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+@media (max-width: 576px) {
+  .hero h1 {
+    font-size: 2.5rem;
+  }
+
+  .hero h2 {
+    font-size: 1.5rem;
+  }
+}