Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Gulp.js

 Gulp.js

Introduction to Gulp.js & build process

Fb7edc7cc7a53c903af74d07dcecf9dc?s=128

Revath S Kumar

November 21, 2014
Tweet

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?

  7. None
  8. None
  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/