Creating Automation Tools for Custom Themes (Gulp.js)
Using automation tools simplifies the task of theme development. Here we’ll use Gulp.js to build an automation tool for a custom theme.
Works with Gulp 3.x and Node 10.x or lower
Steps:
1. Install Node.js
Download and install the latest version of NodeJS from nodejs.org. The installation process may vary depending on your operating system.
2. Install Gulp
npm install gulp-cli -g3. Set up gulpfile.js
Navigate to the custom theme directory.
Create gulpfile.js manually using cmd/terminal or by right-clicking to create a new file.
touch gulpfile.jsCopy and paste all the code
Note: I put my raw files in a 'src' folder, and the production-ready files in the root of the custom theme folder. So when the Sass files compile from ‘my_custom_theme_folder/src/scss’, they are compiled and placed into ‘my_custom_theme_folder/css’.
4. Configure package manager
Run npm init in your terminal from the custom theme folder and fill out the required information to generate package.json.
5. Install dependencies
Run npm install --save-dev <packagename> from your terminal in the custom theme folder. This will download the Gulp and related dependencies and create a 'node_modules' folder.
6. Run the automation tool from cmd/terminal.
Now you’re ready to launch the automation tool with Gulp.
Type gulp watch.