gulp.watch(global, function) - 전역변수의 변경사항이 생겼을 때 호출할 함수 정의
gulp.src(global) - 읽어올 위치
gulp.dest(folder) - 작성된 파일을 놓을 위치
gulp와 파일 연결하기(Concatenating)
gulp만 설치한다고 끝나는 것은 아니다. gulp 가 동작할 수 있도록 플러그인을 설치하고 gulpfile 에 태스크를 추가해야 한다. gulp-concat 플러그인이 필요하다.
$ npm install --save-dev gulp-concat
를 실행하고 나면 package.json 에 "gulp-concat": "^2.6.0" 가 추가된다.
이제 gulpfile 에 필요한 테스크를 추가한다.
// Include gulp
var gulp = require('gulp');
// Include plugins
var concat = require('gulp-concat');
//Concatenate JS File: src/js 에 있는 파일들을 main.js 로 연결
gulp.task('scripts', function() {
return gulp.src('src/js/*.js')
.pipe(concat('honeymon.js'))
.pipe(gulp.dest('build/js'));
});
// Default Task
gulp.task('default', ['scripts']);
gulp-concat 플러그인 설정을 포함하고 gulp.task 를 사용하여 기본 테스크에 script 를 추가했다. 이 태스크는 3단계 과정으로 처리가 된다:
gulp.src 에서 정의한 src/js 디렉토리에 있는 확장자 js 를 연결한다.
main.js 로 연결한다.
build/js 디렉토리에 main.js 파일을 밀어 넣는다.
gulp 를 이용한 JS 최소화하기
보통 자바스크립트를 배포할 때 최소화(Minify)하는 과정을 거치는데 gulp 에서는 이를 처리하는 플러그인이 있다. 그리고 나서 파일명 접미사로 .min 를 붙이는 rename 플러그인도 함께 설치한다.
$ npm install --save-dev gulp-unglify gulp-renmae
이제 gulpfile.js 에 scripts 태스크를 수정한다.
// Include gulp
var gulp = require('gulp');
// Include plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
//Concatenate JS File: src/js 에 있는 파일들을 main.js 로 연결
gulp.task('scripts', function () {
return gulp.src('src/js/*.js')
.pipe(concat('honeymon.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js'));
});
gulp 를 이용한 css 처리
gulp 를 이용해서 sass 파일을 컴파일하여 css 를 생성하는 태스크를 추가한다.
루비의 공식적인 sass 컴파일러를 설치한다.
$ npm install --save-dev gulp-ruby-sass
이제 gulpfile.js 에 sass 태스크를 수정한다.
// Include gulp
var gulp = require('gulp');
// Include plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
//Concatenate JS File: src/js 에 있는 파일들을 main.js 로 연결
gulp.task('scripts', function () {
return gulp.src('src/js/*.js')
.pipe(concat('honeymon.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});
//Compile SASS
gulp.task('sass', function () {
sass('src/scss/style.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/css'));
sass('src/scss/honeymon/*.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/css/honeymon'));
});
// Default Task
gulp.task('default', ['scripts', 'sass']);
프로젝트에 사용하는 이미지 이동
이제 gulp 에서 많은 시간이 걸리는 작업이 남았다. 스크립트나 스타일시트 작업보다 더 오래 걸릴 것이다. gulp-imagemin 와 gulp-cache 를 이용해서 이미지를 최적화하는 작업을 진행한다.
$ npm install --save-dev gulp-imagemin gulp-cache
gulp-imagemin 와 gulp-cache 에 대한 의존성을 추가하고 image 태스크를 수정하자.
// Include gulp
var gulp = require('gulp');
// Include plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
//Concatenate JS File: src/js 에 있는 파일들을 main.js 로 연결
gulp.task('scripts', function () {
return gulp.src('src/js/*.js')
.pipe(concat('honeymon.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});
//Move image files
gulp.task('images', function() {
return gulp.src(srcPath + '/img/**/*')
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest(buildPath + 'img'));
});
//Compile SASS
gulp.task('sass', function () {
sass('src/scss/style.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/css'));
sass('src/scss/honeymon/*.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/css/honeymon'));
});
//Build JavaScript, Images, Sass
gulp.task('build', ['scripts', 'images', 'sass']);
// Default Task
gulp.task('default', ['build']);
실제로 많이 걸린다..
➜ test-front-web git:(master) ✗ gulp
[14:27:52] Using gulpfile ~/workspace/honeymon/test-front-web/gulpfile.js
[14:27:52] Starting 'scripts'...
[14:27:52] Starting 'images'...
[14:27:52] Starting 'sass'...
[14:27:52] Finished 'sass' after 19 ms
[14:27:52] Finished 'scripts' after 147 ms
[14:27:54] Finished 'images' after 2.18 s
[14:27:54] Starting 'build'...
[14:27:54] Finished 'build' after 1.61 μs
[14:27:54] Starting 'default'...
[14:27:54] Finished 'default' after 1.5 μs
프로젝트에서 작성한 html 을 이동시키자.
html 을 옮기는 과정에서는 2가지 작업을 해야한다.
src html 에서 보고 있는 *.css 와 *.js 의 경로를 변경해야 한다.
build 로 이동시키면서 빌드 컴파일러된 *.css 와 *.js 를 보도록 변경해야 한다.
우선은 src 에서 build 로 이동처리를 먼저 하자.
// Include gulp
var gulp = require('gulp');
// Include plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
var buildPath = 'build/'
var srcPath = 'src/'
//Concatenate JS File: src/js 에 있는 파일들을 main.js 로 연결
gulp.task('scripts', function () {
return gulp.src(srcPath + 'js/*.js')
.pipe(concat('honeymon.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(buildPath + 'js'));
});
//Move image files
gulp.task('images', function() {
gulp.src(srcPath + 'img')
.pipe(gulp.dest(buildPath + 'img'));
});
//Compile SASS
gulp.task('sass', function () {
sass(srcPath + 'scss/style.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(buildPath + 'css'));
sass(srcPath + 'scss/honeymon/*.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(buildPath + 'css/honeymon'));
});
gulp.task('html-copy', function() {
gulp.src([srcPath + 'index.html', srcPath + 'sample.html'])
.pipe(gulp.dest(buildPath))
gulp.src(srcPath + 'tx/*.html')
.pipe(gulp.dest(buildPath + '/tx'))
});
//Build JavaScript, Images, Sass
gulp.task('build', ['scripts', 'images', 'sass', 'html-copy']);
// Default Task
gulp.task('default', ['build']);
이제 gulp-html-replace 플러그인을 설치하고 html 을 옮기면서 stylesheet 와 script 를 처리해보자.
Bower, A package manager for the web Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you. > 최근의 웹사이트는 다양한 것들(프레임워크, 라이브러리, 자원, 유틸리티 그리고 레인보우(!?))로 만들어진다. Bower는 이 모든 것을 관리한다.
Bower는 찾고자 하는 것들을 각지에서 탐색하고, 다운로드하고, 설치하고 붙인다. Bower는bower.json매니페스트 파일을 기준으로 패키지들을 추적관리한다. 어떤 패키지를 사용할지는 사용자에게 달려있다.
Bower는 프론트엔드에 최적화되어 있다. Bower는 간단한 의존성구조, 각 패키지별 대표버전만을 요구하며, 페이지로드를 최소한으로 감소시킨다.
최근에 나는 프론트쪽을 거의 다루지 않았다. 백엔드쪽에서 프론트에 필요한 API만 만들어서 추가하는 쪽으로 활용했었다. 그래서 툴에 별로 관심을 두지 않아서 Aptna를 이용했었다. 그런데, 운영체제를 자주 밀어버리는 편(우분투를 사용하다보니 이게 일상이다)이라 설치가 가벼운 녀석을 찾았다. 그러다가 우연히 Brackets를 발견했다. 데비안 계열의 운영체제까지 지원한다. 오우.
- 공식사이트: http://brackets.io/
- Github: https://github.com/adobe/brackets
Adobe에서 내놓은 웹플랫폼 개발툴IDE Brackets([])를 소개한다.
모양은 이렇다.
모습도 깔끔하다. node를 기반으로 해서 동작하는 녀석으로 보인다.
현재 36번째 릴리즈버전이 출시되었고, 지속적으로 출시가 될 것으로 보인다. 쓸만한 플러그인들도 많이 제공한다.
한글화도 잘 되어 있다.
JCO에서 발표했던 REST API에 대한 백엔드를 직접 활용하는 예제를 작성하고 있는 중이다.
실시간 미리보기 기능(현재는 크롬chrome 브라우저에 대해서만 지원)도 지원(Ctrl + Alt + P(review))한다. 코드를 수정 후에 저장하면 바로 브라우저에 갱신신호가 가면서 다시 읽는 것으로 보인다. 아마... 크롬 내부의 API겠지?
태그에서 지정한 class에 대한 CSS 파일도 바로호출이 가능하며,
선택된 class에 적용대상을 미리보기로 호출된 브라우저에 표시도 해준다.
사용자 폴더에 설정파일인 brackets.json 을 수정하여 환경을 설정할 수 있다(지만 귀찮다). 나름 중요한 탭형식과 사이즈 조정은 편집기 오른쪽 하단에 입력하여 설정할 수 있다. 기본은 '스페이스, 크기 4'로 설정되어 있는데, 프론트 쪽에서는 '스페이스 크기 2'를 선호하기에 바꿔봤다. 그러면 brackets.json에 설정내용이 추가된다.
ㅡ_-); 이때 이야기했던 28일되면 VM 인스턴스 내릴거에요.
라고 한 이야기가 거짓말이 되었다. 두둥. AngularJS 공부도 할겸해서 예제를 만들고 있다. 코드만 보여줘서는 의미가 많이 약해질 것이라는 개인적인 욕심이 어울어져 이런 일을 벌이게 되었다. 흠… 지금 예제가 돌고 있는 서버에 CI를 설치해둘까 하는 생각이 들었는데… 문득, OpenShift에서 Jenkins 기어만들고 거기서 빌드하도록 만들면 되겠구나…!! 하는 생각이 든다. ㅎㅎ 돈이 굳었다. ㅡ_-);;
var demoApp = angular.module('demoApp', []);
// What's the Array for?
// Module that demoApp depends on ->[]
var demoApp = angular.module('demoApp', ['helperModule']);
Creating a Controller in a module
var demoApp = angular.module('demoApp', []); //define a module
demoApp.controller('SimpleController', function($scope) { // define a controller
$scope.customers = [
//...
]
});
