Merge pull request #1 from J0ddy/update-1.1.0

Update 1.1.0

gulpfile.js

@@ -1,69 +1,79 @@
-const gulp = require('gulp');
-const sass = require('gulp-sass')(require('sass'));
-const autoprefixer = require('gulp-autoprefixer');
-const browserSync = require('browser-sync').create();
-const webpack = require('webpack-stream');
-const webpackConfig = require('./webpack.config.js');
-const htmlmin = require('gulp-htmlmin');
+import gulp from 'gulp';
+import sass from 'gulp-dart-sass';
+import autoprefixer from 'gulp-autoprefixer';
+import browserSync from 'browser-sync';
+import webpack from 'webpack-stream';
+import webpackConfig from './webpack.config.js';
+import htmlmin from 'gulp-htmlmin';
+import imagemin from 'gulp-imagemin';
+import changed from 'gulp-changed';
+import fetch from 'node-fetch';
 
 // Webpack task
-gulp.task('webpack', function() {
-  return gulp.src('src/js/*.js')
+gulp.task('webpack', () =>
+  gulp.src('src/js/*.js')
     .pipe(webpack(webpackConfig))
     .pipe(gulp.dest('dist/js'))
-    .pipe(browserSync.stream());
-});
+    .pipe(browserSync.stream())
+);
 
 // Sass task
-gulp.task('sass', function() {
-    return gulp.src('src/scss/*.scss')
-      .pipe(sass().on('error', sass.logError))
-      .pipe(autoprefixer())
-      .pipe(gulp.dest('dist/css'))
-      .pipe(browserSync.stream());
-});
+gulp.task('sass', () =>
+  gulp.src('src/scss/*.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(autoprefixer())
+    .pipe(gulp.dest('dist/css'))
+    .pipe(browserSync.stream())
+);
 
 // Html task
-gulp.task('html', function() {
-  return gulp.src('src/html/*.html')
+gulp.task('html', () =>
+  gulp.src('src/html/*.html')
     .pipe(htmlmin({ collapseWhitespace: true }))
     .pipe(gulp.dest('dist'))
-    .pipe(browserSync.stream());
-});
-
+    .pipe(browserSync.stream())
+);
+
+// Images task
+gulp.task('images', () =>
+  gulp.src('src/img/**/*.{jpg,jpeg,png,gif,svg}')
+    .pipe(changed('dist/img'))
+    .pipe(imagemin())
+    .pipe(gulp.dest('dist/img'))
+    .pipe(browserSync.stream())
+);
+
 // Watch task
-gulp.task('watch', function() {
-    browserSync.init({
-        server: {
-          baseDir: './dist',
-          index: 'index.html',
-          middleware: [
-            function(req, res, next) {
-              if (/\.js$/.test(req.url)) {
-                res.setHeader('Content-Type', 'application/javascript');
-              } else if (/\.css$/.test(req.url)) {
-                res.setHeader('Content-Type', 'text/css');
-              }
-              next();
-            }
-          ],
-          open: false
+gulp.task('watch', () => {
+  browserSync.init({
+    server: {
+      baseDir: './dist',
+      index: 'index.html',
+      middleware: [
+        function(req, res, next) {
+          if (/\.js$/.test(req.url)) {
+            res.setHeader('Content-Type', 'application/javascript');
+          } else if (/\.css$/.test(req.url)) {
+            res.setHeader('Content-Type', 'text/css');
+          }
+          next();
         }
-      });
+      ],
+      open: false
+    }
+  });
 
   gulp.watch('src/scss/*.scss', gulp.series('sass'));
   gulp.watch('src/js/*.js', gulp.series('webpack'));
   gulp.watch('src/html/*.html', gulp.series('html'));
   gulp.watch('.env', gulp.series('webpack'));
-  //gulp.watch('dist/*.html').on('change', browserSync.reload);
 });
 
-
 // Dev task
-gulp.task('dev', gulp.series('sass', 'webpack', 'html', 'watch'));
+gulp.task('dev', gulp.series('sass', 'webpack', 'html', 'images', 'watch'));
 
 // Build task
-gulp.task('build', gulp.series('sass', 'webpack', 'html'));
+gulp.task('build', gulp.series('sass', 'webpack', 'html', 'images'));
 
 // Default task
 gulp.task('default', gulp.series('dev'));

package.json

@@ -1,8 +1,9 @@
 {
   "name": "ytliveapp",
-  "version": "1.0.0",
-  "description": "",
+  "version": "1.1.0",
+  "description": "YTLiveApp is a simple web app that allows users to view see all current, scheduled and past livestreams using the YouTube API. This app is built using HTML, SCSS, JS, Gulp, Webpack, and YouTube API.",
   "main": "ytapp.scss",
+  "type": "module",
   "scripts": {
     "test": "gulp test",
     "dev": "gulp dev",
@@ -25,11 +26,15 @@
     "dotenv-webpack": "^8.0.1",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^8.0.0",
+    "gulp-changed": "^4.0.3",
     "gulp-htmlmin": "^5.0.1",
-    "gulp-sass": "^5.1.0",
+    "gulp-imagemin": "^8.0.0",
     "webpack-stream": "^7.0.0"
   },
   "dependencies": {
+    "gulp-dart-sass": "^1.1.0",
+    "gulp-sass": "^5.1.0",
+    "node-fetch": "^3.3.1",
     "sass": "^1.62.0"
   }
 }

src/html/index.html

@@ -10,6 +10,7 @@
 <body>
 <main>
     <header id="main-header">
+        <script src=https://apis.google.com/js/platform.js async crossorigin="anonymous"></script>
         <h1>YT Livesteams</h1>
     </header>
     <div id="live-container">