1. ---------- 1 ? ! GULP ! https://fb.com/me.adunhansa https://twitter.com/arahansa http://adunhansa.tistory.com/ : http://arahansa.com ABOUT CONTACT SOURCE 1 2. 1. 2 http://arahansa.com ------------------------------------------------------------------- . .. 3. ! gulp 3 , 108 gulp ! .. 4. 4 .. ..-_- grunt, gulp bower , yeoman underscore, phantom.js , Casper.JS Angular.js, React.js, ext.js meteor.js, backbone.js js lint selenium require.js less , sass 5. -_-.. .. . (: : https://mirror.enha.kr/wiki/, !) 5 6. . ! alaboza. ( : http://orzwiki.com/:) 6 js.. . . 7. Task Gulp 7 https://github.com/gulpjs/gulp http://gulpjs.com/ https://www.npmjs.com/ ------------- , Gulp . node.js npm . . 8. & 8 -_-; ( ;;;;) . . . (.... , ..;;) .. . , gulp , task . watch brower-sync . . js . gulp .. .^^; 9. 9 . https://github.com/arahansa/learn_gulp npm install . 10. ( ) 10 () gulp? 01. 02. uglify 03. task 04. css minify 05. util 06. concat 07. rename 08. sourcemaps 09. plumber 10. 11. 12. 13. 14. sass 15. watch 16. browser-sync 17. jslint 18. jasmine 19. jasmine-phantom.js ------------------------- 11. , ~ gulp ! 11 gulp . Grunt , Grunt . gulp ------------- 12. .. . ? 12 task runners task . ( ) CSS, , , , . gulp , ^^ : http://joellongie.com/gulp-build-system-fundamentals/ 13. Gulp !! 13 require Task default .. 14. ! 14 ; ;; ? 15. gulp 01. ! 15 gulp . npm install --global gulp gulp gulffile.js var gulp = require('gulp'); gulp.task('default', function() { console.log("Gulp ? ^^; ") }); gulp . 16. gulp . 16 gulp task . node.js require gulp gulp task default . . 17. 02. uglify - 17 ------------- (?).. , . js . : npm install --save-dev gulp-uglify : https://github.com/terinjokes/gulp-uglify : Uglify . 18. 02. uglify .js 18 uglify js . .. . JS 19. 02. uglify gulp 19 Gulp . task uglify . .pipe .dest . var uglify = require('gulp-uglify'); gulp.src('js/*.js') .pipe(plumber()) .pipe(uglify()) .pipe(gulp.dest('build/js')); 20. 02. uglify 20 gulp build/js . 21. 03. gulp- Task 21 Task . task (default) function() , task . uglify task . 22. 03. gulp- Task - 22 gulp task . ( gulp default ) task . ( gulp hello) 23. 04. CSS minify CSS 23 : npm install --save-dev gulp-minify-css : https://github.com/jonathanepollack/gulp-minify-css : CSS cssstyle.css . .. .. -_-; gulp minify-css ~ 24. 05. gulp-util 24 npm install --save-dev gulp-util .. ^^; : https://github.com/gulpjs/gulp-util : . ;; .... ;; 25. 06. gulp-concat 25 : npm install --save-dev gulp-concat : https://github.com/wearefractal/gulp-concat : (js, css) .. ~ 26. 06. gulp-concat 26 ;; .. 27. 07. gulp-rename 27 . ~ : npm install --save-dev gulp-rename : https://github.com/hparra/gulp-rename : ^.^; 28. 08. gulp-sourcemaps 28 : npm install --save-dev gulp-sourcemaps : https://github.com/floridoo/gulp-sourcemaps : . , uglify concat, rename ? sourcemaps ! . 29. 08. gulp-sourcemaps 29 ( !) . ;;; . ^^; ;; http://blog.outsider.ne.kr/916 30. 08. gulp-sourcemaps 30 .. git , .. ... (.. .. ;;) , , ! init write !~ . ^^ 31. 09. gulp-plumber 31 : npm install --save-dev gulp-plumber : https://github.com/floatdrop/gulp-plumber : . . , . . test/plumberTest.js . 32. 09. gulp-plumber 32 . . . 33. 09. gulp-plumber 33 plumber .^^; .. ! 34. 10. gulp-iconfont svg 34 : npm install --save-dev gulp-iconfont : https://github.com/nfroidure/gulp-iconfont : svg font . .. . . aseets/icon svg . 35. 10. gulp-iconfont 35 svg wwwfonts font . 36. 10. gulp-iconfont svg 36 : assetsicons svg ~ gulp wwwfonts . ? , . http://gomakethings.com/icon-fonts/ 37. html . icontest.html before . content svg . 10. gulp-iconfont svg 37 38. 10. gulp-iconfont 38 . ~ ( -_-?) .. .... ;; ( ;;) 39. 10. gulp-iconfont 39 iconfont css , lodash , ^^ 40. 11. gulp-autoprefixer 40 : npm install --save-dev gulp-autoprefixer : https://www.npmjs.com/package/gulp-autoprefixer https://github.com/postcss/autoprefixer : ? npmjs . browsers . 41. 11. gulp-autoprefixer 41 autoprefixer sourcemaps . cssapp.css gulp autoPrefixer dist app.css . 42. 12. gulp-load-plugins 42 : npm install --save-dev gulp-load-plugins : https://www.npmjs.com/package/gulp-load-plugins : . . require . -_- . . require . ( json ) 43. 12. gulp-load-plugins 43 , package.json . (npm install) .. plugins . gulp-autoPrefixer plugins.autoprexier . task ^^ 44. 13. gulp-imagemin 44 : npm install --save-dev gulp-imagemin : https://github.com/sindresorhus/gulp-imagemin : ! 45. 13. gulp-imagemin 45 .... . ? ~ : 46. 14. gulp-ruby-sass sass css 46 : npm install --save-dev gulp-ruby-sass : https://github.com/sindresorhus/gulp-ruby-sass : sass . sass .. css .. less, sass, stylus .. sass ; css/sampleSass.scss gulffile . 47. 14. gulp-ruby-sass sass css 47 sass . . ;; ? 48. 15. watch 48 Gulp watch . . gulp watch . watch . 49. 15. watch 49 scss red ? . watch sourcemaps . watch ~? 50. 15. BrowerSync - . 50 : npm install browser-sync gulp --save-dev : http://www.browsersync.io/docs/gulp/ : , Reload (, , ) ( ) https://www.youtube.com/watch?v=Rv5f_v5gqw4 ~ . : ( ), Reload. . . . 51. 15. BrowerSync - 51 . , html watch reload change . scss task css , . (.. , ;; ;) 52. 15. BrowerSync - 52 ? . 53. 15. BrowerSync - 53 scss css . .. 54. .. .. -_- 54 10 .. . , , ~ ( ...-_-;;.... ....;;) 55. .. 55 Outsider , -_- . .. http://www.slideshare.net/rockdoli /adieu-springsprout2014 56. 16. jshint 56 : npm install gulp-jshint --save-dev : https://github.com/spalger/gulp-jshint : .. , jshint . csshint, htmlhint ^^; ..() 57. 17. jasmine 57 : npm install --save-dev gulp-jasmine : https://github.com/sindresorhus/gulp-jasmine : : Outsider () . Outsider Evan Hahn () . CCL . -_- jasmine . . https://github.com/jasmine/jasmine/releases . 58. 17. jasmine ? 58 SpecRunner Javascript src Player Song spec ----------- src/Players.js spec/PlayerSepc.js 59. 17. jasmine 59 Jasmine . () http://jasmine.github.io/ jasmine javascript spec gulp , jasmine . spec/test.js jasmine src spec test.js () . ?^^ 60. 17. jasmine 60 . 6 .. gulp-test . . jasmine html javascript .. . .., concat ;; .. phantom.js (?) 61. 18. phantom.js 61 : npm install --save-dev gulp-jasmine2-phantomjs : https://github.com/sandermak/gulp-jasmine2-phantomjs : spec jasmine SpecRunner.html . phantom.js jasmine js . 62. 18. phantom.js 62 jasmine , jasmine2-junit js . , js ~, gulp .. . 63. ..() 63 , production , gulp , . .. . . ------------------------- 64. gulp , 64 . LevelupTuts https://www.youtube.com/watch?v=wNlEK8q rb0M Joel https://www.youtube.com/playlist?list=PLv1 YUP7gO_viROuRcGsDCNM-FUVgMYb_G Gulp https://www.npmjs.com/package/gulp-install 65. Special Thanks 65 (?) . http://ilikekillnerds.com/2014/11/10-highly-useful-gulp-js- plugins-for-a-super-ninja-front-end-workflow/ . D2 - .. javajigi ;; 66. , gulp .. 66 gulp . 67. -_- gulp ..;; ;; (: : https://mirror.enha.kr/wiki/, !) 67 68. 68 THANK YOU ! arahansa ------ ------ : https://fb.com/me.adunhansa : https://twitter.com/arahansa : http://adunhansa.tistory.com/ : http://arahansa.com