
gulp란 프론트엔드 자동화 빌드 툴이다 흔히 webpack이 하나의 파일로 모아주는 번들링 툴이라면 gulp는 테스크 실행형이다
프론트 엔드 개발이 목적이 아니라면 gulp를 이용하는 것이 효율적이라 생각한다
gulp 설치는 https://webpi.tistory.com/544 여기를 참조하고
gulp를 사용함에 있어 추천하는 모듈들을 알아보자
gulp-notify - 오류 처리 할 때 메세지로 보여줄 수 있음
gulp-plumber - 스트림에 문제가 있을 경우 파이프를 해제하고 상세 에러 처리를 가능
gulp-debug - 파이프라인을 통해 실행되는 파일을 확인하기 위해 파일 스트림을 디버그
gulp-dart-sass - Sass의 공식 구현체 중 하나로서, 이전 gulp sass보다 더욱 빠르고 안정적이며 기능이 향상
gulp-version-number - HTML에서 js/css/image에 버전 번호 추가
gulp-autoprefixer - CSS 속성의 벤더 프리픽스(vendor prefix)를 사용자의 브라우저에 따라 자동으로 붙여줌
gulp-file-include - 파일을 include 할 수 있게 해줌
gulp-uglify - 자바스크립트 압축
browser-sync - 여러 브라우저에서 테스트하는것을 도와주는 동기화 기능
이정도만 써도 정말 많은 시간과 비용을 효율적으로 사용할 수 있다
npm을 통해 설치할 수 있으면 필요에 따라 더 많은 모듈을 이용하여 업무에 도움을 줄 수 있다
gulpfile.js에 선언 후 사용 가능하다
const { src, dest, lastRun, watch, series, parallel } = require('gulp');
const notify = require('gulp-notify');
const plumber = require('gulp-plumber');
const debug = require('gulp-debug');
const dartSass = require('gulp-dart-sass');
const version = require('gulp-version-number');
const autoprefixer = require('gulp-autoprefixer');
const fileinclude = require('gulp-file-include');
const uglify = require('gulp-uglify');
const browserSync = require('browser-sync').create();
const paths = {
scss: {
src: 'src/scss/**/*.scss',
temp: 'temp/css',
dest: 'public/css'
}
}
function scss() {
return src(paths.scss.src, { sourcemaps: true }, { since: lastRun(scss) })
.pipe(plumber({
errorHandler: notify.onError('Error: <%= error.message %>')
}))
.pipe(dartSass({
outputStyle: 'compressed'
}))
.pipe(autoprefixer({
cascade: true
}))
.pipe(dest(paths.scss.temp, { sourcemaps: './maps' }))
.pipe(debug({title: 'scss dest:'}));
}
function browserSyncServer(cb){
browserSync.init({
ui: {
port: 1010,
},
port: 1009,
server: {
baseDir: './temp'
}
});
cb();
}
function watchTask(){
watch(paths.scss.src, series(scss, browserSyncReload));
}
function browserSyncReload(cb){
browserSync.reload();
cb();
}
exports.default = series(
scss,
browserSyncServer,
watchTask,
);
반응형
'Web story > Web' 카테고리의 다른 글
접근성 탭메뉴 (0) | 2023.06.30 |
---|---|
img의 srcset과 sizes (0) | 2020.10.13 |
gulp를 이용한 sass 컴파일 (0) | 2020.10.12 |
웹사이트 퍼포먼스 증가시키기 (0) | 2016.10.07 |
Noto Sans KR (Korean) - Google Fonts : Early Access (0) | 2015.09.19 |