gulp를 이용한 sass 컴파일
1. node.js 설치 (ruby가 아닌 node를 이용함)
2. 프로젝트 폴더의 커맨드 창(cmd) or shell에서 npm init 실행으로 package.json 생성
3. npm install --global gulp-cli 글로벌 설치
4. npm install --save-dev gulp 로컬 설치 (--save-dev 옵션으로 개발과정으로만 사용)
5. npm i gulp-sass sass 모듈 설치
6. gulpfile.js 생성후 코드 작성 (gulpfile 작성은 gulp 사이트에서 확인)
7. 컴파일 태스크 작성
const path = {
scss: "src/scss/**/*.scss",
};
const tmp = {
css: "tmp/css",
};
function scssDevTask(){
return src(path.scss, { sourcemaps: true }, { since: lastRun(scssDevTask) })
.pipe(sass({outputStyle: 'compact'}))
.pipe(dest(tmp.css, { sourcemaps: './maps' }));
}
8. watch 태스크 및 컴파일 실행 등록
function watchTask(){
watch(path.scss, series(scssDevTask));
}
exports.default = series(
scssDevTask,
);
9. gulp 실행후 컴파일
반응형
'Web story > Web' 카테고리의 다른 글
접근성 탭메뉴 (0) | 2023.06.30 |
---|---|
img의 srcset과 sizes (0) | 2020.10.13 |
웹사이트 퍼포먼스 증가시키기 (0) | 2016.10.07 |
Noto Sans KR (Korean) - Google Fonts : Early Access (0) | 2015.09.19 |
opera 11 정식버젼 공개 (0) | 2010.12.22 |