set up files to update foundationpress to latest foundation version

.babelrc

@@ -1,4 +1,4 @@
 {
-	"presets": ["es2015"],
+	"presets": ["@babel/preset-env"],
   "compact": false
 }

.browserslistrc

@@ -0,0 +1,5 @@
+# Browsers that we support
+last 2 versions
+ie >= 9
+ios >= 7
+android >= 4.4

gulpfile.babel.js

@@ -1,18 +1,41 @@
 'use strict';
 
+//import plugins       from 'gulp-load-plugins';
+//import yargs         from 'yargs';
+//import browser       from 'browser-sync';
+//import gulp          from 'gulp';
+//import rimraf        from 'rimraf';
+//import yaml          from 'js-yaml';
+//import fs            from 'fs';
+import dateFormat    from 'dateformat';
+//import webpackStream from 'webpack-stream';
+//import webpack2      from 'webpack';
+//import named         from 'vinyl-named';
+import log           from 'fancy-log';
+import colors        from 'ansi-colors';
+
 import plugins       from 'gulp-load-plugins';
 import yargs         from 'yargs';
 import browser       from 'browser-sync';
 import gulp          from 'gulp';
+import panini        from 'panini';
 import rimraf        from 'rimraf';
+import sherpa        from 'style-sherpa';
 import yaml          from 'js-yaml';
 import fs            from 'fs';
-import dateFormat    from 'dateformat';
 import webpackStream from 'webpack-stream';
 import webpack2      from 'webpack';
 import named         from 'vinyl-named';
-import log           from 'fancy-log';
+import uncss         from 'uncss';
-import colors        from 'ansi-colors';
+import autoprefixer  from 'autoprefixer';
+
+// added to have fontawesome support
+gulp.task('icons', function() {
+    return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
+        .pipe(gulp.dest(dist+'/assets/webfonts/'));
+});
+// end fontawesome
+
 
 // Load all Gulp plugins into one variable
 const $ = plugins();
@@ -24,7 +47,10 @@ const PRODUCTION = !!(yargs.argv.production);
 const DEV = !!(yargs.argv.dev);
 
 // Load settings from settings.yml
-const { BROWSERSYNC, COMPATIBILITY, REVISIONING, PATHS } = loadConfig();
+//const { BROWSERSYNC, COMPATIBILITY, REVISIONING, PATHS } = loadConfig();
+// Load settings from settings.yml
+//const { PORT, UNCSS_OPTIONS, PATHS } = loadConfig();
+const { PORT, UNCSS_OPTIONS, PATHS, BROWSERSYNC, COMPATIBILITY, REVISIONING } = loadConfig();
 
 // Check if file exists synchronously
 function checkFileExists(filepath) {
@@ -61,6 +87,7 @@ function loadConfig() {
   }
 }
 
+
 // Delete the "dist" folder
 // This happens every time a build starts
 function clean(done) {
@@ -74,88 +101,184 @@ function copy() {
     .pipe(gulp.dest(PATHS.dist + '/assets'));
 }
 
+// no need for panini/html files
+//
+// Copy page templates into finished HTML files
+//function pages() {
+//  return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
+//    .pipe(panini({
+//      root: 'src/pages/',
+//      layouts: 'src/layouts/',
+//      partials: 'src/partials/',
+//      data: 'src/data/',
+//      helpers: 'src/helpers/'
+//    }))
+//    .pipe(gulp.dest(PATHS.dist));
+//}
+// Load updated HTML templates and partials into Panini
+//function resetPages(done) {
+//  panini.refresh();
+//  done();
+//}
+//
+// no need for styleguide
+//
+// Generate a style guide from the Markdown content and HTML template in styleguide/
+//function styleGuide(done) {
+//  sherpa('src/styleguide/index.md', {
+//    output: PATHS.dist + '/styleguide.html',
+//    template: 'src/styleguide/template.html'
+//  }, done);
+//}
+
+
+
+
+// Compile Sass into CSS
+// In production, the CSS is compressed
+//function sass() {
+//  return gulp.src(['src/assets/scss/app.scss','src/assets/scss/editor.scss'])
+//    .pipe($.sourcemaps.init())
+//    .pipe($.sass({
+//      includePaths: PATHS.sass
+//    })
+//      .on('error', $.sass.logError))
+//    .pipe($.autoprefixer({
+//      browsers: COMPATIBILITY
+//    }))
+//
+//    .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
+//    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
+//    .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev()))
+//    .pipe(gulp.dest(PATHS.dist + '/assets/css'))
+//    .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev.manifest()))
+//    .pipe(gulp.dest(PATHS.dist + '/assets/css'))
+//    .pipe(browser.reload({ stream: true }));
+//}
 // Compile Sass into CSS
 // In production, the CSS is compressed
 function sass() {
+
+  const postCssPlugins = [
+    // Autoprefixer
+    autoprefixer(),
+
+    // UnCSS - Uncomment to remove unused styles in production
+    // PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
+  ].filter(Boolean);
+
+//  return gulp.src('src/assets/scss/app.scss')
+  //  we need editor.scss for the wordpress editor styles
   return gulp.src(['src/assets/scss/app.scss','src/assets/scss/editor.scss'])
     .pipe($.sourcemaps.init())
     .pipe($.sass({
       includePaths: PATHS.sass
     })
       .on('error', $.sass.logError))
-    .pipe($.autoprefixer({
+    .pipe($.postcss(postCssPlugins))
-      browsers: COMPATIBILITY
-    }))
-
     .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
     .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
-    .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev()))
     .pipe(gulp.dest(PATHS.dist + '/assets/css'))
     .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev.manifest()))
     .pipe(gulp.dest(PATHS.dist + '/assets/css'))
     .pipe(browser.reload({ stream: true }));
 }
 
-// Combine JavaScript into one file
+let webpackConfig = {
-// In production, the file is minified
+  mode: (PRODUCTION ? 'production' : 'development'),
-const webpack = {
-  config: {
   module: {
     rules: [
       {
-          test: /.js$/,
+        test: /\.js$/,
+        use: {
           loader: 'babel-loader',
-          exclude: /node_modules(?![\\\/]foundation-sites)/,
+          options: {
-        },
+            presets: [ "@babel/preset-env" ],
-      ],
+            compact: false
-    },
+          }
-    externals: {
+        }
-      jquery: 'jQuery',
+      }
-    },
+    ]
   },
+  devtool: !PRODUCTION && 'source-map'
+}
 
-  changeHandler(err, stats) {
-    log('[webpack]', stats.toString({
-      colors: true,
-    }));
 
-    browser.reload();
-  },
 
-  build() {
+// Combine JavaScript into one file
+// In production, the file is minified
+//const webpack = {
+//  config: {
+//    module: {
+//      rules: [
+//        {
+//          test: /.js$/,
+//          loader: 'babel-loader',
+//          exclude: /node_modules(?![\\\/]foundation-sites)/,
+//        },
+//      ],
+//    },
+//    externals: {
+//      jquery: 'jQuery',
+//    },
+//  },
+//
+//  changeHandler(err, stats) {
+//    log('[webpack]', stats.toString({
+//      colors: true,
+//    }));
+//
+//    browser.reload();
+//  },
+//
+//  build() {
+//    return gulp.src(PATHS.entries)
+//      .pipe(named())
+//      .pipe(webpackStream(webpack.config, webpack2))
+//      .pipe($.if(PRODUCTION, $.uglify()
+//        .on('error', e => { console.log(e); }),
+//      ))
+//      .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev()))
+//      .pipe(gulp.dest(PATHS.dist + '/assets/js'))
+//      .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev.manifest()))
+//      .pipe(gulp.dest(PATHS.dist + '/assets/js'));
+//  },
+//
+//  watch() {
+//    const watchConfig = Object.assign(webpack.config, {
+//      watch: true,
+//      devtool: 'inline-source-map',
+//    });
+//
+//    return gulp.src(PATHS.entries)
+//      .pipe(named())
+//      .pipe(webpackStream(watchConfig, webpack2, webpack.changeHandler)
+//        .on('error', (err) => {
+//          log('[webpack:error]', err.toString({
+//            colors: true,
+//          }));
+//        }),
+//      )
+//      .pipe(gulp.dest(PATHS.dist + '/assets/js'));
+//  },
+//};
+//
+//gulp.task('webpack:build', webpack.build);
+//gulp.task('webpack:watch', webpack.watch);
+
+// Combine JavaScript into one file
+// In production, the file is minified
+function javascript() {
   return gulp.src(PATHS.entries)
     .pipe(named())
-      .pipe(webpackStream(webpack.config, webpack2))
+    .pipe($.sourcemaps.init())
-      .pipe($.if(PRODUCTION, $.uglify()
+    .pipe(webpackStream(webpackConfig, webpack2))
-        .on('error', e => { console.log(e); }),
+    .pipe($.if(PRODUCTION, $.terser()
+      .on('error', e => { console.log(e); })
     ))
-      .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev()))
+    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
-      .pipe(gulp.dest(PATHS.dist + '/assets/js'))
-      .pipe($.if(REVISIONING && PRODUCTION || REVISIONING && DEV, $.rev.manifest()))
     .pipe(gulp.dest(PATHS.dist + '/assets/js'));
-  },
+}
-
-  watch() {
-    const watchConfig = Object.assign(webpack.config, {
-      watch: true,
-      devtool: 'inline-source-map',
-    });
-
-    return gulp.src(PATHS.entries)
-      .pipe(named())
-      .pipe(webpackStream(watchConfig, webpack2, webpack.changeHandler)
-        .on('error', (err) => {
-          log('[webpack:error]', err.toString({
-            colors: true,
-          }));
-        }),
-      )
-      .pipe(gulp.dest(PATHS.dist + '/assets/js'));
-  },
-};
-
-gulp.task('webpack:build', webpack.build);
-gulp.task('webpack:watch', webpack.watch);
 
 // Copy images to the "dist" folder
 // In production, the images are compressed
@@ -179,6 +302,25 @@ function images() {
       })
 		])))
     .pipe(gulp.dest(PATHS.dist + '/assets/images'));
+  return gulp.src('src/assets/img/**/*')
+    .pipe($.if(PRODUCTION, $.imagemin([
+      $.imagemin.jpegtran({
+        progressive: true,
+      }),
+      $.imagemin.optipng({
+        optimizationLevel: 5,
+      }),
+			$.imagemin.gifsicle({
+        interlaced: true,
+      }),
+			$.imagemin.svgo({
+        plugins: [
+          {cleanupAttrs: true},
+          {removeComments: true},
+        ]
+      })
+		])))
+    .pipe(gulp.dest(PATHS.dist + '/assets/img'));
 }
 
 // Create a .zip archive of the theme
@@ -216,18 +358,25 @@ gulp.task('phpcbf', function () {
 });
 
 // Start BrowserSync to preview the site in
+//function server(done) {
+//  browser.init({
+//    proxy: BROWSERSYNC.url,
+//
+//    ui: {
+//      port: 8080
+//    },
+//
+//  });
+//  done();
+//}
+// Start a server with BrowserSync to preview the site in
 function server(done) {
   browser.init({
-    proxy: BROWSERSYNC.url,
+    server: PATHS.dist, port: PORT
-
+  }, done);
-    ui: {
-      port: 8080
-    },
-
-  });
-  done();
 }
 
+
 // Reload the browser with BrowserSync
 function reload(done) {
   browser.reload();
@@ -237,23 +386,47 @@ function reload(done) {
 // Watch for changes to static assets, pages, Sass, and JavaScript
 function watch() {
   gulp.watch(PATHS.assets, copy);
-  gulp.watch('src/assets/scss/**/*.scss', sass)
+//  gulp.watch('src/assets/scss/**/*.scss', sass)
-    .on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
+//    .on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
-    .on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
+//    .on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
   gulp.watch('**/*.php', reload)
     .on('change', path => log('File ' + colors.bold(colors.magenta(path)) + ' changed.'))
     .on('unlink', path => log('File ' + colors.bold(colors.magenta(path)) + ' was removed.'));
   gulp.watch('src/assets/images/**/*', gulp.series(images, reload));
+//}
+// Watch for changes to static assets, pages, Sass, and JavaScript
+//function watch() {
+//  gulp.watch(PATHS.assets, copy);
+//  gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
+//  gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
+//  gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
+//  gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload));
+  gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
+  gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
+  gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
+//  gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
 }
 
 // Build the "dist" folder by running all of the below tasks
 gulp.task('build',
-  gulp.series(clean, gulp.parallel(sass, 'webpack:build', images, copy)));
+  //gulp.series(clean, gulp.parallel(sass, 'webpack:build', images, copy)));
+  gulp.series(clean, gulp.parallel(javascript, images), sass));
 
 // Build the site, run the server, and watch for file changes
 gulp.task('default',
-  gulp.series('build', server, gulp.parallel('webpack:watch', watch)));
+  //gulp.series('build', server, gulp.parallel('webpack:watch', watch)));
+  gulp.series('build', server, watch));
 
 // Package task
 gulp.task('package',
   gulp.series('build', archive));
+
+// Build the "dist" folder by running all of the below tasks
+// Sass must be run later so UnCSS can search for used classes in the others assets.
+//gulp.task('build',
+ //gulp.series(clean, gulp.parallel(pages, javascript, images, copy), sass, styleGuide));
+
+// Build the site, run the server, and watch for file changes
+//gulp.task('default',
+//  gulp.series('build', server, watch));
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "archive-wp-theme",
-  "title": "arcHIVE wordpress theme",
+  "title": "arcHIVEwordpressTheme",
   "version": "1.0.0",
   "description": "arcHIVE theme is a design by Oficina De Disseny converted into HTML5, CSS and PHP by vitrubio.net for Hangar.org",
   "homepage": "https://arc-hive.zone",
@@ -30,40 +30,44 @@
     "what-input": "^4.1.3"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.3",
     "ansi-colors": "^1.0.1",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.2",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-register": "^6.7.2",
-    "browser-sync": "^2.26.14",
     "dateformat": "^3.0.2",
     "fancy-log": "^1.3.2",
-    "gulp": "^4.0",
     "gulp-autoprefixer": "^7.0.1",
-    "gulp-babel": "^8.0.0",
-    "gulp-clean-css": "^4.0.0",
-    "gulp-cli": "^2.0.1",
-    "gulp-concat": "^2.5.2",
-    "gulp-extname": "^0.2.0",
-    "gulp-if": "^2.0.0",
-    "gulp-imagemin": "^5.0.3",
-    "gulp-load-plugins": "^2.0.6",
     "gulp-phpcbf": "^0.1.2",
     "gulp-phpcs": "^3.1.0",
     "gulp-rev": "^9.0.0",
-    "gulp-sass": "^4.1.0",
-    "gulp-sourcemaps": "^1.6.0",
     "gulp-uglify": "^3.0.2",
     "gulp-zip": "^5.1.0",
+    "@babel/core": "^7.13.16",
+    "@babel/preset-env": "^7.13.15",
+    "@babel/register": "^7.13.16",
+    "@fortawesome/fontawesome-free": "^5.15.3",
+    "autoprefixer": "^9.8.6",
+    "babel-loader": "^8.2.2",
+    "browser-sync": "^2.26.14",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-clean-css": "^3.3.1",
+    "gulp-cli": "^2.3.0",
+    "gulp-concat": "^2.5.2",
+    "gulp-extname": "^0.2.0",
+    "gulp-if": "^2.0.0",
+    "gulp-imagemin": "^4.1.0",
+    "gulp-load-plugins": "^1.6.0",
+    "gulp-postcss": "^8.0.0",
+    "gulp-sass": "^4.1.0",
+    "gulp-sourcemaps": "^2.6.5",
+    "gulp-terser": "^1.4.1",
     "js-yaml": "^3.14.1",
     "panini": "^1.7.1",
-    "rimraf": "^2.4.3",
+    "rimraf": "^2.7.1",
     "style-sherpa": "^1.0.0",
+    "uncss": "^0.17.3",
     "vinyl-named": "^1.1.0",
-    "webpack": "^5.36.0",
+    "webpack": "^4.20.2",
-    "webpack-stream": "^6.1.2",
+    "webpack-stream": "^5.2.1",
-    "yargs": "^3.8.0"
+    "yargs": "^12.0.5"
   },
   "repository": {
     "type": "git",
@@ -71,10 +75,5 @@
   },
   "bugs": {
     "url": "https://git.hangar.org/arcHIVE-tech/arcHIVE-wordpress-theme/issues"
-  },
-  "babel": {
-    "presets": [
-      "es2015"
-    ]
   }
 }