This document discusses automation and continuous integration (CI) tools that can be used with WordPress. It describes how Bash scripts and Node.js tools like Grunt can be used to automate tasks like testing, compiling SCSS to CSS, and adding browser prefixes. These tools can help with continuous integration by running tests and checking code quality automatically on commits. The document provides examples of setting up CI with Travis and integrating Grunt and PHPCS for static analysis. It emphasizes that CI helps save time and reduce errors by automating repetitive tasks.

1. WordPress
automation and ci
RAN BAR-ZIK, HEWLETT PACKARD ENTERPRISE, 2016

2. Ran Bar-Zik (that’s me!) @barzik
 Web developer at Hewlett Packard Enterprise.
 Proud owner of internet-Israel.com website.
 Connect me on LinkedIn, Facebook or Twitter!
 What I do when I am not programming?
4 children, long distance marathoner, Tolkien enthusiastic.

3. What is automation
Scripts that doing the heavy lifting mundane tasks
• Running code evaluation tasks.
• Running clean-ups
• Running processes before after deployment

4. Automation benefit
 Time efficient.
 Less errors.
 Scaling.

5. DEVOPS – The magic word
 CICD process that mitigate the pain in the develop process.
 CI: continuous integration – about integrating the new code to our existing
code base.
 CD: Continuous deployment – about deploying the code to our servers.

6. Continuous Integration Tools in
WordPress
The heavy lifting tools:
 BASH scripts (With WP CLI integration).
 Node.js tools.
The GUI management tools
 Jenkins.
 Travis.

7. The CI cycle
Local code
change
Pre commitpush
local tools
Commit with
GitSVN
CI scripts
By CI tools

8. BASH Scripts
 Make sure that the server has the PHPMySQL versions.
 Download WordPress develop and install it.
 Download the plugin template and install it to WordPress develop
 Running the tests and other tools.
 If OK, report to Jenkins travis.

9. Example of BASH script that integrate
with Travis and WordPress
 https://github.com/Koodimonni/wordpress-test-template

10. Travis CI integration example in wp-
tutorial
https://travis-ci.org/barzik/wp-tutorial-maker/jobs/116392034

11. BASH is not everything
 BASH can be run only on Linux.
 Used for setting up environment.
 Can cause errors.

12. Here come node.js
 Node.js can be run on Linux, Mac and even……. [drum roles] windows!
 Node.js is easy to install and very easy to run.
 Node.js can be run on you personal computer to run tasks.
 There are two major tasks runner: gulp and grunt.

13. Grunt VS gulp
 Gulp pros: more efficient, more dynamic, fast pace growth.
 Grunt pros: easier to understand, have a lot of modules, excellent
documentation and enterprise ready.

14. SCSS
 SASS is the future! Everyone use scss!
Source
SCSS
compiler
Ruby
compiler
output
CSS

15. How to do it with Grunt?
Source
SCSS
Grunt.js
Watching the
file and
running the
compiler every
time scss file
changes
compiler
Ruby compiler
output
CSS

16. And now for some code
 Install node.js on you machine
 Install grunt by npm install grunt –g
 Create Grunt.js and insert the tasks that you need.

17. What about automatic prefix?
 Prefix is the CSS attribute that you have to add to some
advanced CSS3 modules in order to make them work in several
browsers.
 Adding prefixes can be very tiresome job.
 Let the machine do it!
You know I like
it!

18. Grunt auto prefixer to the recue!
Source
SCSS
Grunt.js
Watching the
file and running
the compiler
every time scss
file changes
compiler
Ruby compiler
output
CSS
Grunt
Watching the
file and running
automatic
prefixer
according to
browser matrix

19. Grunt code
autoprefixer:{
dist:{
files:{
'css/*.css':'css/*.css'
}
}
}
sass: {
options: {
sourceMap: true
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/*.css': 'scss/*.scss'
}
}
},
grunt.registerTask('build', ['sass', 'autoprefixer']);

20. Many more tasks!
 Uglify
 Jshint for static analysis tools
 Compression
 Security tests

21. Grunt is not just for JavaScript!
 Meet grunt phpunit!
 Meet grunt wpi18n! For automating the *.po-mo process!
https://github.com/cedaro/grunt-wp-i18n
 Contribute to WordPress repo but maintainging it on GitHub? Meet
https://github.com/gruntjs/grunt-contrib-copy

22. Grunt is excellent for static analysis
jobs
 Static analysis tool is important part of the CI process. It ensures:
 Quality of the code.
 XSSSQLCSRF problems.
 WordPress coding standards.
 Working on both PHP and JS

23. Grunt tools for static code analysis
 Meet grunt phpcs!
Grunt runner for static analysis tool for PHP!
https://github.com/SaschaGalley/grunt-phpcs
 Meet eslint, jslint and friends for JS.
 There are static code analysis tools for SCSS and HTML!

24. All together now! In the local
Create the code
While creating the
code, grunt watch is
running
SCSS is being compiled,
prefixes added, uglifier
working and even page
refreshed on every
chage
Developer finish and
commit and push
Static analysis tools are
being activated,
Automatic tests are
running

25. All together now! In the remote
integration
Travis CI
Jenkins detect
git push
BASH is used to
create the
environment
from scratch
Static test
analysis,
automatic
testing
Everything OK?
Manual QA can
begin
Build failed?
That’s means
death

26. Fast creation of websites with yeoman

27. What yeoman can do for us?
 Deploy the WordPress environment on our machine.
 Deploy the DB and insert mock data.
 Install our plugin themes dependency.
 Configure it all with easy to define JSON.

29. In the end….
 CICD is for EVERY developer.
 It is very easy to implement.
 Even with small part of the CI cycle you are in much better shape than the
others.
 Static analysis tools are extremly important. Start with them.