An introduction in to the world of front end automation

An introduction in to the world of front end automation

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. 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
7. 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
9. Why Gulp? Smaller, more efficient plug-ins Built-in file watching functionality JavaScript configuration files Streams
10. 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 :)
11. 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
12. 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 ' ) ;
13. 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
14. 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 ' ) ;
15. 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
16. There's more!
17. 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
18. 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 ' ] ) ; } ) ;
19. 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 ' ] ) ; } ) ;
20. 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
21. :')