Created by Vecsei Szilveszter for Xarites.
This is our workflow tool for automating a series of tasks. We use Gulp + Webpack for fast development, here you will find a list of its features:
- Convert SASS to CSS
- Create source maps
- Combine css files
- Export SASS files to CSS files
- Export JS modules
- Bundle JS using webpack
- Compress images
- Convert images to WebP format
- Browser Sync
This tool must have the following to work properly:
- node.js - be sure to have installed, do a version check
node --version. - This tool was created long time ago, tested with node
v16andv17
- Copy this directory(
automation) in yourPlugin/Theme/WP root. - You can also install this plugin as it is, configure (
settings.js) and run (it has examples). - Navigate to automation directory and run
npm install All npm tasks will be executed from here!
This tool has a settings file(settins.js), this is the only file you will need to edit.
| Settings | README |
|---|---|
appLocation |
your plugin path |
appThemeLocation |
your theme path |
urlToPreview |
your local url of the project |
adminUrlToPreview |
your local admin url of the project |
env |
your environment (development/production) |
For plugins 🔌
I assume you use a boilderplate, I adapted the file structure similar to this one.
- This tool is capable creating the file structure for you, hit:
npm run gulp-plugin-structure- All you need to do is to
import and initialize all your modulesfrom your modules directory inmodule-scripts.js, the tool will create abuilddirectory using webpack, andautomatically bundle all changesyou make. - From this point you
load onlythe bundle(scripts-bundled.js) from the build directory to the front-end. - You can also manually create only the
js bundlewithnpm run gulp-scriptsfor client side, andnpm run gulp-scripts-adminfor the admin side.
npm run gulp-scripts
npm run gulp-scripts-adminFor css it works the same way, you create all your sass components in the modules directory, and include them in the module-scripts.scss file.
- All the SASS files from modules will be converted to CSS and bundeled in the build directory, this can also be done manually with
npm run gulp-sassfor client side, andnpm run gulp-sass-adminfor the admin side.
npm run gulp-sass
npm run gulp-sass-admin- You will
load onlythe css bunle(styles-bundle.css) for the front-end. - If for any particular reason, you need the conversion only of the css modules, you can use
npm run gulp-stylesfor the public conversion, andnpm run gulp-styles-adminfor the admin conversion, you will find the converted files in the build directory.
npm run gulp-styles
npm run gulp-styles-admin- This tool can compress/optimize images automatically.
- You can also run it manually for images in
public directoryandadmin-directory
npm run gulp-compress-img
npm run gulp-compress-img-admin- You can do the same thing for WebP conversions:
npm run gulp-convert-webp
npm run gulp-convert-webp-adminDepending on where you work:
- Hit
gulp-watchto start the tool on the client side (will listen to thepublic directory) - Hit
gulp-watch-adminto start the tool on the admin side (will listen to theadmin directory) - You can create subdirectories in the modules folders
npm run gulp-watch
npm run gulp-watch-adminWatch without proxy:
- Hit
gulp-watch-compileto watch changes you make on thepublic directory - Hit
gulp-watch-compile-adminto watch changes you make on theadmin directory
npm run gulp-watch-compile
npm run gulp-watch-compile-adminGlobal watcher:
- Hit
gulp-watch-allto watch changes you make on thepublic and admin directorywithout proxy - Hit
gulp-watch-all-syncto watch changes you make on thepublic and admin directorywith proxy
npm run gulp-watch-all
npm run gulp-watch-all-sync
For themes 💻
Themes will use a simmilar structure like we have for plugins. To create the file structure use:
npm run gulp-theme-structureThis will create the assets directory with 2 subdirectories (admin and public).
Everything is the same as I mentioned for plugins.
- You will
load onlythe css bunle(styles-bundle.css) and the js bundle(scripts-bundled.js) from the theme build directories.
Depending on where you work:
- Hit
gulp-watch-themeto start the tool on the client side (will listen to thepublic directory) - Hit
gulp-watch-theme-adminto start the tool on the admin side (will listen to theadmin directory)
npm run gulp-watch-theme
npm run gulp-watch-theme-adminWatch without proxy:
- Hit
gulp-watch-compile-themeto watch changes you make on thepublic directory - Hit
gulp-watch-compile-theme-adminto watch changes you make on theadmin directory
npm run gulp-watch-compile-theme
npm run gulp-watch-compile-theme-adminGlobal watcher:
- Hit
gulp-watch-theme-allto watch changes you make on thepublic and admin directorywithout proxy - Hit
gulp-watch-theme-all-syncto watch changes you make on thepublic and admin directorywith proxy
npm run gulp-watch-theme-all
npm run gulp-watch-theme-all-sync- If for any particular reason, you need the conversion only of the css modules, you can use
npm run gulp-styles-themefor the public conversion, andnpm run gulp-styles-theme-adminfor the admin conversion, you will find the converted files in the build directory.
npm run gulp-styles-theme
npm run gulp-styles-theme-admin- For manual creation of the
css bundleyou can usenpm run gulp-sass-themefor client side andnpm run gulp-sass-theme-adminfor admin side.
npm run gulp-sass-theme
npm run gulp-sass-theme-admin- For manual creation of the
js bundleyou can usenpm run gulp-scripts-themefor client side andgulp-scripts-theme-adminfor admin side.
npm run gulp-scripts-theme
npm run gulp-scripts-theme-admin- This tool can compress/optimize images automatically.
- You can also run it manually for images in
public directoryandadmin-directory
npm run gulp-compress-img-theme
npm run gulp-compress-img-theme-admin- You can do the same thing for WebP conversions:
npm run gulp-convert-webp-theme
npm run gulp-convert-webp-theme-adminThis tool is currently extended with the following plugins. Instructions on how to use them in your own application are linked below.
| Plugin | README |
|---|---|
| babel/core | Babel compiler core. |
| preset-env | A Babel preset for each environment. |
| wordpress/scripts | Created by the official WP team. |
| babel-loader | Babel module loader for webpack. |
| browser-sync | Live CSS Reload & Browser Syncing. |
| gulp | The streaming build system. |
| gulp-clean-css | Minify css with clean-css. |
| gulp-cli | Command line interface for gulp. |
| gulp-concat | Concatenates files. |
| gulp-install | Automatically install npm. |
| gulp-sass | Gulp plugin for sass. |
| gulp-shell | A handy command line interface for gulp. |
| gulp-sourcemaps | Sourcemap support for gulpjs. |
| node-sass | Wrapper around libsass |
| webpack | Packs CommonJs/AMD modules for the browser. |
| webpack-cli | CLI for webpack & friends |
| autoprefixer | Parse CSS and add vendor prefixes to CSS |
| imagemin | Minify images seamlessly |
| webp | WebP binaries |
These are optional:
| Plugin | README |
|---|---|
| axios | Promise based HTTP client for the browser and node.js |
| jquery | JavaScript library for DOM operations |
Want to contribute? Great!
Make a change in your file and instantaneously see your updates! And of course, is open source, with a public repository on GitHub. To extend its features you can do the following:
Open your favorite Terminal and run these commands.npm
Dev Dependencies:
npm i -D <whatever you want>
or
npm i --save-dev <whatever you want>Dependencies:
npm i -P <whatever you want>
or
npm i --save-prod <whatever you want>MIT
Free Software ❤️, Hell Yeah!