Hardeep will talk about how you can automate tasks in your theme/plugin development process for testing and releasing to remove the hassle of manual testing and focus more on writing good code. He will talk about how NPM, Grunt, Gulp, Sass and Travis CI with Github can help us automate some of our tasks and improve our development process. Attendees will leave understanding when and why they’d want to use these tools in a WordPress theme-specific context, and how they play together in a real-life workflow.

1. Automating Theme Development Process
@HardeepAsrani

2. I’m Hardeep Asrani
➤ Pirate at ThemeIsle.com
➤ WordPress Plugin/Theme Developer
➤ Part of WordPress Theme Review & Support Team
➤ Part of Kanpur FOSS Community
And I’m Wapuu Saa!

3. Are you a developer?

4. Do you Automate your tasks?

5. Why Automate?
What can it do for me?

6. ➤ Faster and error-free development
➤ More time to focus on development and logic
➤ More time == More money
➤ Cool lagta hai

7. What can you Automate?

8. All the Repetitive Tasks:
➤ Compile SASS, LESS, Stylus, etc.
➤ JSHint/ESLint
➤ Concatenate and Minify Assets
(CSS & JS)
➤ Compress Images
➤ Code Sniffing
➤ Visual Regression
➤ Generate Pro/Lite versions from
the same theme
➤ And more…

9. What do you need?

10. Environment + Package Manager

11. # Update Advanced Package Tool
$ apt-get update
# Install cURL, if not installed
$ apt-get install curl
# Download nodejs Package
$ curl -sL https://deb.nodesource.com/setup_6.x | bash -
# Install nodejs
$ apt-get install -y nodejs
# Initialize Project
$ npm init

12. Let’s start with…

13. That SASS!

14. Why SASS?

15. Nesting
.footer {
text-align: center;
background: #343434;
}
.footer .icons {
color: #000000;
float: left;
}
.footer {
text-align: center;
background: #343434;
&.icons {
color: #000000;
float: left;
}
}

16. Mixins
.btn-blue {
color: #3FA2F7;
width: 100px;
height: 50px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
}
.btn-black {
color: #000;
width: 100px;
height: 50px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
}
@mixin button {
width: 100px;
height: 50px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
}
.btn-blue {
color: #3FA2F7;
@include button;
}
.btn-black {
color: #000;
@include button;
}

17. And more, like functions and extend.

18. Installing SASS
# Install Ruby
$ apt-get install ruby-full
# Install SASS
$ gem install sass
# Check SASS Version
$ sass -v
# Compile SASS
$ sass --watch input.scss output.css

19. Tired of compiling SASS?

20. Introducing…

21. Task Runners

22. # Install Grunt
$ npm install grunt
# Install Grunt CLI
$ npm install -g grunt-cli
# Install SASS Grunt Task
$ npm install grunt-contrib-sass --save-dev

23. module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'main.css': 'main.scss',
}
},
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', [’sass’]);
};
Gruntfile.js

25. JSHint/ESLint
# Install JSHint
$ npm install grunt-contrib-jshint --save-dev
Write error free JavaScript.

26. module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'assets/js/*.js'],
options: {
globals: {
jQuery: true
},
ignores: ['assets/library/*.min.js']
},
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', [‘jshint’]);
};
Gruntfile.js

28. # Install Babel & Babel Grunt Task
$ npm install --save-dev grunt-babel babel-core babel-preset-env
Use next generation JavaScript, today.

29. module.exports = function(grunt) {
grunt.initConfig({
babel: {
options: {
sourceMap: true,
presets: ['env']
},
dist: {
files: {
'dist/script.js': 'src/script.js'
}
}
}
});
grunt.loadNpmTasks('grunt-babel');
grunt.registerTask('default', 'babel');
};
Gruntfile.js

30. Write Better PHP

31. ➤ PHP Code Sniffer: https://github.com/squizlabs/PHP_CodeSniffer
➤ PHP Code Sniffer Grunt Task: https://github.com/SaschaGalley/grunt-phpcs
➤ WordPress PHPCS Standards: https://github.com/WordPress-Coding-Standards/
WordPress-Coding-Standards
➤ PHPUnit: https://github.com/SaschaGalley/grunt-phpunit
➤ PHP Code Beautifier and Fixer: https://github.com/mducharme/grunt-phpcbf
➤ PHP Lint: https://github.com/jgable/grunt-phplint

33. Make Your CSS Work on all Browsers
# Install PostCSS
$ npm install grunt-postcss --save-dev
# Install WP-CSS
$ npm install grunt-wp-css —save-dev
➤ Add vendor prefixes to CSS rules using values from Can I Use.
➤ Enforce consistent conventions and avoid errors in your stylesheets with stylelint.
➤ Write stylesheet according to WordPress CSS coding standards.

34. Compress Images + Minify CSS/JS
Speed-up your WordPress Theme
# Minify images using imagemin
$ npm install --save-dev grunt-contrib-imagemin
# Minify JS with Uglify
$ npm install grunt-contrib-uglify —save-dev
# Minify CSS
$ npm install grunt-contrib-cssmin —save-dev

35. And the most boring important task…

36. Generate Translation (POT) File
Make your theme translatable.
# Check your code for missing or incorrect text-domain in gettext functions
$ npm install grunt-checktextdomain --save-dev
# Geenrate POT File
$ npm install grunt-wp-i18n --save-dev

37. All these tasks with one command.

38. The Workflow is Reusable

39. Our Grunt Workflow
https://github.com/Codeinwp/grunt-theme-fleet/

40. Tired of making different Lite/Pro versions?

43. PHP 5.6 HHVM
PHP 7.1 PHP 5.3
PHP 7.0 PHP 5.2

45. Visual Regression

47. Overview
➤ Find tasks that can be automated.
➤ Setup a grunt/gulp task to automate it.
➤ Build your workflow.
➤ Reuse it.

48. Resources
➤ nodejs: https://nodejs.org/en/
➤ npm: https://www.npmjs.com/
➤ Grunt: https://gruntjs.com/
➤ Sass: http://sass-lang.com/
➤ Babel: http://babeljs.io/
➤ Grunt Tasks: https://gruntjs.com/plugins
➤ Travis CI: http://travis-ci.com/

49. Thank you
➤ Twitter: @HardeepAsrani
➤ Github: https://github.com/HardeepAsrani/
➤ Website: http://www.hardeepasrani.com/
You’re welcome.