Gulp 입문
Die SlideShare-Präsentation wird heruntergeladen.
×
![grunt.initConfig({
recess: {
dev: {
src: ['src/main.css']
}
},
jshint: {
dev: {
src: ['js/**/*.js'],
}
},
flow:...](https://image.slidesharecdn.com/adieu-springsprout-2014-141130090317-conversion-gate01/75/frontend-development-process-36-2048.jpg?cb=1668094942)
Hier ansehen
Weitere Verwandte Inhalte
Diashows für Sie (20)
Ähnlich wie Front-end Development Process - 어디까지 개선할 수 있나 (20)
Weitere von JeongHun Byeon (20)
Aktuellste (20)
Front-end Development Process - 어디까지 개선할 수 있나
- 1. Front-end Development Process 2014.11.30 Outsider Adieu 2014, 봄싹 어디까지 개선할 수 있나
- 2. 0VUTJEFS $ http://blog.outsider.ne.kr # outsideris@gmail.com " @outsideris ! outsideris
- 3. 게으른 개발자 https://www.flickr.com/photos/frosted_peppercorn/2411572004
- 4. 어려운 작업을 할 때 항상 게으른 사람을 선택합니다. 게으른 사람은 가장 쉬운 방법을 찾기 때문입니다. - Bill Gates https://www.flickr.com/photos/loritingey/350043329
- 5. https://www.flickr.com/photos/scottlynchnyc/10546981384 Automation
- 6. https://www.flickr.com/photos/oldpatterns/6252459830 서버사이드에 비해 많이 뒤쳐져 있었다
- 7. 의존성 관리 https://www.flickr.com/photos/ciat/4106461308
- 8. <!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title> </head> <body> <h1>SpringSprout Demo</h1> </body> </html> 1 2 3 4 5 6 7 8 9
- 9. 어떻게 사용하고 있나요? % 라이브러리 사이트 검색
- 10. 어떻게 사용하고 있나요? % 라이브러리 사이트 검색 프로젝트 폴더에 다운로드 &
- 11. 어떻게 사용하고 있나요? % 라이브러리 사이트 검색 ' HTML에 & 프로젝트 폴더에 코드 추가 다운로드
- 12. <!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title> <link href="./css/bootstrap.css" rel="stylesheet"> </head> <body> <h1>SpringSprout Demo</h1> <script src="/js/jquery.js"></script> <script src="/js/bootstrap.js"></script> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14
- 13. Package Manager http://browserify.org/ http://bower.io/
- 14. $ bower install jquery bootstrap jquery#2.1.1 components/jquery bootstrap#3.3.1 components/bootstrap └── jquery#2.1.1 $ ls components/ bootstrap jquery
- 15. <!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title> <link href="./components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> </head> <body> <h1>SpringSprout Demo</h1> <script src="./components/jquery/dist/jquery.js"> </script> <script src="./components/bootstrap/dist/js/bootstrap.js"> </script> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
- 16. Pagage Manager를 쓸 때의 장점 ( 라이브러리 파일을 형상관리도구에 넣지 않는다 CSS나 JS가 아닌 컴포넌트 단위로 관리한다 버전만 관리하면서 필요에 따라 업데이트하기 쉽다. 보통은 min 버전이 함께 제공된다 ( ( (
- 17. 웹서버 실행 https://www.flickr.com/photos/110751683@N02/13792583873/
- 18. 어떻게 사용하고 있나요? ) 로컬 파일을 브라우저에서 실행 C:Documents/Project/index.html
- 19. 어떻게 사용하고 있나요? ) 로컬 파일을 브라우저에서 실행 C:Documents/Project/index.html * Apache, nginx
- 20. 어떻게 사용하고 있나요? ) 로컬 파일을 브라우저에서 실행 C:Documents/Project/index.html Apache, nginx * + WAS 실행(Tomcat 등)
- 21. 어떻게 사용하고 있나요? ) 로컬 파일을 브라우저에서 실행 C:Documents/Project/index.html Apache, nginx * + WAS 실행(Tomcat 등) , python -m SimpleHTTPServer
- 22. http://gruntjs.com http://gulpjs.com
- 23. module.exports = function(grunt) { 'use strict'; // 프로젝트 설정 grunt.initConfig({ }); }; 1 2 3 4 5 6 7 8 9 Gruntfile.js
- 24. grunt-contrib-connect grunt-contrib-watch
- 25. grunt.initConfig({ connect: { server: { options: { port: 8000, base: '' } } }, watch: {} }); 1 2 3 4 5 6 7 8 9 10 11 12 Gruntfile.js
- 26. $ grunt connect watch Running "connect:server" (connect) task Started connect web server on http://0.0.0.0:8000 Running "watch" task Waiting…
- 27. 빌드도구를 쓸 때의 장점 ( 프로젝트 별로 필요한 환경을 자동화 프로젝트내에서 자동화된 환경을 공유 다른 개발도구에 종속되지 않는다 CI서버 등에서 사용할 수 있다 ( ( (
- 28. 코드의 품질 관리 https://www.flickr.com/photos/wiertz/10248755515
- 29. CSS LINT ESLint https://github.com/yaniswang/HTMLHint http://twitter.github.io/recess/ http://csslint.net http://eslint.org http://flowtype.org http://www.jshint.com
- 30. .profile { height: 400px; } .learn_more { -ms-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); -o-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); } 1 2 3 4 5 6 7 8 9 10 11 style.css
- 31. $ recess style.css Analyzing the following files: style.css FILE: style.css STATUS: Busted FAILURES: 2 failures Underscores should not be used when naming selectors 8. .learn_more Incorrect property order for rule ".learn_more" Correct order below: 9. -webkit-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); 10. -moz-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); 11. -ms-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); 12. -o-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); 13. box-shadow: inset 5px 5px rgba(0, 0, 0, 0.5);
- 32. var temp; function sum(a, b) { return a + b } 1 2 3 4 5 common.js
- 33. $ jshint util.js util.js: line 4, col 3, Missing "use strict" statement. util.js: line 4, col 15, Missing semicolon. util.js: line 1, col 5, 'temp' is defined but never used. util.js: line 3, col 10, 'sum' is defined but never used. 4 errors
- 34. /* @flow */ function foo(x) { return x*10; } foo("Hello, world!"); 1 2 3 4 5 6 7 hello.js
- 35. $ flow check hello.js hello.js:7:5,19: string This type is incompatible with hello.js:4:10,13: number Found 1 error
- 36. grunt.initConfig({ recess: { dev: { src: ['src/main.css'] } }, jshint: { dev: { src: ['js/**/*.js'], } }, flow: { dev: { } } }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Gruntfile.js
- 37. grunt.initConfig({ recess: { dev: { … } }, jshint: { dev: { … } }, flow: { dev: { … } }, watch : { css: { files: ['css/**/*.css'], tasks: ['recess:dev'] }, js: { files: ['js/**/*.js'], tasks: ['jshint:dev', 'flow:dev'] } } }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Gruntfile.js
- 38. pre-processor https://www.flickr.com/photos/photomonkey/5669185
- 39. http://sass-lang.com/ http://lesscss.org/ http://learnboost.github.io/stylus/ http://coffeescript.org/
- 40. grunt.initConfig({ less:{ dev: { files: { 'css/style.css': 'css/main.less' } } }, watch : { less: { files: ['css/**/*.less'], tasks: ['less:dev'] } } }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Gruntfile.js
- 41. 어떻게 사용하고 있나요? ' 코드 수정
- 42. 어떻게 사용하고 있나요? ' 코드 수정 - 브라우저로 이동
- 43. 어떻게 사용하고 있나요? ' 코드 수정 브라우저로 이동 F5로 새로 고침 . -
- 44. 어떻게 사용하고 있나요? ' 코드 수정 / 변경 내용 확인 브라우저로 이동 F5로 새로 고침 . -
- 45. grunt.initConfig({ connect: { server: { options: { port: 9999, base: '' } } }, watch: { less: { files: ['css/**/*.less'], tasks: [‘less:dev’], options: { livereload: true } }, js: { files: ['js/**/*.js'], tasks: ['jshint:dev', ‘flow:dev’], options: { livereload: true } } } }); 1 2 3 4 5 6 7 8 9 10 11 12 Gruntfile.js
- 46. 유닛테스트 https://www.flickr.com/photos/photomonkey/5669185
- 47. assert test framework test runner
- 48. expect(foo).to.be.a('string'); expect(foo).to.equal('bar'); expect(foo).to.have.length(3); expect(beverages) .to.have.property('tea') .with.length(3); 1 2 3 4 5 6 7 8 9
- 49. describe('Array', function() { describe('#indexOf()', function() { it('should return -1', function() { // assert }) }) }) 1 2 3 4 5 6 7 8
- 50. function plus(a, b) { return a + b; } function minus(a, b) { return a - b; } function times(a, b) { return a * b; } function divide(a, b) { return a / b; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 util.js
- 51. describe('util', function() { describe('plus', function() { it('should return 3', function() { var result = plus(1, 2); expect(result).to.equal(3); }); }); describe('minus', function() { it('should return 2', function() { var result = minus(5, 3); expect(result).to.equal(2); }); }); }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 util.spec.js
- 52. karma-runner ( 필요한 파일 로딩 설정된 브라우저 실행 후 테스트 테스트 결과를 Socket.IO로 콘솔에 출력 파일 수정할 때마다 재 실행 ( ( (
- 53. 작성한 자동화 스크립트는 최대한 써먹자
- 54. 배포 https://www.flickr.com/photos/bribri/8731091993
- 55. <!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title> <link href="/components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <link href="/css/common.css" rel="stylesheet"> <link href="/css/main.css" rel="stylesheet"> <link href="/css/page.css" rel="stylesheet"> <link href="/css/content.css" rel="stylesheet"> </head> <body> <script src="/components/jquery/dist/jquery.js"></script> <script src="/components/bootstrap/dist/js/bootstrap.js"> </script> <script src="/js/common.js"></script> <script src="/js/template.js"></script> <script src="/js/service.js"></script> <script src="/js/server.js"></script> <script src="/js/util.js"></script> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 index.html
- 56. 어떻게 사용하고 있나요? 0 CSS/JS 병합
- 57. 어떻게 사용하고 있나요? 0 CSS/JS 병합 1 CSS/JS 압축
- 58. 어떻게 사용하고 있나요? 0 CSS/JS 병합 HTML에서 링크 변경 CSS/JS 압축 ' 1
- 59. grunt.initConfig({ useminPrepare: { html: 'index.html', options: { dest: '.' } }, usemin: { html: 'index.html' } }); grunt.registerTask('build', [ 'useminPrepare', 'concat:generated', 'cssmin:generated', 'uglify:generated', 'usemin' ]); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Gruntfile.js
- 60. <!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title> <!-- build:css /dist/css/style.css --> <link href="/components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <link href="/css/common.css" rel="stylesheet"> <link href="/css/main.css" rel="stylesheet"> <link href="/css/page.css" rel="stylesheet"> <link href="/css/content.css" rel=“stylesheet"> <!-- endbuild --> </head> <body> <!-- build:js /dist/js/app.js --> <script src="/components/jquery/dist/jquery.js"></script> <script src="/components/bootstrap/dist/js/bootstrap.js"> </script> <script src="/js/common.js"></script> <script src="/js/template.js"></script> <script src="/js/service.js"></script> <script src="/js/server.js"></script> <script src=“/js/util.js"></script> <!-- endbuild --> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 index.html
- 61. Thank you! 예제: https://github.com/outsideris/presentations/ tree/master/14-11-30-adieu-springsprout2
