Cleaned up build process. Now using webpack, gulp and babel.

assets/js/confirmation.js

@@ -0,0 +1,18 @@
+import jquery from 'jquery';
+import clipboard from 'clipboard';
+let $ = jquery;
+
+export default function confirmation() {
+
+  var clipboard = new ClipboardJS('.psst');
+
+  clipboard.on('success', function(event) {
+    $( '#copy-secret' ).foundation('show');
+  });
+
+  clipboard.on('error', function(event) {
+    console.error('Action:', e.action);
+    console.error('Trigger:', e.trigger);
+  });
+
+}

assets/js/psst.js

@@ -0,0 +1,6 @@
+import jquery from 'jquery';
+import confirmation from './confirmation';
+
+jquery( function() {
+  confirmation();
+});

assets/scss/editor.scss

@@ -0,0 +1,3 @@
+* {
+  font-family: 'Lato', Arial, Helvetica, sans-serif;
+}

config.yml

@@ -22,10 +22,9 @@ PATHS:
   dist: ""
   # Paths to static assets that aren't images, CSS, or JavaScript
   assets:
-    - "assets/fonts/*"
     - "!assets/{img,js,scss,css}/**/*"
   # Paths to JavaScript entry points for webpack to bundle modules
   entries:
-    - "assets/js/psst-admin.js"
+    - "assets/js/psst.js"
 
 LOCAL_PATH: "http://psst.test"

gulpfile.babel.js

@@ -21,38 +21,38 @@ let PRODUCTION = !!(yargs.argv.production);
 const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS, LOCAL_PATH } = loadConfig();
 
 let sassConfig = {
-    mode: (PRODUCTION ? true : false)
+  mode: (PRODUCTION ? true : false)
 };
 
 // Define default webpack object
 let webpackConfig = {
-    mode: (PRODUCTION ? 'production' : 'development'),
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                use: {
-                    loader: 'babel-loader',
-                    options: {
-                        presets: [ "@babel/preset-env" ],
-                        compact: false
-                    }
-                }
-            }
-        ]
-    },
-    externals: {
-        jquery: 'jQuery',
-    },
-    devtool: ! PRODUCTION && 'source-map'
+  mode: (PRODUCTION ? 'production' : 'development'),
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [ "@babel/preset-env" ],
+            compact: false
+          }
+        }
+      }
+    ]
+  },
+  externals: {
+    jquery: 'jQuery'
+  },
+  devtool: ! PRODUCTION && 'source-map'
 };
 
 /**
  * Load in additional config files
  */
 function loadConfig() {
-    let ymlFile = fs.readFileSync('config.yml', 'utf8');
-    return yaml.load(ymlFile);
+  let ymlFile = fs.readFileSync('config.yml', 'utf8');
+  return yaml.load(ymlFile);
 }
 
 /**
@@ -61,75 +61,84 @@ function loadConfig() {
  * @param done
  */
 function setProductionMode(done) {
-    PRODUCTION = false;
-    webpackConfig.mode = 'production';
-    webpackConfig.devtool = false;
-    sassConfig.production = true;
-    done();
+  PRODUCTION = false;
+  webpackConfig.mode = 'production';
+  webpackConfig.devtool = false;
+
+  sassConfig.production = true;
+  done();
 }
 
 // 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:production',
-    gulp.series(setProductionMode, clean, javascript, sass, copy)); // removed copy from (javascript, images, copy)
+  gulp.series(setProductionMode, clean, javascript, sass)); // removed copy from (javascript, images, copy)
 
 // Build the site, run the server, and watch for file changes
 gulp.task('default',
-    gulp.series(clean, javascript, sass, copy, gulp.parallel(watch))); // removed server from middle
+  gulp.series(clean, javascript, sass, gulp.parallel(watch))); // removed server from middle
 
 // This happens every time a build starts
 function clean(done) {
-    rimraf('css', done);
-    rimraf('js', done);
+  rimraf('css', done);
+  rimraf('js', done);
 }
 
 // Copy files out of the assets folder
 // This task skips over the "img", "js", and "scss" folders, which are parsed separately
 function copy() {
-    return gulp.src(PATHS.assets)
-        .pipe( gulp.dest('css/fonts'));
+  return gulp.src(PATHS.assets)
+    .pipe(gulp.dest('other/assets'));
 }
 
 // In production, the CSS is compressed
 function sass() {
-/*
-    const postCssPlugins = [
-        // Autoprefixer
-        autoprefixer({ browsers: COMPATIBILITY }),
-
-        // UnCSS - Uncomment to remove unused styles in production
-        // PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
-    ].filter(Boolean); */
-
-    return gulp.src('assets/scss/*.scss')
-        .pipe($.sourcemaps.init())
-        .pipe($.sass({
-            includePaths: PATHS.sass
-        })
-            .on('error', $.sass.logError))
-      //  .pipe($.postcss(postCssPlugins))
-      //  .pipe($.if(sassConfig.production, $.cleanCss({ compatibility: 'ie10' })))
-      //  .pipe($.if(!sassConfig.production, $.sourcemaps.write()))
-        .pipe(gulp.dest('css'));
+
+  const postCssPlugins = [
+    // Autoprefixer
+    autoprefixer(),
+
+    // UnCSS - Uncomment to remove unused styles in production
+    // PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
+  ].filter(Boolean);
+
+  return gulp.src('assets/scss/*.scss')
+    .pipe($.sourcemaps.init())
+    .pipe($.sass({
+      includePaths: PATHS.sass
+    })
+      .on('error', $.sass.logError))
+    .pipe($.postcss(postCssPlugins))
+    .pipe($.if(sassConfig.production, $.cleanCss({ compatibility: 'ie11' })))
+    .pipe($.if(!sassConfig.production, $.sourcemaps.write()))
+    .pipe(gulp.dest('css'));
 }
 
 // In production, the file is minified
 function javascript() {
-    return gulp.src(PATHS.entries)
-        .pipe(named())
-        .pipe($.sourcemaps.init())
-        .pipe(webpackStream(webpackConfig, webpack2))
-        .pipe($.if(PRODUCTION, $.uglify()
-                .on('error', e => { console.log(e); })
-))
-.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
-        .pipe(gulp.dest('js'));
+  return gulp.src(PATHS.entries)
+    .pipe(named())
+    .pipe($.sourcemaps.init())
+    .pipe(webpackStream(webpackConfig, webpack2))
+    .pipe($.if(PRODUCTION, $.uglify()
+      .on('error', e => { console.log(e); })
+    ))
+    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
+    .pipe(gulp.dest('js'));
 }
 
+// In production, the images are compressed
+function images() {
+  return gulp.src('assets/img/**/*')
+    .pipe($.if(PRODUCTION, $.imagemin([
+      $.imagemin.jpegtran({ progressive: true }),
+    ])))
+    .pipe(gulp.dest('images'));
+}
 
 // Watch for changes to static assets, Sass, and JavaScript
 function watch() {
-    gulp.watch('assets/scss/**/*.scss').on('all', sass );
-    gulp.watch('assets/js/**/*.js').on('all', gulp.series(javascript));
-    gulp.watch( PATHS.assets, copy );
+  // gulp.watch(PATHS.assets, copy);
+  gulp.watch('assets/scss/**/*.scss').on('all', sass);
+  gulp.watch('assets/js/**/*.js').on('all', javascript);
 }