22
a smarter WordPress Theme Workflow with node.js, ruby, sass, bower & grunt 1 @brajeshwar theme6.com/wp-portkey

WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

Embed Size (px)

DESCRIPTION

Brajeshwar believes that if he needs to get things done, it should be done the right and the better way. It might take extra time in the beginning, but the process should be repeatable and eventually pave way for future enhancements. He wants to apply the same idea to WordPress Theme design and development too. He will talk about how the life of a designer or a developer can be made easier by using tools such as NodeJS, Ruby, Sass and Grunt to automate the workflow. This will help designers or developers to focus on producing beautiful, usable and well marked-up WordPress Themes. More details and downloads of the workflow at http://theme6.com/wp-portkey/

Citation preview

Page 1: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

a smarterWordPress Theme Workflowwith node.js, ruby, sass, bower &

grunt

1

@brajeshwartheme6.com/wp-portkey

Page 2: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

ONCE UPON A TIME

PHP, CSS, Javascript

Page 3: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

REFRESH the BROWSER

Page 4: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

minify CSS, uglify Javascipt

Page 5: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

UPLOAD to the SERVER

Page 6: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

clean, archive, upload

Page 7: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

WORK smarter NOT harder!

Page 8: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

Focus on your Work

Page 9: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

Save TIME, better ROI

Page 10: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

node.js, ruby

Page 11: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

BOWER

Page 12: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

SASS, LESS, STYLUS

Page 13: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

GRUNT

Page 14: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

SCARED?

Page 15: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

What the Heck?

Page 16: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

Why Not?

Page 17: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

Gruntium Buildum

Page 18: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

concatenate, uglify, minify

Page 19: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

burst the cachewith file revision

Page 20: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

release an archive

Page 21: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

DEPLOY

Page 22: WordPress Theme Development Workflow with Node.js, Ruby, Sass, Bower and Grunt

THANK YOU

22

theme6.com/wp-portkey

@brajeshwar