Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Enterprise Task Management Solution - Q Track
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

Time's Important - Let Task Management Save Yours

Download to read offline

Presented at WordCamp Sunshine Coast 2016. The presentation covers how task runners such as Grunt & Gulp can be utilised to automate and save on development time.

The presentation covers how to get started using Gulp, useful plugins and how Gulp can be incorporated into WordPress theme development for create lean and fast websites.

Related Books

Free with a 30 day trial from Scribd

See all

Time's Important - Let Task Management Save Yours

  1. 1. Time’s Important Let Task Management Save Yours WordCamp Sunshine Coast James Bundey
  2. 2. @jamesbundey A bit about me Studied marketing and have 19+ years in marketing roles from development to management and consultancy Started Creative Approach a small digital marketing agency in Melbourne in 2009 We offer a wide range of services including developing custom WordPress websites I’ve worked with WordPress for around 6 years
  3. 3. @jamesbundey So what is task management? or more accurately what is a task runner
  4. 4. At it’s core it’s simply utilising a JavaScript based task runner to automate the process of repetitive and mundane tasks. Importantly it provides speed not just in development workflow, but also in performance.
  5. 5. @jamesbundey Who’s it for? Anyone….well almost anyone It’s easy to get started you don’t need to be a JS genius You can use a task runner for any number of things You could use one to automate the generation of a complete WordPress installation We typically use them to as part of our workflow developing custom WordPress themes
  6. 6. However…. You’re going to have to open the command line
  7. 7. @jamesbundey Why? Speed and simplicity was a big draw but, We found it forced us to honour our workflow and standardise Improved our file management & version control Software/platform agnostic
  8. 8. @jamesbundey Most Importantly Prevented cowboy coding
  9. 9. @jamesbundey Lets Choose The two most common http://gulpjs.comhttp://gruntjs.com
  10. 10. @jamesbundey Grunt vs Gulp Both are powered by Node, and their ‘npm’ package system and utilise a package.json file. Grunt focuses on sequential configuration whereas Gulp focusses on pipelines Grunt is the more mature with more plugins Gulp is faster due to the way it manages tasks Really it comes down to whatever works for you “I found Grunt much easier at the introductory level, but use Gulp for development now”
  11. 11. @jamesbundey
  12. 12. @jamesbundey
  13. 13. @jamesbundey Let’s get started Step 1 Download and install Node - https://nodejs.org Step 2 Install a task runner (we’re going to use Gulp as our example) npm install --global gulp-cli or, if that fails sudo npm install --global gulp-cli
  14. 14. @jamesbundey Now the WordPress bit To use the task runner within your theme you need to create two files package.json This file will define the details of your project and also the grunt/gulp modules that you will install later as dependencies of it. Gulpfile.js This file will load our Gulp plugins and define and configure the tasks we need.
  15. 15. @jamesbundey package.json
  16. 16. @jamesbundey Firstly, install the latest version of either Gulp npm install --save-dev gulp
  17. 17. @jamesbundey Lets add some plugins You can find a whole suite of plugins from either http://gulpjs.com or www.npmjs.com/ For theme development we typically need; SASS compiling and CSS minification JS linting, concat, ugilfy Image minification and preparation SFTP/FTP deployment a watch task that’s going to fire the task runner every time we change save our theme (watch is a default task in Gulp, but not in Grunt)
  18. 18. @jamesbundey Again, install in the command line npm install gulp-sass --save-dev
  19. 19. @jamesbundey Some plugins I’m using gulp-sass
 gulp-concat
 gulp-jshint
 gulp-uglify
 gulp-plumber
 gulp-sourcemaps
 gulp-util
 vinyl-ftp
 gulp-imagemin
 Browsersync https://www.npmjs.com/package/gulp-sass/
 https://www.npmjs.com/package/gulp-concat/
 https://www.npmjs.com/package/gulp-jshint/
 https://www.npmjs.com/package/gulp-uglify/
 https://www.npmjs.com/package/gulp-plumber/
 https://www.npmjs.com/package/gulp-sourcemaps
 https://www.npmjs.com/package/gulp-util/
 https://www.npmjs.com/package/vinyl-ftp/
 https://www.npmjs.com/package/imagemin/
 https://www.browsersync.io/docs/gulp/ Plugin pages come with usage code examples
  20. 20. Expect to see something like this in your package.json file The plugins are saved as devDependencies because they are only needed for development purposes, not to actually run anything.
  21. 21. and this in your theme folder Importantly, remember to ignore it in git. The plugins shown here amount to 126.7mb of space and 23,526 files. It will kill your repo if you commit it by mistake.
  22. 22. @jamesbundey Get configuring Modules are great, but without a Gulpfile.js to run the tasks they’re doing nothing. Step 1 - Add the modules
  23. 23. @jamesbundey Add some tasks
  24. 24. @jamesbundey Run it Add the task sequence to the bottom of the Gulpfile.js Run Gulp in the command line cd path-to-your-theme gulp
  25. 25. @jamesbundey What success (hopefully) looks like
  26. 26. @jamesbundey Some other reasons No need to include js libraries within your theme and a great way to integrate package management.
  27. 27. @jamesbundey Automatic browser reloading
  28. 28. @jamesbundey Great for ongoing updates via deployment
  29. 29. @jamesbundey Running individual tasks is easy cd path-to-your-theme gulp task_name Simple to share & install once completed cd path-to-your-theme npm install
  30. 30. @jamesbundey Useful Links https://markgoodyear.com/2014/01/getting-started-with-gulp/ http://torquemag.io/2015/01/using-grunt-automate-redundant- tasks-wordpress-development/ https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js http://archetyped.com/know/grunt-for-wordpress-plugins/
  31. 31. Thank You Any Questions? @jamesbundey
  • KateAusten1

    Jul. 27, 2016

Presented at WordCamp Sunshine Coast 2016. The presentation covers how task runners such as Grunt & Gulp can be utilised to automate and save on development time. The presentation covers how to get started using Gulp, useful plugins and how Gulp can be incorporated into WordPress theme development for create lean and fast websites.

Views

Total views

635

On Slideshare

0

From embeds

0

Number of embeds

180

Actions

Downloads

5

Shares

0

Comments

0

Likes

1

×