CoCoCoCode

개요 image, html 등 그대로 복사해줘야 할 파일들을 복사해 주는 Copy 태스트를 추가하고, Watch 태스크에 추가하여 변경시 자동으로 복사되도록 해보자. 방법 # Copy 패키지 추가. 1. package.json 파일 수정.{ "name": "CAL_Website_v2", "version": "0.1.0", "description": "used Bootstrap, greater then ie8", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-watch": "^1.0.0", "grunt-contrib-connect": "^1.0.1", "grunt-contrib-copy": "~..

개요 Less 파일을 하나의 CSS로 생성하고 축소하는 컴파일 과정을 Grunt로 자동화 하고 http서버를 구동하자.livereload를 설정하면 소스 코드가 변경시 자동으로 브라우저가 refresh되도록 할 수 있다. 방법 # less, connect 패키지 설치. 1. package.json 파일 수정.{ "name": "CAL_Website_v2", "version": "0.1.0", "description": "used Bootstrap, greater then ie8", "dependencies": { "grunt": "~0.4.5", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-watch": "^1.0.0", "grunt-contrib-connect..

개요 파일이 수정되면 자동으로 이를 감지하고 특정 task를 수행하도록 할 수 있는 watch 태크스를 추가하고, 여러 태스크를 함께 실행할 수 있는 registerTask 적용. 방법 # watch 태스크 설정 추가. 1. Gruntfile.js에 아래 코드 추가. # watch 태스크 실행 1. command 창에 grunt watch 실행. # 테스트 1. plugins.js 파일에 아래 코드 입력. 2. command 메시지 확인. 3. 생성된 파일에서 변경여부 확인. # registerTask 추가 1. task 생성. 2. grunt default 또는 grunt 로 실행. 참고 신규로 추가되는 파일은 감지하지 못함. watch 태스크를 ctrl + c 로 중지 후 다시 실행해야 함.

개요 그런트의 구조와 동작을 정의하는 Gruntfile.js 파일을 만들고 자바스크립트 파일을 연결하고 축소화하는 uglify를 설정하고 실행해 본다. 방법 # Gruntfile.js 생성. 1. root 폴더에 새로운 파일을 만들어 아래 코드 입력. 2. Gruntfile.js 파일로 저장. # Uglify 실행. 1. command 창에 grunt ugilfy 실행. 2. dist/js 폴더 아래 생성된 js파일 확인. 끝.

개요 개발에 필요한 기본환경을 위해 폴더의 구조를 잡고 패키지들을 설치한다. bower를 쓰지 않는 가장 기본적인 방법으로 최소한의 패키지만 사용. 방법 # 폴더 생성. # package.json 생성 1. root 폴더에 새로운 파일을 만들어 아래 코드를 입력. ( npm init 명령어를 이용해서 생성 가능 ) 2. package.json 파일로 저장. # package 설치 1. command 창 오픈 후 npm install 실행. 2. node_modules 폴더 아래 설치된 패키지 확인. 참고 package.json 파일에서 devDependencies 를 입력하지 않고, command창에서 'npm install --save-dev 패키지명' 를 실행하여 설치와 설정을 같이 할 수도 있음.

개요 그런트를 사용하기 위해 필요한 노드JS와 NPM, 그런트를 설치한다. 방법 # 노드와 NPM 설치. # CLI ( command-Line Interface ) 관리자 권한으로 오픈. # npm install - g grunt-cli 실행 ( 유닉스 기반은 sudo를 앞에 붙임 ) 끝.