Task Runners

An introduction to the world of front-end automation.

My talk from Frontend NE on 02/07/2015.

Transcript

1. Task Runners An introduction to the world of front-end automation Frontend NE - 02/07/2015
2. The web is evolving And it's difficult to keep up Growth of mobile Performance Bleeding edge Compatibility
3. Old habits die hard Your current process sucks Laborious Inefficient Lack of control Humans suck
4. Robots are awesome
5. Automation wins Save time and effort Consistency Maintainable Processes are always ran
6. What is a task runner? "Task runners are a set of tools to make build operation clean and well documented. They provide helpers to manage operations on the project file system via the command line."
7. Automate all the things The value of a task runner Handles preprocessing (Sass, Less, PostCSS, CoffeeScript) Concatenate and minify files Autoprefix CSS Asset compression File linting Live reloading
8. Class of 2015 Popular task runners Plug-ins History 4,844* Sept 2011 1,532* June 2013 233* Nov 2013 *Figures accurate as of July 1, 2015
10. Why Gulp? Smaller, more efficient plug-ins Built-in file watching functionality JavaScript configuration files Streams
11. Common tasks Popular plugins for front-end engineers gulp-sass gulp-autoprefixer gulp-minify-css We'll look at an example that uses all three :)
12. Getting started Install the necessary dependencies to get things going b r e w i n s t a l l n o d e n p m i n s t a l l - g g u l p
13. Add gulp to an existing project n p m i n s t a l l g u l p - - s a v e - d e v Create and prepare your gulpfile.js t o u c h g u l p f i l e . j s / / I n c l u d e g u l p v a r g u l p = r e q u i r e ( ' g u l p ' ) ;
14. Production CSS with Gulp Install the required task plug-ins n p m i n s t a l l g u l p - s a s s - - s a v e - d e v n p m i n s t a l l g u l p - a u t o p r e f i x e r - - s a v e - d e v n p m i n s t a l l g u l p - m i n i f y - c s s - - s a v e - d e v
15. Update the project includes / / I n c l u d e p l u g - i n s v a r s a s s = r e q u i r e ( ' g u l p - s a s s ' ) ; v a r a u t o p r e f i x = r e q u i r e ( ' g u l p - a u t o p r e f i x e r ' ) ; v a r m i n i f y = r e q u i r e ( ' g u l p - m i n i f y - c s s ' ) ;
16. Define a new task Write the Gulp task that'll do all the work for us / / C o m p i l e . s c s s , p r e f i x p r o p e r t i e s , m i n i f y t h e C S S g u l p . t a s k ( ' s t y l e s ' , f u n c t i o n ( ) { g u l p . s r c ( [ ' s c s s / * . s c s s ' ] ) . p i p e ( s a s s ) . p i p e ( a u t o p r e f i x ( ' l a s t 2 v e r s i o n s ' ) . p i p e ( m i n i f y ( ) ) . p i p e ( g u l p . d e s t ( ' c s s ' ) ) ; } ) ; Run it! / / R u n o u r C S S t a s k g u l p s t y l e s
17. There's more!
18. Default task Because who wants to type unnecessary characters? / / D e f a u l t g u l p t a s k g u l p . t a s k ( ' d e f a u l t ' , [ ' s t y l e s ' ] ) ; Add multiple tasks g u l p . t a s k ( ' d e f a u l t ' , [ ' s t y l e s ' , ' j s ' ] ) ; Build with one word g u l p
19. The watcher Detect changes and rerun a task / / W a t c h f o r . s c s s c h a n g e s g u l p . t a s k ( ' d e f a u l t ' , [ ' s t y l e s ' ] , f u n c t i o n ( ) { g u l p . w a t c h ( ' s c s s / * . s c s s ' , [ ' s t y l e s ' ] ) ; } ) ;
20. Final Gulpfile v a r g u l p = r e q u i r e ( ' g u l p ' ) ; v a r s a s s = r e q u i r e ( ' g u l p - s a s s ' ) ; v a r a u t o p r e f i x = r e q u i r e ( ' g u l p - a u t o p r e f i x e r ' ) ; v a r m i n i f y = r e q u i r e ( ' g u l p - m i n i f y - c s s ' ) ; g u l p . t a s k ( ' s t y l e s ' , f u n c t i o n ( ) { g u l p . s r c ( [ ' s c s s / * . s c s s ' ] ) . p i p e ( s a s s ) . p i p e ( a u t o p r e f i x ( ' l a s t 2 v e r s i o n s ' ) . p i p e ( m i n i f y ( ) ) . p i p e ( g u l p . d e s t ( ' c s s ' ) ) ; } ) ; g u l p . t a s k ( ' d e f a u l t ' , [ ' s t y l e s ' ] , f u n c t i o n ( ) { g u l p . w a t c h ( ' s c s s / * . s c s s ' , [ ' s t y l e s ' ] ) ; } ) ;
21. Some pointers before you get stuck in Automate your most inefficient tasks first Invest time in your build process The command line is your friend
22. :')