Merge pull request #8 from mejarc/7-gulp

7 gulp
mejarc · Jul 3, 2018 · f699299 · f699299
2 parents 83ae27c + ef1ee5b
commit f699299
Show file tree

Hide file tree

Showing 56 changed files with 169 additions and 20 deletions.
diff --git a/.babel.config.js b/.babel.config.js
@@ -0,0 +1,7 @@
+const presets = [
+  ["@babel/env", {
+  },
+useBuiltIns: "usage"]
+];
+
+module.exports = { presets };
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -28,8 +28,8 @@ module.exports = function (grunt) {
         files: [{
           expand: true,
           src: ['*.{gif,jpg,png}'],
-          cwd: 'img/',
-          dest: 'img/'
+          cwd: 'src/img/',
+          dest: 'dist/img/'
         }]
       }
     }

diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,117 @@
+var gulp = require('gulp');
+var concat = require('gulp-concat');
+var sourcemaps = require('gulp-sourcemaps');
+var useref = require('gulp-useref');
+var del = require('del');
+var babel = require('gulp-babel');
+var uglify = require('gulp-uglify');
+
+// var gutil = require('gulp-util');
+var browserSync = require('browser-sync').create();
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var webpackConfig = require('./webpack.config.js');
+var stream = require('webpack-stream');
+
+var paths = {
+  styles: {
+    src: 'src/css/**/*.css',
+    dest: 'dist/css/'
+  },
+  scripts: {
+    src: 'src/js/**/*.js',
+    dest: 'dist/js/'
+  },
+  html: {
+    src: 'src/*.html',
+    dest: 'dist/'
+  },
+  images: {
+    src: 'src/img/**/*.jpg',
+    dest: 'dist/img/'
+  }
+};
+
+// add tasks from incumbent Gruntfile
+require('gulp-grunt')(gulp, {
+  prefix: 'stage-1-'
+});
+
+gulp.task('default', [
+  'stage-1-default'
+] );
+
+// utility
+function clean() {
+  return del(['dist']);
+}
+
+// concatentate CSS; copy to /dist/css; TODO: minify
+function styles() {
+  return (gulp.src(paths.styles.src))
+  .pipe(concat('all.min.css'))
+  .pipe(gulp.dest(paths.styles.dest));
+}
+
+// transpile JS; concatentate; minify; copy to /dist/js
+function scripts() {
+  return gulp.src(paths.scripts.src)
+  .pipe(sourcemaps.init())
+  .pipe(babel({
+    presets: ['@babel/env']
+  }))
+  .pipe(concat('all.min.js'))
+  .pipe(uglify())
+  .pipe(sourcemaps.write('.'))
+  .pipe(gulp.dest(paths.scripts.dest));
+}
+// copy HTML to /dist; change script and CSS links
+function html() {
+  return (gulp.src(paths.html.src))
+  .pipe(useref())
+  .pipe(gulp.dest(paths.html.dest));
+}
+
+// copy /img to /dist
+function images() {
+  return (gulp.src(paths.images.src))
+  .pipe(gulp.dest(paths.images.dest));
+}
+
+exports.clean = clean;
+exports.styles = styles;
+exports.scripts = scripts;
+exports.html = html;
+exports.images = images;
+
+
+gulp.task('useref', () => {
+  return gulp.src(paths.html.src)
+  .pipe(useref())
+  .pipe(uglify())
+  .pipe(gulp.dest(paths.html.dest))
+});
+
+
+gulp.task('browserSync', () => {
+  browserSync.init({
+    server: {
+      baseDir: 'src'
+    }
+  });
+});
+
+gulp.task('watch', ['browserSync'], () => {
+  gulp.watch('src/js/**/*.js', browserSync.reload);
+  gulp.watch('src/*.html', browserSync.reload);
+  gulp.watch('src/css/**/*.css', browserSync.reload);
+});
+
+gulp.task('webpack', [], () => {
+  return gulp.src(path.ALL)
+    .pipe(sourcemaps.init())
+    .pipe(stream(webpackConfig))
+    .pipe(uglify()) // minification
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest(path.DEST_BUILD))
+});
diff --git a/package.json b/package.json
@@ -1,21 +1,41 @@
 {
   "name": "mws-restaurant-stage-2",
   "version": "0.1.0",
+  "private": true,
   "repository": {
     "type": "git",
     "url": "https://github.com/mejarc/mws-restaurant-stage-2.git"
   },
   "devDependencies": {
-    "grunt": "~0.4.5",
+    "@babel/core": "^7.0.0-beta.51",
+    "@babel/preset-env": "^7.0.0-beta.51",
+    "babel-cli": "^7.0.0-beta.3",
+    "babel-preset-env": "^1.7.0",
+    "browser-sync": "^2.24.5",
+    "del": "^3.0.0",
+    "grunt": "^1.0.3",
     "grunt-contrib-clean": "~0.6.0",
     "grunt-contrib-copy": "~0.8.0",
     "grunt-contrib-jshint": "~0.10.0",
     "grunt-contrib-nodeunit": "~0.4.1",
     "grunt-contrib-uglify": "~0.5.0",
     "grunt-mkdir": "~0.1.2",
-    "grunt-resize-crop": "0.0.1"
+    "grunt-resize-crop": "0.0.1",
+    "gulp": "^3.9.1",
+    "gulp-babel": "^8.0.0-beta.2",
+    "gulp-concat": "^2.6.1",
+    "gulp-grunt": "^0.5.5",
+    "gulp-sourcemaps": "^2.6.4",
+    "gulp-uglify": "^3.0.0",
+    "gulp-useref": "^3.1.5",
+    "gulp-util": "^3.0.8",
+    "webpack": "^4.13.0",
+    "webpack-cli": "^3.0.8",
+    "webpack-dev-server": "^3.1.4",
+    "webpack-stream": "^4.0.3"
   },
   "dependencies": {
-    "grunt-responsive-images": "^0.1.6"
+    "grunt-responsive-images": "^0.1.6",
+    "idb": "^2.1.3"
   }
 }
diff --git a/css/normalize.css → src/css/normalize.css b/css/normalize.css → src/css/normalize.css
diff --git a/css/styles.css → src/css/styles.css b/css/styles.css → src/css/styles.css
diff --git a/data/restaurants.json → src/data/restaurants.json b/data/restaurants.json → src/data/restaurants.json
diff --git a/favicon-16x16.png → src/favicon-16x16.png b/favicon-16x16.png → src/favicon-16x16.png
diff --git a/favicon.ico → src/favicon.ico b/favicon.ico → src/favicon.ico
diff --git a/img/1.jpg → src/img.1/1.jpg b/img/1.jpg → src/img.1/1.jpg
diff --git a/img/10.jpg → src/img.1/10.jpg b/img/10.jpg → src/img.1/10.jpg
diff --git a/img/2.jpg → src/img.1/2.jpg b/img/2.jpg → src/img.1/2.jpg
diff --git a/img/3.jpg → src/img.1/3.jpg b/img/3.jpg → src/img.1/3.jpg
diff --git a/img/4.jpg → src/img.1/4.jpg b/img/4.jpg → src/img.1/4.jpg
diff --git a/img/5.jpg → src/img.1/5.jpg b/img/5.jpg → src/img.1/5.jpg
diff --git a/img/6.jpg → src/img.1/6.jpg b/img/6.jpg → src/img.1/6.jpg
diff --git a/img/7.jpg → src/img.1/7.jpg b/img/7.jpg → src/img.1/7.jpg
diff --git a/img/8.jpg → src/img.1/8.jpg b/img/8.jpg → src/img.1/8.jpg
diff --git a/img/9.jpg → src/img.1/9.jpg b/img/9.jpg → src/img.1/9.jpg
diff --git a/src/img/1-small.jpg b/src/img/1-small.jpg
diff --git a/src/img/1-thumb.jpg b/src/img/1-thumb.jpg
diff --git a/src/img/1.jpg b/src/img/1.jpg
diff --git a/src/img/10-small.jpg b/src/img/10-small.jpg
diff --git a/src/img/10-thumb.jpg b/src/img/10-thumb.jpg
diff --git a/src/img/10.jpg b/src/img/10.jpg
diff --git a/src/img/2-small.jpg b/src/img/2-small.jpg
diff --git a/src/img/2-thumb.jpg b/src/img/2-thumb.jpg
diff --git a/src/img/2.jpg b/src/img/2.jpg
diff --git a/src/img/3-small.jpg b/src/img/3-small.jpg
diff --git a/src/img/3-thumb.jpg b/src/img/3-thumb.jpg
diff --git a/src/img/3.jpg b/src/img/3.jpg
diff --git a/src/img/4-small.jpg b/src/img/4-small.jpg
diff --git a/src/img/4-thumb.jpg b/src/img/4-thumb.jpg
diff --git a/src/img/4.jpg b/src/img/4.jpg
diff --git a/src/img/5-small.jpg b/src/img/5-small.jpg
diff --git a/src/img/5-thumb.jpg b/src/img/5-thumb.jpg
diff --git a/src/img/5.jpg b/src/img/5.jpg
diff --git a/src/img/6-small.jpg b/src/img/6-small.jpg
diff --git a/src/img/6-thumb.jpg b/src/img/6-thumb.jpg
diff --git a/src/img/6.jpg b/src/img/6.jpg
diff --git a/src/img/7-small.jpg b/src/img/7-small.jpg
diff --git a/src/img/7-thumb.jpg b/src/img/7-thumb.jpg
diff --git a/src/img/7.jpg b/src/img/7.jpg
diff --git a/src/img/8-small.jpg b/src/img/8-small.jpg
diff --git a/src/img/8-thumb.jpg b/src/img/8-thumb.jpg
diff --git a/src/img/8.jpg b/src/img/8.jpg
diff --git a/src/img/9-small.jpg b/src/img/9-small.jpg
diff --git a/src/img/9-thumb.jpg b/src/img/9-thumb.jpg
diff --git a/src/img/9.jpg b/src/img/9.jpg
diff --git a/index.html → src/index.html b/index.html → src/index.html
@@ -2,8 +2,10 @@
 <html lang="en-US">
 
 <head>
+  <!-- build:css css/all.min.css -->
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/styles.css">
+  <!-- endbuild -->
   <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
   <title>Restaurant Reviews</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -34,9 +36,10 @@ <h3>Filter Results</h3>
       <ul id="restaurants-list" aria-live="polite"></ul>
     </section>
   </main>
-
+<!-- build:js js/all.min.js -->
   <script src="js/dbhelper.js"></script>
   <script src="js/main.js"></script>
+<!-- endbuild -->
   <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAfh5xX0Unam8EcjtyvjS0a0_P3xv20SKs&libraries=places&callback=initMap"></script>
 
 

diff --git a/js/dbhelper.js → src/js/dbhelper.js b/js/dbhelper.js → src/js/dbhelper.js
@@ -9,7 +9,7 @@ class DBHelper {
    */
   static get DATABASE_URL() {
     const port = 8000 // Change this to your server port
-    return `http://localhost:${port}/data/restaurants.json`;
+    return `http://localhost:${port}/src/data/restaurants.json`;
   }
 
   /**
@@ -150,7 +150,7 @@ class DBHelper {
    * Restaurant image URL.
    */
   static imageUrlForRestaurant(restaurant) {
-    return (`/img/${restaurant.photograph}`);
+    return (`src/img/${restaurant.photograph}`);
   }
 
   /**

diff --git a/src/js/idb-scripts.js b/src/js/idb-scripts.js
diff --git a/js/main.js → src/js/main.js b/js/main.js → src/js/main.js
@@ -194,8 +194,8 @@ createRestaurantImages = (restaurant) => {
   */
   const picture = document.createElement('picture');
   picture.innerHTML = `
-    <source media="(min-width: 585px)" srcset="img/${restaurant.id}-thumb.jpg">
-    <source media="(max-width: 584px") srcset="img/${restaurant.id}-small.jpg">
+    <source media="(min-width: 585px)" srcset="src/img/${restaurant.id}-thumb.jpg">
+    <source media="(max-width: 584px") srcset="src/img/${restaurant.id}-small.jpg">
   `;
   picture.append(image);
   return picture;

diff --git a/js/restaurant_info.js → src/js/restaurant_info.js b/js/restaurant_info.js → src/js/restaurant_info.js
@@ -56,8 +56,8 @@ createRestaurantImages = (restaurant) => {
 
   const picture = document.createElement('picture');
   picture.innerHTML = `
-    <source media="(max-width: 500px)" srcset="img/${restaurant.id}-thumb.jpg">
-    <source media="(min-width: 501px) and (max-width: 600px") srcset="img/${restaurant.id}-small.jpg">
+    <source media="(max-width: 500px)" srcset="src/img/${restaurant.id}-thumb.jpg">
+    <source media="(min-width: 501px) and (max-width: 600px") srcset="src/img/${restaurant.id}-small.jpg">
   `;
   picture.append(image);
   return picture;

diff --git a/js/sw.js → src/js/sw.js b/js/sw.js → src/js/sw.js
@@ -1,3 +1,5 @@
+import idb from 'idb';
+
 var contentCache = [
   '/',
   '../index.html',
@@ -7,8 +9,8 @@ var contentCache = [
   './dbhelper.js',
   '../favicon.ico',
   '../favicon-16x16.png',
-  '../css/styles.css',
-  '../css/normalize.css',
+  './css/styles.css',
+  './css/normalize.css',
   '../data/restaurants.json'
 ];
 var staticCacheName = 'stage-1-restaurants';

diff --git a/restaurant.html → src/restaurant.html b/restaurant.html → src/restaurant.html
@@ -2,10 +2,10 @@
 <html lang="en-US">
 
 <head>
-  <!-- Normalize.css for better cross-browser consistency -->
-  <link rel="stylesheet" href="css/normalize.css">
-  <!-- Main CSS file -->
-  <link rel="stylesheet" href="css/styles.css">
+    <!-- build:css css/all.min.css -->
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/styles.css">
+    <!-- endbuild -->
   <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
   <title>Restaurant Info</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -57,10 +57,10 @@ <h2 id="restaurant-name"></h2>
   </footer>
   <!-- End footer -->
 
-  <!-- Beginning scripts -->
-  <!-- Database helpers -->
+  <!-- build:js js/all.min.js -->
   <script src="js/dbhelper.js"></script>
   <script src="js/restaurant_info.js"></script>
+  <!-- endbuild -->
   <!-- Google Maps -->
   <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAfh5xX0Unam8EcjtyvjS0a0_P3xv20SKs&libraries=places&callback=initMap"></script>
   <!-- End scripts -->