지금까지 작성한 자바스크립트 업무는 문법 검사, 병합, 압축 등 프로세스를 한데 묶어 처리합니다.
그래서 용도에 따라 추가하거나 제외하기가 불편합니다.
이러한 이유로 각 역할에 따라 업무를 분담하여 관리할 수 있도록 분리하는 것이 좋습니다.
익숙해지면 처음부터 분리해서 관리하는 습관을 기릅니다.
먼저 문법 검사(jshint) 코드 부분을 분리하여 js:hint라는 이름으로 업무를 생성합니다.
gulp.task('js:hint', function () {
gulp.src('src/js/libs/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish));
})
병합(concat) 코드 부분을 분리하여 js:concat이라는 이름으로 업무를 생성합니다.
gulp.task('js:concat', function () {
gulp.src('src/js/libs/**/*.js')
.pipe(concat('DOMlibrary.js'))
.pipe(gulp.dest('./dist'));
})
마지막으로 압축(uglify) 코드 부분을 분리하여 js:uglify 라는 이름으로 업무를 생성합니다.
gulp.task('js:uglify', function () {
gulp.src('dist/DOMlibrary.js')
.pipe(uglify())
.pipe(rename('DOMlibrary.min.js'))
.pipe(gulp.dest('./dist'));
})
즉, 원래 아래와 같던 코드들이,
const gulp = require('gulp');
const jshint = require('gulp-jshint');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
// javascript 파일들을 병합
gulp.task('scripts', function () {
gulp
// .src(['./src/script2.js', './src/*.js'])
// .pipe(concat('combined.js'))
// .pipe(gulp.dest('./dist'));
.src('src/js/libs/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish))
.pipe(concat('DOMlibrary.js'))
.pipe(gulp.dest('./dist'))
.pipe(uglify({
mangle: false,
output: {
comments: 'all' // true or 'all', 'some'
},
}))
.pipe(rename('DOMlibrary.min.js'))
.pipe(gulp.dest('./dist'))
});
// Gulp.task()를 사용해 기본(Default) 테스크 정의
gulp.task('default', function () {
// 콘솔(Console)에 메시지 기록(log)
console.log('gulp default 일이 수행되었습니다.');
});
아래와 같이 바뀌게 됩니다.
const gulp = require('gulp');
const stylish = require('jshint-stylish');
const jshint = require('gulp-jshint');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
// JS 문법 검사
gulp.task('js:hint', function () {
gulp.src('src/js/libs/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish));
})
// JS 병합
gulp.task('js:concat', function () {
gulp.src('src/js/libs/**/*.js')
.pipe(concat('DOMlibrary.js'))
.pipe(gulp.dest('./dist'));
})
// JS 압축
gulp.task('js:uglify', function () {
gulp.src('dist/DOMlibrary.js')
.pipe(uglify())
.pipe(rename('DOMlibrary.min.js'))
.pipe(gulp.dest('./dist'));
})
// Gulp.task()를 사용해 기본(Default) 테스크 정의
gulp.task('default', function () {
// 콘솔(Console)에 메시지 기록(log)
console.log('gulp default 일이 수행되었습니다.');
});
이렇게 각 역할에 따라 업무를 분리했으니 필요한 역할만 골라서 수행할 수 있습니다.
역할 분리된 업무 코드 내부를 찬찬히 살펴보면, 중복 사용하는 설정이 있습니다.
자바스크립트 파일 경로(path), 병합하여 생성될 파일 이름(Filename), 생성될 파일 목적지(Destination) 등이 중복 사용되었습니다.
이처럼 중복되거나 수정이 필요한 설정을 업무 코드에 방치하기보다는 손쉽게 관리할 수 있는 형태로 변경하는 것이 좋습니다.
파일 경로, 이름, 목적지 등을 업무 코드 몸체와 분리하여 관리할 수 있도록 다음처럼 변수 path에 객체를 참조하고 내부에 필요한 설정을 속성으로 하는 코드를 입력합니다.
var path = {
js: {
src: 'src/js/libs/**/*.js',
dest: 'dist/',
filename: 'DOMlibrary.js'
}
}
그리고 환경 설정 path 객체의 속성이 참조한 값에 해당하는 업무 코드 내부의 설정 값을 다음을 참고하여 속성에 접근 가능하도록 변경합니다.
위쪽 코드와 아래쪽 코드를 비교해보면 쉽게 이해할 수 있습니다.
const gulp = require('gulp');
const stylish = require('jshint-stylish');
const jshint = require('gulp-jshint');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const del = require('del');
const path = {
js: {
src: 'src/js/libs/**/*.js',
dest: 'dist/',
filename: 'DOMlibrary.js'
}
};
// 파일 삭제
gulp.task('clean', function () {
return del([path.js.dest]);
});
// JS 문법 검사
gulp.task('js:hint', function () {
return gulp.src(path.js.src)
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
// JS 병합
gulp.task('js:concat', function () {
return gulp.src(path.js.src)
.pipe(concat(path.js.filename))
.pipe(gulp.dest(path.js.dest));
});
// JS 압축
gulp.task('js:uglify', function () {
return gulp.src(path.js.dest + path.js.filename)
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(path.js.dest));
});
// JS 문법검사 > 병합 > 압축
gulp.task('scripts',
gulp.series('clean', 'js:hint', 'js:concat', 'js:uglify')
);
// Gulp.task()를 사용해 기본(Default) 테스크 정의
gulp.task('default', function () {
// 콘솔(Console)에 메시지 기록(log)
console.log('gulp default 일이 수행되었습니다.');
});
