Completed Skills Assessment

.gitignore

@@ -0,0 +1,2 @@
+build
+node_modules

.nvmrc

@@ -0,0 +1 @@
+12.16.1

Project Setup Readme.md

@@ -0,0 +1,29 @@
+# Skills Assesment
+
+This project uses NVM, Node 12.16.1 and Gulp. It uses SCSS, HTML and JS. It uses Browser Sync to serve the project locally.
+
+## Installation
+
+After cloning the repo run the following commands to setup the project.
+
+```
+nvm install # Only needed if you don't already have 12.16.1
+nvm use
+npm i
+```
+
+## Running the Project
+
+There are three commands setup in the package.json. To review the project you will want `npm run start` described in the [Serve](#Serve) section.
+
+### Development
+
+Run `npm run dev` to start the dev environment. This will build and watch the SCSS and JS and copy the HTML file into the `./build` directory.
+
+### Build
+
+Run `npm run build` to compile the SCSS, JS and copy the HTML into the build directory. You can open the html file there or you can run the next command to start a local server for it.
+
+### Serve
+
+Run `npm start` to compile the SCSS JS and copy the HTML into the build directory. This will automatically start a dev server and should open it up in the browser. The dev server uses `0.0.0.0` which can be access locally through `localhost` and the automatically selected port (i.e. `localhost:3000`). It can also be accessed through the IP of your current machine and the port from any other machine in your local network (i.e. `192.168.86.111:3000`).

gulpfile.js

@@ -0,0 +1,89 @@
+const gulp = require('gulp');
+const sass = require('gulp-sass');
+const postcss = require('gulp-postcss');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+const browserSync = require('browser-sync').create();
+const babel = require('gulp-babel');
+const uglify = require('gulp-uglify');
+
+sass.compiler = require('node-sass');
+
+const postCssPlugins = [autoprefixer()];
+
+function compileSCSS() {
+  return gulp
+    .src('./src/scss/index.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(postcss(postCssPlugins))
+    .pipe(gulp.dest('./build/css'))
+    .pipe(browserSync.stream());
+}
+
+function watchSCSS() {
+  return gulp.watch('./src/scss/index.scss', compileSCSS);
+}
+
+function compileJS() {
+  return gulp
+    .src('./src/js/index.js')
+    .pipe(
+      babel({
+        presets: ['@babel/env'],
+      }),
+    )
+    .pipe(gulp.dest('./build/js'))
+    .pipe(browserSync.stream());
+}
+
+function watchJS() {
+  return gulp.watch('./src/js/index.js', compileJS);
+}
+
+function runBrowserSync() {
+  return browserSync.init({
+    server: {
+      host: '0.0.0.0',
+      watch: true,
+      baseDir: './build',
+    },
+  });
+}
+
+function copyHTML() {
+  return gulp.src('./src/**/*.html').pipe(gulp.dest('./build')).pipe(browserSync.stream());
+}
+
+function watchHTML() {
+  return gulp.watch('./src/**/*.html', copyHTML);
+}
+
+function buildSCSS() {
+  postCssPlugins.push(cssnano());
+  return gulp
+    .src('./src/scss/**/*.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(postcss(postCssPlugins))
+    .pipe(gulp.dest('./build/css'));
+}
+
+function buildJS() {
+  postCssPlugins.push(cssnano());
+  return gulp
+    .src('./src/js/index.js')
+    .pipe(
+      babel({
+        presets: ['@babel/env'],
+      }),
+    )
+    .pipe(uglify())
+    .pipe(gulp.dest('./build/js'))
+    .pipe(browserSync.stream());
+}
+
+gulp.task(
+  'watch',
+  gulp.series(compileSCSS, compileJS, copyHTML, gulp.parallel(watchSCSS, watchJS, watchHTML, runBrowserSync)),
+);
+gulp.task('build', gulp.parallel(copyHTML, buildSCSS, buildJS));
+gulp.task('start', gulp.series(copyHTML, gulp.parallel(buildSCSS, buildJS, runBrowserSync)));