feat: Added Prettier & imageminimizerPlugin

Author: brandonkramer

README.md

@@ -44,7 +44,8 @@ ____
 
  **Images**
 
->- [**ImageMinimizerWebpackPlugin**](https://webpack.js.org/plugins/image-minimizer-webpack-plugin/) for Minification/optimization of images
+>- [**ImageMinimizerWebpackPlugin**](https://webpack.js.org/plugins/image-minimizer-webpack-plugin/) + [**CopyWebpackPlugin**](https://webpack.js.org/plugins/copy-webpack-plugin/)
+   to optimize (compress) all images using
 >- _File types: `.png`, `.jpg`, `.jpeg`, `.gif`, `.svg`_
 
  **Translation**
@@ -58,6 +59,10 @@ ____
 >- [**BrowserSync**](https://browsersync.io/), synchronising URLs, interactions and code changes across devices and automatically refreshes all the browsers on al devices
 >- [**webPackBar**](https://github.com/nuxt/webpackbar) so you can get a real progress bar while development which also includes a **profiler**
 
+**Configuration**
+>- All configuration files (`.eslintrc.js`, `.stylelintrc.js`, `babel.config.js`, `postcss.config.js`) are organised in a single folder
+>- The Webpack configuration is divided into 2 sub configuration files for the development and production build/environment
+
 ## Requirements
 
 - Node.js
@@ -78,14 +83,16 @@ ____
 │   ├── wordpress-webpack.pot    # Boilerplate POT File that gets overwritten by WP-Pot 
 └──assets
     ├── src                      # Holds all the source files
+    │   ├── images               # Uncompressed images
     │   ├── scss                 # Holds the SCSS files
-    │   │ ├─ frontend.scss      
-    │   │ └─ backend.scss       
+    │   │ ├─ frontend.scss       # For front-end styling
+    │   │ └─ backend.scss        # For back-end / wp-admin styling
     │   └── js                   # Holds the JS files
-    │     ├─ frontend.js         
-    │     └─ backend.js          
+    │     ├─ frontend.js         # For front-end scripting
+    │     └─ backend.js          # For back-end / wp-admin scripting
     │
     └── public
+        ├── images               # Iptimized (compressed) images
         ├── css                  # Compiled CSS files with be generated here
         └── js                   # Compiled JS files with be generated here
 ```
@@ -125,8 +132,6 @@ Or run with watcher & browserSync
 ```bash
 npm run prod:watch
 ```
-This will open a browser, watch all files (php, scss, js, etc) and reload the
-browser when you press save.
 
 ##  More Scripts/Tasks
 
@@ -147,4 +152,10 @@ npm run stylelint
 
 # To find fix problems in your sass/css code
 npm run stylelint:fix
+
+# To make sure files in assets/src/js are formatted
+npm run prettier
+
+# To fix and format the js files in assets/src/js
+npm run prettier:fix
 ```

assets/src/images/gif-placeholder.gif

@@ -1,7 +1,7 @@
 /**
  * SASS
  */
-import '../sass/backend.scss';
+import "../sass/backend.scss";
 
 /**
  * JavaScript

assets/src/images/jpg-placeholder.jpg

@@ -1,7 +1,7 @@
 /**
  * SASS
  */
-import '../sass/frontend.scss';
+import "../sass/frontend.scss";
 
 /**
  * JavaScript

assets/src/images/png-placeholder.png

@@ -1,17 +1,10 @@
 {
   "name": "wordpress-webpack-workflow",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "author": "WP-Strap",
   "license": "MIT",
   "homepage": "https://github.com/wp-strap/wordpress-webpack-workflow",
-  "description": "WordPress webpack/postcss/tailwindcss workflow to use in WordPress projects (plugins or themes)",
-  "keywords": [
-    "wordpress",
-    "workflow",
-    "webpack",
-    "theme",
-    "plugin"
-  ],
+  "description": "Modern WebPack workflow for WordPress front-end development and testing (plugins & themes) with handy tools included.\n",
   "main": "index.js",
   "repository": {
     "type": "git",
@@ -30,7 +23,9 @@
     "eslint:fix": "eslint assets/src/js/**/*.js --fix",
     "stylelint": "stylelint assets/src/sass/**/*.{css,scss}",
     "stylelint:fix": "stylelint assets/src/sass/**/*.{css,scss} --fix",
-    "pot": "wp-pot --src '**/**/**/**/*.php' --dest-file 'languages/wordpress-webpack.pot' --package 'wordpress-webpack' --domain 'wordpress-webpack-text-domain' --last-translator '{{author_name}} <{{author_email}}>' --team '{{author_name}} <{{author_email}}>' --bug-report '{{author_url}}'"
+    "prettier": "prettier --check assets/src/js/**/*.js",
+    "prettier:fix": "prettier --write assets/src/js/**/*.js",
+    "translate": "wp-pot --src '**/**/**/*.php' --dest-file 'languages/wordpress-webpack.pot' --package 'wordpress-webpack' --domain 'wordpress-webpack-text-domain' --last-translator '{{author_name}} <{{author_email}}>' --team '{{author_name}} <{{author_email}}>' --bug-report '{{author_url}}'"
   },
   "babel": {
     "extends": "./webpack/babel.config.js"
@@ -47,6 +42,9 @@
     "extends": [
       "./webpack/.stylelintrc.js"
     ]
+  },
+  "prettier": {
+
   },
   "dependencies": {},
   "devDependencies": {
@@ -59,10 +57,16 @@
     "babel-loader": "^8.2.2",
     "browser-sync": "^2.26.13",
     "browser-sync-webpack-plugin": "^2.3.0",
+    "copy-webpack-plugin": "^7.0.0",
     "css-loader": "^5.0.1",
     "eslint": "^7.17.0",
     "eslint-webpack-plugin": "^2.4.1",
     "glob-all": "^3.2.1",
+    "image-minimizer-webpack-plugin": "^2.2.0",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-jpegtran": "^7.0.0",
+    "imagemin-optipng": "^8.0.0",
+    "imagemin-svgo": "^8.0.0",
     "mini-css-extract-plugin": "^1.3.3",
     "node-sass-magic-importer": "^5.3.2",
     "postcss": "^8.2.4",
@@ -78,5 +82,22 @@
     "webpack-cli": "^4.3.1",
     "webpackbar": "^5.0.0-3",
     "wp-pot-cli": "^1.5.0"
-  }
+  },
+  "keywords": [
+    "wordpress",
+    "workflow",
+    "webpack",
+    "theme",
+    "plugin",
+    "WebPack",
+    "BrowserSync",
+    "PostCSS",
+    "Autoprefixer",
+    "PurgeCSS",
+    "BabelJS",
+    "Eslint",
+    "Stylelint",
+    "SCSS",
+    "WP-Pot"
+  ]
 }

assets/src/images/svg-placeholder.svg

@@ -7,31 +7,32 @@ const path = require( 'path' );
 
 // Paths to find our files and provide BrowserSync functionality.
 const projectPaths = {
-    projectDir:      __dirname, // Current project directory absolute path.
-    projectJsPath:   path.resolve( __dirname, 'assets/src/js' ),
-    projectScssPath: path.resolve( __dirname, 'assets/src/scss' ),
-    projectOutput:   path.resolve( __dirname, 'assets/public' ),
-    projectWebpack:  path.resolve( __dirname, 'webpack' ),
+    projectDir:        __dirname, // Current project directory absolute path.
+    projectJsPath:     path.resolve( __dirname, 'assets/src/js' ),
+    projectScssPath:   path.resolve( __dirname, 'assets/src/scss' ),
+    projectImagesPath: path.resolve( __dirname, 'assets/src/images' ),
+    projectOutput:     path.resolve( __dirname, 'assets/public' ),
+    projectWebpack:    path.resolve( __dirname, 'webpack' ),
     // BrowserSync settings
     browserSync: {
         enable: true, // enable or disable browserSync
         host:   'localhost',
-        port: 3000,
+        port:   3000,
         mode:   'proxy', // proxy | server
         server: { baseDir: [ 'public' ] }, // can be ignored if using proxy
         proxy:  'https://wp-strap.lndo.site',
         // BrowserSync will automatically watch for changes to any files connected to our entry,
         // including both JS and Sass files. We can use this property to tell BrowserSync to watch
         // for other types of files, in this case PHP files, in our project.
-        files: '**/**/**.php',
+        files:  '**/**/**.php',
         reload: true, // Set false to prevent BrowserSync from reloading and let Webpack Dev Server take care of this
         // browse to http://localhost:3000/ during development,
     }
 };
 
 // Javascript files to bundle
 const projectFiles = {
-    projectJs:  {
+    projectJs:     {
         babelJs:  __dirname + '/webpack/.eslintrc.js',
         eslint:   true, // enable or disable eslint  | this is only enabled in development env.
         filename: 'js/[name].js',
@@ -45,7 +46,7 @@ const projectFiles = {
             }
         }
     },
-    projectCss: {
+    projectCss:    {
         postCss:   projectPaths.projectWebpack + '/postcss.config.js',
         stylelint: true, // enable or disable stylelint | this is only enabled in development env.
         filename:  'css/[name].css',
@@ -63,6 +64,27 @@ const projectFiles = {
                 __dirname + '/*',
             ]
         }
+    },
+    projectImages: {
+        rules:            {
+            image: {
+                test: /\.(jpe?g|png|gif|svg)$/i,
+            }
+        },
+        minimizerOptions: {
+            // Lossless optimization with custom option
+            // Feel free to experiment with options for better result for you
+            plugins: [
+                [ 'gifsicle', { interlaced: true } ],
+                [ 'jpegtran', { progressive: true } ],
+                [ 'optipng', { optimizationLevel: 5 } ],
+                [ 'svgo', {
+                    plugins: [
+                        { removeViewBox: false, },
+                    ],
+                }, ],
+            ],
+        }
     }
 }
 

assets/src/js/backend.js

@@ -0,0 +1,13 @@
+/**
+ * Prettier config file
+ * as configured in package.json under eslintConfig.extends
+ *
+ * @docs Prettier: https://prettier.io/
+ * @since 1.0.0
+ */
+module.exports = {
+    trailingComma: "es5",
+    tabWidth: 4,
+    semi: false,
+    singleQuote: true,
+};

assets/src/js/frontend.js

@@ -8,6 +8,8 @@
  * @type MiniCssExtractPlugin : Extracts the CSS files into public/css https://webpack.js.org/plugins/mini-css-extract-plugin/
  * @type BrowserSyncPlugin : Synchronising URLs, interactions and code changes across devices https://github.com/Va1/browser-sync-webpack-plugin
  * @type WebpackBar : Display elegant progress bar while building or watch https://github.com/nuxt-contrib/webpackbar
+ * @type ImageMinimizerPlugin : To optimize (compress) all images using https://webpack.js.org/plugins/image-minimizer-webpack-plugin/
+ * @type CopyPlugin : For WordPress we need to copy images from src to public to be able to optimize them https://webpack.js.org/plugins/copy-webpack-plugin/
  *
  * Only in development environment:
  * @type ESLintPlugin : Find and fix problems in your JavaScript code https://eslint.org/
@@ -19,6 +21,8 @@ const ESLintPlugin         = require( 'eslint-webpack-plugin' );
 const StylelintPlugin      = require( 'stylelint-webpack-plugin' )
 const BrowserSyncPlugin    = require( 'browser-sync-webpack-plugin' )
 const WebpackBar           = require( 'webpackbar' );
+const ImageMinimizerPlugin = require( 'image-minimizer-webpack-plugin' );
+const CopyPlugin           = require( "copy-webpack-plugin" );
 
 module.exports = ( projectOptions ) => {
     // Set environment level to 'development'
@@ -54,25 +58,43 @@ module.exports = ( projectOptions ) => {
         use:     'babel-loader' // Configurations in "webpack/babel.config.js"
     };
 
+    // Images rules
+    const imageRules = {
+        test: projectOptions.projectImages.rules.image.test,
+        use:  [
+            {
+                loader: 'file-loader',// Or `url-loader` or your other loader
+            },
+        ],
+    }
+
     // Optimization rules
     const optimizations = {};
 
     // Plugins
     const plugins = [
-        new WebpackBar(
+        new WebpackBar( // Adds loading bar during builds
             // Uncomment this to enable profiler https://github.com/nuxt-contrib/webpackbar#options
             // { reporters: [ 'profile' ], profile: true }
         ),
-        new MiniCssExtractPlugin( {
+        new MiniCssExtractPlugin( { // Extracts CSS files
             filename: projectOptions.projectCss.filename
         } ),
+        new CopyPlugin( { // Copies images from src to public
+            patterns: [
+                { from: projectOptions.projectImagesPath, to: projectOptions.projectOutput + '/images' },
+            ],
+        } ),
+        new ImageMinimizerPlugin( { // Optimizes images
+            minimizerOptions: projectOptions.projectImages.minimizerOptions,
+        } ),
     ];
     // Add browserSync to plugins if enabled
     if ( projectOptions.browserSync.enable === true ) {
         const browserSyncOptions = {
             files: projectOptions.browserSync.files,
-            host: projectOptions.browserSync.host,
-            port: projectOptions.browserSync.port,
+            host:  projectOptions.browserSync.host,
+            port:  projectOptions.browserSync.port,
         }
         if ( projectOptions.browserSync.mode === 'server' ) {
             Object.assign( browserSyncOptions, {
@@ -108,7 +130,7 @@ module.exports = ( projectOptions ) => {
         // set this to false if you don't need it as it may slow down the build process
         devtool:      'source-map',
         optimization: optimizations,
-        module:       { rules: [ cssRules, jsRules, ], },
+        module:       { rules: [ cssRules, jsRules, imageRules ], },
         plugins:      plugins,
     }
 }