xarites-workflow

My personal tool that I adapted for the company and my colleagues.

XARITES THE CREATIVE AGENCY SRL

Automation workflow

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
• Browser Sync

Tech

This tool must have the following to work properly:

• node.js - be sure to have installed, do a version check node --version.

Installation

• Copy this directory in your Plugin/Theme/WP root.
• Navigate to it and run npm install
• All npm tasks will be executed from here!

Configuration

This tool has a settings file(settins.js), this is the only file you will need to edit.

Usage

For plugins

I assume you use a boilderplate, I adapted 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 modules from your modules directory in module-scripts.js, the tool will create a build directory using webpack, and automatically bundle all changes you make.
• From this point you load only the bundle(scripts-bundled.js) from the build directory to the front-end.
• You can also manually create only the js bundle with npm run gulp-scripts for client side, and npm run gulp-scripts-admin for the admin side.

npm run gulp-scripts

npm run gulp-scripts-admin

For css it works the same way, with the exception that there is only a module directory where you can create your SASS files.

• 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-sass for client side, and npm run gulp-sass-admin for the admin side.

npm run gulp-sass

npm run gulp-sass-admin

• You will load only the 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-styles for the public conversion, and npm run gulp-styles-admin for the admin conversion, you will find the converted files in the build directory.

npm run gulp-styles

npm run gulp-styles-admin

Depending on where you work:

• Hit gulp-watch to start the tool on the client side (will listen to the public directory)
• Hit gulp-watch-admin to start the tool on the admin side (will listen to the admin directory)
• You can create subdirectories in the modules folders

npm run gulp-watch

npm run gulp-watch-admin

For themes

Themes will use a simmilar structure like we have for plugins. To create the file structure use:

npm run gulp-theme-structure

This will create the assets directory with 2 subdirectories (admin and public). Everything is the same as I mentioned for plugins.

• You will load only the 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-theme to start the tool on the client side (will listen to the public directory)
• Hit gulp-watch-theme-admin to start the tool on the admin side (will listen to the admin directory)

npm run gulp-watch-theme

npm run gulp-watch-theme-admin

• If for any particular reason, you need the conversion only of the css modules, you can use npm run gulp-styles-theme for the public conversion, and npm run gulp-styles-theme-admin for 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 bundle you can use npm run gulp-sass-theme for client side and npm run gulp-sass-theme-admin for admin side.

npm run gulp-sass-theme

npm run gulp-sass-theme-admin

• For manual creation of the js bundle you can use npm run gulp-scripts-theme for client side and gulp-scripts-theme-admin for admin side.

npm run gulp-scripts-theme

npm run gulp-scripts-theme-admin

Plugins

This tool is currently extended with the following plugins. Instructions on how to use them in your own application are linked below.

These are optional:

Development

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>

License

MIT

Free Software, Hell Yeah!