웹 어플리케이션 보안 2016년 2학기 10. Workflow tools
10. Workflow Tools Chap 19. MEAN Development Workflow Tools
Speed up our Workflow 개발 프로세스를 쉽게 수행하기 위한 도구? Bower Gulp The browser package manager (front-end resource manager) Gulp The streaming build system (task-runner)
샘플 MEAN 프로젝트를 만들어보자 디렉토리 구조
작업 순서 프로젝트 시작 > npm init Express 설치 > npm install express --save
파일 편집 server.js - Index.html을 서비스하도록 설정
파일 편집 public/app/controllers/mainCtrl.js public/app/views/pages/home.html
파일 편집 public/app/views/index.html
파일 편집 public/app/app.js public/app/app.routes.js
파일 편집 public/assets/css/style.less .less 파일? 변수 선언 변수 이용
서비스 시작 서버 시작 > nodemon server.js 아직 index.html에서 Bootstrap, Angular, Angular Route 등을 적용하지 않았음 Bower를 이용하여 이들 리소스를 가져올 것임
Bower Bower란? Npm과 매우 비슷한 방식으로 동작 Bower의 설치 Frontend 리소스 관리를 위한 패키지 관리자 CSS/JS 를 불러올 수 있음 - Bootstrap, Angular, jQuery, Animate.css, Moment 등 Npm과 매우 비슷한 방식으로 동작 Package.json – npm의 패키지 관리 (서버측) Bower.json – bower의 패키지 관리 (클라이언트측) Bower의 설치 $ npm install -g bower -g는 전역 설치 bower는 앞으로 모든 프로젝트에서 계속 사용하게 되므로 전역 설치 필요
Bower Bower의 시작 npm과 매우 비슷 패키지 설치하기 (frontend측) Bootstrap 설치하기 $ bower init 이것을 실행하면 bower.json 파일이 만들어짐 패키지 설치하기 (frontend측) $ bower install <package_name> --save --save 옵션을 사용하면 설치되는 패키지가 bower.json에 등록됨 Bootstrap 설치하기 $ bower install bootstrap bower_components 라는 새 폴더를 만들고 여기에 패키지가 설 치됨 Github로부터 설치하기 bower install <github-url> npm과 매우 비슷
패키지 검색하기 커맨드라인에서 검색 Bower 웹사이트에서 검색 $ bower search <package_name> Bower 웹사이트에서 검색 https://bower.io/search/
설치 디렉토리 변경하기 설치 디렉토리를 변경해보자 방법: 프로젝트 루트에 .bowerrc 파일을 생성하고 다음 을 입력 기본 위치: bower_components 변경 위치: public/assets/libs 방법: 프로젝트 루트에 .bowerrc 파일을 생성하고 다음 을 입력 패키지를 설치하면 public/assets/libs 폴더에 설치됨
패키지 설치하기 프로젝트에서 사용할 패키지 설치 $ bower install bootstrap angular angular-route angular- animate --save angular.min.js 파일이 로컬 폴더에 설치됨
패키지 활용하기 Public/app/views/index.html 에서 패키지 불러오기 angular.min.js를 CDN에서 불러오지 않고 내 서버의 폴더에서 직접 불러옴
Gulp Task runner (작업 자동화 도구) Grunt http://gruntjs.com/ Gulp http://gulpjs.com/ - Grunt보다 기능향상 버전
Grunt vs. Gulp
Gulp Gulp는 Task runner (작업 자동화 도구) 개발 과정에서 수행해야 하는 여러 작업들을 자동화 파일의 에러 체크 (linting files) http://www.javascriptlint.com/ 파일의 압축, 최소화 (minifying files) https://javascript-minifier.com/ LESS 나 SCSS 등의 처리 (CSS 전처리기, CSS 확장언어) http://lesscss.org/ http://sass-lang.com/ 여러 파일의 통합 (concatenating multiple files into one) 서버 실행(Gulp can even start our nodemon server for us) so much more…
Gulp 설치 Gulp 설치 $ npm install -g gulp (전역설치) $ npm install gulp --save-dev (프로젝트의 devDependencies에 등록)
LESS 컴파일 LESS 란? CSS 전처리기 CSS의 기능을 확장하여 변수, mixin, 함수 등을 사용 가능 사례
LESS 컴파일 Style.less 파일을 컴파일하여 style.css 파일을 만들어보 자. Index.html에서는 style.css를 이용 LESS 파일을 컴파일하려면 gulp-less 설치 필요 $ npm install gulp-less --save-dev
LESS 컴파일 Gulp 플러그인을 사용하려면 루트폴더에 환경설정 파일 을 만들어야 함 (gulpfile.js) CSS 라는 작업을 생성 LESS 파일을 읽어서 LESS 작업후 CSS 파일로 저장
LESS 컴파일 Gulp로 css 작업 실행 $ gulp css style.less 파일을 컴파일하여 style.css 파일 생성
Minifying CSS Gulp는 pipe 기능을 이용하여 한 작업에서 여러 패키지 들의 연속된 실행이 가능 Gulp-minify-css 패키지 : 축소 CSS 파일 생성 Gulp-rename 패키지 : 이름을 바꾸는 기능 설치: $ npm install gulp-minify-css gulp-rename --save-dev
Minifying CSS gulpfile.js 파일 수정 Gulp 실행: $ gulp css Less 작업 Minify 작업 Rename 작업 style.min.css 파일 생성
스타일 적용 Index.html에 스타일파일 지정
Gulp 패키지 사용 방법 1. 패키지 설치 및 환경 저장 --save-dev 2. gulpfile.js 설정 패키지 플러그인 읽어오기 플러그인을 사용하여 task 작성 3. Gulp task 실행
Linting JS (소스 에러 체크) JS 파일에 에러가 없는지 체크 gulp-jshint 설치 서버측: node.js 파일 클라이언트측: angular.js 파일 gulp-jshint 설치 $ npm install gulp-jshint --save-dev
Linting JS (소스 에러 체크) Gulpfile.js 파일에 js라는 task 작성 Task 실행 $ gulp js Gulp-jshint를 불러옴 복수개의 js 파일에 대해 jshint로 에러체크를 함
Minifying and concatenating JS 현재 방법으로는 어플리케이션의 <head> 부분이 복잡 여러 개의 자바스크립트를 불러오므로 복잡하고 성능 저하 최소화(minify), 통합(concatenation)하여 운영 필요
Minifying and concatenating JS 두개의 패키지 설치 gulp-uglify (minifying, 최소화) gulp-concat (concatenation, 통합) $ npm install gulp-uglify gulp-concat --save-dev gulpfile.js 수정 패키지를 불러옴 all.js로 파일 통합 최소화 public/dist 폴더에 출력
Minifying and concatenating JS Task 실행 $ gulp scripts Public/dist/all.js 생성 all.js
Minifying Angular Gulp-ng-annotate 설치 Gulpfile.js 에 angular task 추가 $ npm install gulp-ng-annotate --save-dev Gulpfile.js 에 angular task 추가 Task 실행 $ gulp angular Gulpfile.js 패키지를 불러옴 ngAnnotate() 실행
Watching for changes 소스파일이 수정되면 해당 task를 실행하도록 설정 가능 Gulp-watch 설치 $ npm install gulp-watch --save-dev Watch task 추가 테스트: style.less 파일 수정 후 확인 Gulpfile.js style.less 파일이 수정되면 css task를 실행 JS 소스가 수정되면 js, angular task를 실행
Starting a Node Server Gulp를 이용한 서버 시작 Gulp-nodemon 설치 Gulp task 설정 Nodemon을 이용하지만 소스검사 등 task를 실행 가능 Gulp-nodemon 설치 $ npm install gulp-nodemon --save-dev Gulp task 설정 Nodemon task 선언 시작 파일 감시대상 파일 Default task는 nodemon
Starting a Node Server 서버 시작 $ gulp 테스트 소스 수정
요약 개발자의 효율성을 높여주는 도구들을 이용하자 1. Bower를 이용한 front-end 리소스 관리 2. Gulp를 이용한 task 관리 (작업 자동화)