Automation
Setup
- Remember to work on
css
,js
andimages
inside/assets_dev/
folder. - Navigate to
node_scripts
, openconfig.json
to add list ofcss
andjs
files for concatenation and minification. Files will be concatenated in the order you provide."concat_css": [ "assets_dev/css/general.css", "assets_dev/css/blog.css", "assets_dev/css/pages.css", "assets_dev/css/widgets.css", "assets_dev/css/comments.css", "assets_dev/css/woocommerce.css", "assets_dev/css/forms.css" ], "min_css": [ "assets/css/main.css" ], "concat_js": [ "assets_dev/js/main.js" ], "min_js": [ "assets/js/main.js" ],
Start Automation
Run the following command to watch your theme files for changes and start making an awesome WordPress theme
gulp
To stop automation use CTRL+C
in Windows and CMD+C
on Mac.
Concatenate CSS
- Gulp will watch
CSS
files you have added in"concat_css"
and will concatenate them on changes in the order you provided inconfig.json
.
Concatenate JS
- Gulp will watch
JS
files you have added in"concat_js"
and will concatenate them on changes in the order you provided inconfig.json
.
Minify CSS
- Gulp will watch
main.css
files you have added in"min_css"
and will minify it on changes.
Minify JS
- Gulp will watch
main.js
files you have added in"min_js"
and will minify it on changes.
Image Optimization
- Gulp will watch
Images
inside/assets_dev/img/
and will optimize them.
Browser Reload
- Gulp will also watch all your files for changes and will reload the browser automatically.