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 를 처리해보자.