Gulp vs Grunt

Transcript

1. Gulp vs Grunt 前端工程的构 建工具对 比 f2e.im/guokai
2. World of Build Tools Make, CMake, Ant, Maven, Grunt, etc.
3. Grunt vs Gulp When it comes to JavaScript task runners, Grunt is king. Well, at least it has been... Earlier last year, the team at Fractal voiced their concerns with Grunt and came up with a plan to take all the great ideas and benefits that Grunt introduced and rebuild it. They call their project gulp.
4. Grunt α . Grunt 有一个完善的社区， 插件丰富 β . 它简单 易学， 你可以随便安装插件并配置它们 γ . 你不需要多先进 的理念， 也不需要任何经验
5. Oops.. “How is gulp different than Grunt and why should I care?”
6. Gulp α . 易于使用： 采用代码优 于配置策略，Gulp让简单 的事情继续简单， 复杂 的任务变 得可管理。 β . 高效： 通过 利用 Node.js 强大的流， 不需要往磁盘 写中间 文件， 可以更快地完成构 建。 γ . 高质 量：Gulp严 格的插件指导 方针， 确保插件简单 并且按你期望的方式工作。 δ . 易于学习： 通过 把 API 降到最少， 你能在很短的时间 内学会 Gulp。构 建工作就像你设 想的一样： 是一系列流管道。
8. Yeoman Team https://github.com/yeoman/yeoman/issues/1232
9. gruntfile.js m o d u l ee x p o r t s g r u n t g r u n t c o n c a t u g l i f y j s h i n t f i l e s w a t c h f i l e s t a s k s g r u n t g r u n t . =f u n c t i o n ( ){ . i n i t C o n f i g ( { :{ ' d i s t / a l l . j s ' :[ ' s r c / * . j s ' ] } , :{ ' d i s t / a l l . m i n . j s ' :[ ' d i s t / a l l . j s ' ] } , :{ :[ ' g r u n t f i l e . j s ' ,' s r c / * . j s ' ] } , :{ :[ ' g r u n t f i l e . j s ' ,' s r c / * . j s ' ] , :[ ' j s h i n t ' ,' c o n c a t ' ,' u g l i f y ' ] } } ) ; / / L o a d O u r P l u g i n s . l o a d N p m T a s k s ( ' g r u n t ‐ c o n t r i b ‐ j s h i n t ' ) ; . l o a d N p m T a s k s ( ' g r u n t ‐ c o n t r i b ‐ c o n c a t ' ) ;
10. Switching
11. gulpfile.js g u l p j s h i n t c o n c a t r e n a m e u g l i f y g u l p g u l p j s h i n t g u l p g u l p g u l p g u l p v a r =r e q u i r e ( ' g u l p ' ) ; v a r =r e q u i r e ( ' g u l p ‐ j s h i n t ' ) ; v a r =r e q u i r e ( ' g u l p ‐ c o n c a t ' ) ; v a r =r e q u i r e ( ' g u l p ‐ r e n a m e ' ) ; v a r =r e q u i r e ( ' g u l p ‐ u g l i f y ' ) ; / / L i n t J S . t a s k ( ' l i n t ' ,f u n c t i o n ( ){ r e t u r n . s r c ( ' s r c / * . j s ' ) . p i p e ( j s h i n t ( ) ) . p i p e ( . r e p o r t e r ( ' d e f a u l t ' ) ) ; } ) ; / / C o n c a t & M i n i f y J S . t a s k ( ' m i n i f y ' ,f u n c t i o n ( ) { r e t u r n . s r c ( ' s r c / * . j s ' ) . p i p e ( c o n c a t ( ' a l l . j s ' ) ) . p i p e ( . d e s t ( ' d i s t ' ) ) . p i p e ( r e n a m e ( ' a l l . m i n . j s ' ) ) . p i p e ( u g l i f y ( ) ) . p i p e ( . d e s t ( ' d i s t ' ) ) ;
12. Differences Streaming Gulp is a streaming build system. Gulp's use of streams and code‒over‒configuration makes for a simpler and more intuitive build. Plugins When it comes to extending functionality, it is gulp’s belief that each plugin should only perform a single action. Code Not Config My personal favorite improvement is that your gulpfile is code ‒ not config. Since gulp follows the CommonJS spec, if you are familiar with Node then you will feel right at home. No Temporary File Virtual memory file content transfer
13. The way I/O works using Grunt
14. The way I/O works using Gulp
15. Gulp core is Streaming
16. Streams come to us from the earliest days of unix and have proven themselves over the decades as a dependable way to compose large systems out of small components that do one thing well.
17. One of the most famous comments on the philosophy of Unix is by Doug McIlroy: Write programs that do one thing and do it well. Write programs to work together. Write programs to handle text streams, because that is a universal interface.
18. α . Write modules that do one thing and do it well. β . Write modules that work together. γ . Write modules that handle events and streams.
19. t p u t s e t a f w h o a m i f i g l e t t r _ … t r \ \ \ ` t r \ ¡ t r √ 8 8; | | | | | | /
20. why you should use streams? I/O in node is asynchronous, so interacting with the disk and network involves passing callbacks to functions.
21. h t t p f s s e r v e r h t t p r e q r e s f s _ _ d i r n a m e e r r d a t a r e s d a t a s e r v e r v a r =r e q u i r e ( ' h t t p ' ) ; v a r =r e q u i r e ( ' f s ' ) ; v a r = . c r e a t e S e r v e r ( f u n c t i o n( , ){ . r e a d F i l e ( +' / d a t a . t x t ' ,f u n c t i o n( , ){ . e n d ( ) ; } ) ; } ) ; . l i s t e n ( 8 0 0 0 ) ;
22. h t t p f s s e r v e r h t t p r e q r e s s t r e a m f s _ _ d i r n a m e s t r e a m r e s s e r v e r v a r =r e q u i r e ( ' h t t p ' ) ; v a r =r e q u i r e ( ' f s ' ) ; v a r = . c r e a t e S e r v e r ( f u n c t i o n( , ){ v a r = . c r e a t e R e a d S t r e a m ( +' / d a t a . t x t ' ) ; . p i p e ( ) ; } ) ; . l i s t e n ( 8 0 0 0 ) ;
23. Depends on: CLI depends on liftoff Change cwd ‒> require gulpfile ‒> require gulp .start Through2 Easy to create stream.Transform and compatible with 0.8‒ Vinyl, Vinyl‒fs A virtual file format, and Vinyl adapter for the file system Orchestrator A module for sequencing and executing tasks and dependencies in maximum concurrency
24. All Five APIs
25. gulp.task g u l p d o n e s t r e a m p r o m i s e . t a s k ( ' n a m e ' ,[ ' d e p s ' ] ,f u n c t i o n ( ){ r e t u r n | | ; / / . . . o r , c a l l d o n e ( ) } ) ;
26. gulp.run g u l p . r u n ( ' c s s ' ,' c o n c a t ' ) ;
27. gulp.watch g u l p ' s r c j s t e s t c o m p i l e ' . w a t c h ( / * * / * . ' , [ ' ' , ' ] ) ;
28. gulp.src Returns a readable stream === require('vinyl‒fs').src g u l p ' s r c j s t e s ts p e c j s ' . s r c ( [ / * * / * . ' , ' / / * * / * . ] )
29. gulp.dest Returns a "through stream" === require('vinyl‒fs').dest g u l p g u l p . s r c ( ' s r c ' ) . p i p e ( . . . ) . p i p e ( . d e s t ( ' d i s t ' ) ) ;
30. Gulp uses Orchestrator A module for sequencing and executing tasks and dependencies in maximum concurrency
31. But... How do you run all the tasks sequentially?
32. r u n S e q u e n c e g u l p v a r =r e q u i r e ( ' r u n ‐ s e q u e n c e ' ) ; . t a s k ( ' d e f a u l t ' ,f u n c t i o n ( ){ r u n S e q u e n c e ( ' c l e a n ' ,' c o p y t o ' ,' s a s s ' ,' c s s m i n ' ,' j s m i n ' ) ; } ) ;
33. How to create a Gulp plugin?
34. t h r o u g h g u t i l P l u g i n E r r o r g u t i lP l u g i n E r r o r P L U G I N _ N A M E p r e f i x T e x t s t r e a m s t r e a m p r e f i x T e x t s t r e a m p r e f i x T e x t p r e f i x T e x t P L U G I N _ N A M E p r e f i x T e x t p r e f i x T e x t s t r e a m t h r o u g h f i l e e n c c a l l b a c k f i l e / / t h r o u g h 2 模块是对 n o d e s t r e a m 的包装 v a r =r e q u i r e ( ' t h r o u g h 2 ' ) ; v a r =r e q u i r e ( ' g u l p ‐ u t i l ' ) ; v a r = . ; / / 定义常数，这里是插件的名称 c o n s t =' g u l p ‐ p r e f i x e r ' ; / / 通过 t h r o u g h 初始化读写流 f u n c t i o np r e f i x S t r e a m ( ){ v a r =t h r o u g h ( ) ; . w r i t e ( ) ; r e t u r n ; } / / 插件功能主函数（处理文件数据） f u n c t i o ng u l p P r e f i x e r ( ){ i f( ! ){ t h r o wn e wP l u g i n E r r o r ( ," M i s s i n g p r e f i x t e x t ! " ) ; } =n e wB u f f e r ( ) ;/ / a l l o c a t e a h e a d o f t i m e / / C r e a t i n g a s t r e a m t h r o u g h w h i c h e a c h f i l e w i l l p a s s v a r = . o b j ( f u n c t i o n ( , , ){ / / 如果文件内容为空，则忽略 i f( . i s N u l l ( ) ){ }
35. Thank you @f2e.im/guokai
36. Ref α . Gulp slides β . Build Wars γ . Node Stream API δ . Node.js Stream Playground ε . Stream Handbook ζ . No Need To Grunt, Take A Gulp Of Fresh Air η . Unix and Node: Pipes and Streams θ . Unix philosophy