프론트 정리

브라우저 지원

• IE10+
• Chrome
• Safari

환경

빌드 자동화 및 품질

• gulp (http://programmingsummaries.tistory.com/356) (http://gulpjs.com/)
• jshint (http://jshint.com/) (http://jshint.com/docs/)

패키지

• NPM (https://www.npmjs.com/)
• Bower (https://bower.io)

프레임워크

• jQuery 3.x (https://jquery.com/)
• SASS (https://sass-guidelin.es/ko/)

UI Preset

• Semantic-UI (http://semantic-ui.com/introduction/getting-started.html)

작업

JS 스타일 가이드

• jshint가 걸려있는 gulp bulid 처리를 성공한 경우로 기준을 완화합니다.

SASS 스타일 가이드

• 앞서 언급한 SASS guildline 주소 참고

Semantic-UI 작업 가이드

• grids와 flexbox 사용을 금지합니다. (IE9 지원을 위해)

Although some components will work in IE9, grids and other flexbox components are not supported by IE9 and may not appear correctly.

페이지별 작업 관리

• 컨트롤러 별로 폴더를 만들어 위상을 관리합니다.

ex)
PlacesController.php

views
  - places
    - index.twig

assets
  - scss
    - places
      - index.scss

빌드 후
dist
  - css
    - places
      - index.css

NPM, Bower (based on mac)

$ brew install node
$ npm install -g bower

$ cd project_root_path
$ npm install
$ bower install

위의 과정이 되면 gulp 설치도 완료

Gulp 사용시 command not found 오류나는 경우

export PATH="./node_modules/.bin/:$PATH" 로 로컬 노드 모듈을 가장 먼저 찾도록 환경변수 설정으로 해결 가능

Gulp 사용 (non global, project local)

$ cd project root path

$ node_modules/gulp/bin/gulp.js build
(assets/js, assets/css 폴더의 소스를 빌드하여 static/dist/css, static/dist/js로 minified된 소스 저장)

$ node_modules/gulp/bin/gulp.js build:watch
(assets/js, assets/scss 폴더의 변경사항이 있을때 마다 빌드)

Gulp 사용 (global)

$ cd project root path

$ gulp build

$ gulp build:watch

Gulp 설치

npm install gulp -g