Gulp.js

Introduction to Gulp.js & build process

Transcript

1. GULP.JS THE STREAMING BUILD SYSTEM @revathskumar
2. OK, I AM DONE CODING & TESTING. WHAT NEXT?
3. DEPLOYMENT?? NO BUILD IT
4. WHAT IT MEANS? JavaScript/CSS Minification & concatination HTML Minification Optimize Image Preprocess sass Transpile coffee Assets revving
5. WHY WE BUILD? Productivity Performance
6. HOW WE CAN AUTOMATE BUILD?
9. NODE.JS BASED TASK RUNNER
10. WHY GULP? Code over Configuration Using streams Less IO Only 4 API methods to learn Use standard libraries to do things maximum concurrency by default
11. Image courtesy : @addyosmani
12. n p m i n s t a l l - g g u l p
13. / / G u l p f i l e . j s v a r g u l p = r e q u i r e ( ' g u l p ' ) ; v a r c l e a n = r e q u i r e ( ' g u l p - c l e a n ' ) ; g u l p . t a s k ( ' c l e a n - d i s t ' , f u n c t i o n ( ) { r e t u r n g u l p . s r c ( ' d i s t / ' ) . p i p e ( c l e a n ( ) ) ; } ) ;
14. GULP API
15. TASK g u l p . t a s k ( n a m e , [ d e p e n d e n c y ] , f n ) ; register the function with name
16. WATCH g u l p . w a t c h ( g l o b , f n ) ; runs the function when file changes g u l p . w a t c h ( ' a p p / s c r i p t s / * . c o f f e e ' , [ ' c o f f e e ' ] ) ;
17. SRC g u l p . s r c ( g l o b ) ; return readable stream
18. DEST g u l p . d e s t ( f o l d e r ) ; return writable stream
19. RUN g u l p . r u n ( t a s k s ) ; Run the tasks
20. n p m i n s t a l l g u l p - c l e a n - - s a v e - d e v n p m i n s t a l l g u l p - c o n c a t - - s a v e - d e v n p m i n s t a l l g u l p - u g l i f y - - s a v e - d e v
21. / / G u l p f i l e . j s v a r g u l p = r e q u i r e ( ' g u l p ' ) ; v a r c l e a n = r e q u i r e ( ' g u l p - c l e a n ' ) ; v a r c o n c a t = r e q u i r e ( ' g u l p - c o n c a t ' ) ; v a r u g l i f y = r e q u i r e ( ' g u l p - u g l i f y ' ) ; g u l p . t a s k ( ' b u i l d ' , [ ' c l e a n - d i s t ' ] , f u n c t i o n ( ) { r e t u r n g u l p . s r c ( [ ' a p p / s c r i p t s / * . j s ' ] ) . p i p e ( c o n c a t ( ' a l l . m i n . j s ' ) ) . p i p e ( u g l i f y ( ) ) . p i p e ( g u l p . d e s t ( ' d i s t / s c r i p t s ' ) ) ; } ) ;
22. ERROR HANDLING g u l p . t a s k ( ' c o f f e e ' , f u n c t i o n ( ) { r e t u r n g u l p . s r c ( ' a p p / s c r i p t s / * . c o f f e e ' ) . p i p e ( c o f f e e ( ) . o n ( ' e r r o r ' , c o n s o l e . l o g ) ) . p i p e ( g u l p . d e s t ( ' . t m p / s c r i p t s / ' ) ) ; } ) ;
23. gulp : website : plugins : Stream : https://github.com/wearefractal/gulp http://gulpjs.com/ http://gulpjs.com/plugins https://github.com/substack/stream-handbook/
24. gulp : website : plugins : Stream : https://github.com/wearefractal/gulp http://gulpjs.com/ http://gulpjs.com/plugins https://github.com/substack/stream-handbook/
25. CONTACT US Website : Mailing list : Twitter : Facebook : keralajs.org bit.ly/kjs-gg @keralajs bit.ly/kjs-fb +Revath S Kumar @revathskumar http://blog.revathskumar.com/