Download to read offline
Uploaded byJames Bundey
Time's Important - Let Task Management Save Yours
The document introduces task management through JavaScript-based task runners like Gulp and Grunt, highlighting their role in automating repetitive development tasks, especially for WordPress. It explains the setup process, including installing Node.js, creating necessary configuration files, and adding plugins for theme development. Additionally, it emphasizes the benefits of speed, workflow standardization, and file management in web development using these tools.
More Related Content
Similar to Time's Important - Let Task Management Save Yours
Time's Important - Let Task Management Save Yours
- 1. Time’s Important Let TaskManagement Save Yours WordCamp Sunshine Coast James Bundey
- 2. @jamesbundey A bit aboutme 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. @jamesbundey So what istask management? or more accurately what is a task runner
- 4. At it’s coreit’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. @jamesbundey Who’s it for? Anyone….wellalmost 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. However…. You’re going tohave to open the command line
- 7. @jamesbundey Why? Speed and simplicitywas 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.
- 9. @jamesbundey Lets Choose The twomost common http://gulpjs.comhttp://gruntjs.com
- 10. @jamesbundey Grunt vs Gulp Bothare 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.
- 12.
- 13. @jamesbundey Let’s get started Step1 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. @jamesbundey Now the WordPressbit 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.
- 16. @jamesbundey Firstly, install thelatest version of either Gulp npm install --save-dev gulp
- 17. @jamesbundey Lets add someplugins 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. @jamesbundey Again, install inthe command line npm install gulp-sass --save-dev
- 19. @jamesbundey Some plugins I’musing 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. Expect to seesomething 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. and this inyour 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. @jamesbundey Get configuring Modules aregreat, but without a Gulpfile.js to run the tasks they’re doing nothing. Step 1 - Add the modules
- 23.
- 24. @jamesbundey Run it Add thetask sequence to the bottom of the Gulpfile.js Run Gulp in the command line cd path-to-your-theme gulp
- 25.
- 26. @jamesbundey Some other reasons Noneed to include js libraries within your theme and a great way to integrate package management.
- 27.
- 28. @jamesbundey Great for ongoingupdates via deployment
- 29. @jamesbundey Running individual tasksis easy cd path-to-your-theme gulp task_name Simple to share & install once completed cd path-to-your-theme npm install
- 30.
- 31.