gulp
Gulp 는 웹 개발의 스트리밍 빌드 시스템, Node.js와 npm 기반의 Task Runner 이다. 반복 가능한 특정 작업을 자동화 하기 위해 사용한다. 작업은 .js 파일에 정의되고 작업 이름으로 작성된 명령으로 실행된다. 자동화는 모든 Javascript 파일, 정적 이미지의 축소 및 복사. 파일이 변경될 때 작업, bundle, 유닛 테스트 등의 작업을 수행할 수 있다고 한다.
gulp 모듈 설치
gulp-cli는 단순히 gulp를 쉽게 실행하게 해주는 모듈이며 실제 동작하는 gulp 모듈은 프로젝트 폴더에 설치를 해야 합니다.
node 12버전부터는 ,gulp4.0.0 이상부터 호환됩니다.
npm install --save-dev gulp@3.9.1
gulpfile.js
gulpfile.js에 다음과 같은 텍스트를 입력한다.
var gulp = require('gulp');
gulp.task('copy',function(){
return gulp.src('*.txt')
.pipe(gulp.dest('test/'));
});
이제 gulp copy라는 명령어를 통해서 return gulp.src를 할 수 있음.. (명령프롬포트 상에서 가능)
gulp copy gulpfile.js와 같은 디렉토리 내의 txt라는 확장자를 가진 모든 파일을 test 디렉토리로 복사하는 task 입니다.
이와 같이 gulp의 한 흐름을 return하는 방식으로 task를 만들 수 있습니다.
gulp-sass 모듈 사용하기 libsass를 이용하여 node.js 방식으로 제작된 node-sass를 gulp로 이용할 수 있게 만든 gulp-sass를 이용하여 sass 파일을 css로 변환하는 task를 만들어 봅시다.
먼저 gulp-sass(https://github.com/dlmanning/gulp-sass) 모듈을 설치합니다.
npm install --save-dev gulp-sass
autoprefixer 모듈 사용하기
autoprefixer는 prefix가 필요한 css property에 자동으로 prefix를 붙여주는 모듈입니다. 먼저 모듈을 설치합니다. 사용할 모듈은 gulp-autoprefixer(https://github.com/sindresorhus/gulp-autoprefixer) 입니다.
npm install --save-dev gulp-autoprefixer
테스트를 위해서 다음과같은 scss 파일을 준비합니다.
.test_wrap {
text-align: left;
.test {
font-size: 12px;
transform: rotate(45deg);
}
}
이어서 gulpfile.js 에 변수를 추가하고 sass명령어를 수정합니다.
var autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(autoprefixer({ // autoprefixer 추가
browsers: ['chrome > 0', 'ie > 0', 'firefox > 0']
}))
.pipe(gulp.dest('css/'));
});
autoprefixer의 옵션은 테스트를 위해 넣은 것이며 실제 사용시에는 프로젝트에 맞는 옵션을 넣습니다.
gulp를 이용하여 sass task를 다시 실행한 후 동작을 확인합니다.
gulp sass 실행시키면 다음과같이 pre-fix가 붙어서 알아서 브라우저별 대응해줍니다.
.test_wrap {
text-align: left; }
.test_wrap .test {
font-size: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg); }
spritesmith를 이용하여 sprite를 만들어 보기
spritesmith는 sprite 조각 이미지를 하나의 판으로 만든 후 css, sass 등에서 사용하기 쉽도록 해주는 모듈입니다.
먼저 모듈을 설치합니다. 사용할 모듈은 gulp.spritesmith(https://github.com/twolfson/gulp.spritesmith) 입니다.
npm install --save-dev gulp.spritesmith
스프라이트를 만들고싶은 이미지 디렉토리를 설정합니다
var spritesmith = require('gulp.spritesmith');
gulp.task('sprite', function() {
var spriteData = gulp.src('sprites/*.png')
.pipe(spritesmith({
imgName: 'sprite.png',
cssName: '_sprite.scss',
imgPath: '../img/sprite.png'
}));
var imgStream = new Promise(function(resolve) {
spriteData.img
.pipe(gulp.dest('img/'))
.on('end',resolve);
});
var cssStream = new Promise(function(resolve) {
spriteData.css
.pipe(gulp.dest('scss/'))
.on('end',resolve);
});
return Promise.all([imgStream, cssStream]);
});
다음과 같이 생성된 sprite파일을 사용합니다.
@import 'sprite';
...
.icon_account {
@include sprite($account);
display: inline-block;
}
.icon_check_circle {
@include sprite($check_circle);
display: inline-block;
}
.icon_delete {
@include sprite($delete);
display: inline-block;
}
gulp sass명령어를 이용해서 다시 빌드하면 sprite이미지가 추가된걸 확인할 수 있습니다.
imgemin을 이용하여 sprite 이미지 용량 줄이기
npm install --save-dev gulp-imagemin vinyl-buffer
js에 다음과같이 추가해줍니다.
var imagemin = require('gulp-imagemin');
var buffer = require('vinyl-buffer');
var spritesmith = require('gulp.spritesmith');
gulp.task('sprite', function () {
var spriteData = gulp.src('sprites/*.png')
.pipe(spritesmith({
imgName: 'sprite.png',
cssName: '_sprite.scss',
imgPath: '../img/sprite.png'
}));
var imgStream = new Promise(function (resolve) {
spriteData.img
.pipe(buffer())
.pipe(imagemin())
.pipe(gulp.dest('img/'))
.on('end', resolve);
});
var cssStream = new Promise(function (resolve) {
spriteData.css
.pipe(gulp.dest('scss/'))
.on('end', resolve);
});
return Promise.all([imgStream, cssStream]);
});
gulp sprite를 이용하여 동작을 확인합니다
browser-sync와 watch 이용하기
browser-sync를 이용하면 sass 파일이 수정되어 css가 새로 생성될때 브라우저를 새로고침하지 않고 바로 적용된 화면을 보거나 html 파일이 수정되면 자동으로 새로고침을 시키는 등 작업 효율을 올릴 수 있습니다.
npm install --save-dev browser-sync
테스트용 index.html 을 생성합니다.
touch index.html
js파일을 수정합니다.
먼저 sass task가 동작된 후 css를 갱신할 수 있도록 sass task를 수정합니다.
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(autoprefixer({
browsers: ['chrome > 0', 'ie > 0', 'firefox > 0']
}))
.pipe(gulp.dest('css/'))
.pipe(browserSync.stream({match:'**/*.css'})); // broswer-sync로 전송 추가
});
그리고 다음을 추가합니다.
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
// 다음은 파일이 수정 될 경우 자동으로 인식하고 동작하도록 watch task를 만듭니다.
gulp.task('watch',['browser-sync'],function() {
gulp.watch('scss/*.scss',['sass']);
gulp.watch('*.html').on('change', browserSync.reload);
});
watch task를 주로 사용하기 편하도록 default task로 지정합니다.
gulp.task('default',['watch']);
gulp 4.0이상부터 문법이 바뀌었습니다.
BEFORE
gulp.task('start', ['run','build','watch']);
AFTER
gulp.task('start', gulp.series(['run','build','watch']));
gulp.task('watch',gulp.series(['browser-sync']),function() {
gulp.watch('scss/*.scss',['sass']);
gulp.watch('*.html').on('change', browserSync.reload);
});
gulp.task('default',gulp.series(['sass']));
전체 js코드
var gulp = require('gulp');
gulp.task('copy', function () {
return gulp.src('*.txt')
.pipe(gulp.dest('test/'));
});
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(autoprefixer({
browsers: ['chrome > 0', 'ie > 0', 'firefox > 0']
}))
.pipe(gulp.dest('css/'))
.pipe(browserSync.stream({match:'**/*.css'})); // broswer-sync로 전송 추가
});
var imagemin = require('gulp-imagemin');
var buffer = require('vinyl-buffer');
var spritesmith = require('gulp.spritesmith');
gulp.task('sprite', function () {
var spriteData = gulp.src('sprites/*.png')
.pipe(spritesmith({
imgName: 'sprite.png',
cssName: '_sprite.scss',
imgPath: '../img/sprite.png'
}));
var imgStream = new Promise(function (resolve) {
spriteData.img
.pipe(buffer())
.pipe(imagemin())
.pipe(gulp.dest('img/'))
.on('end', resolve);
});
var cssStream = new Promise(function (resolve) {
spriteData.css
.pipe(gulp.dest('scss/'))
.on('end', resolve);
});
return Promise.all([imgStream, cssStream]);
});
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
// 다음은 파일이 수정 될 경우 자동으로 인식하고 동작하도록 watch task를 만듭니다.
gulp.task('watch',gulp.series(['browser-sync']),function() {
gulp.watch('scss/*.scss',['sass']);
gulp.watch('*.html').on('change', browserSync.reload);
});
gulp.task('default',gulp.series(['sass']));
