npm을 활용해 패키지를 다루기 때문에 node.js가 설치되어 있어야 진행 가능하다.
설치
gulp
> npm i -g gulp-cli
> npm init
> npm i gulp -Dgulp 문서에 적힌 설치 방법이다. npm이 설치된 후, 위 코드를 순서대로 입력해 gulp를 설치한다. (npm init할 때 내용 입력을 요구하는데 엔터를 눌러 자동 설정할 수 있다.)
SASS (SCSS)
> npm i sass gulp-sass gulp-csso node-sass -Dgulp-csso는 css 코드를 최소화할 때 사용하고, 다른 패키지는 scss를 css로 변환할 때 사용한다.
Tailwindcss
> npm i gulp-postcss tailwindcss autoprefixer -Dtailwindcss 문서에서 요구하는 패키지를 설치해줘야 한다.
package 설정
package.json과 tailwind.config.js가 자동 생성되고, 추가로 gulpfile.js를 생성해주어야 한다.
// glupfile.js
// packages
const gulp = require("gulp");
const postCSS = require("gulp-postcss");
const sass = require("gulp-sass")(require("sass"));
const minify = require("gulp-csso");
sass.compiler = require("node-sass");
// file path
const path = {
style: {
scss: "assets/scss/*.scss",
css: "static/css",
},
html: {
index: "./index.html",
templates: "./templates/*.html",
},
};
// scss => css
gulp.task("css", function () {
return gulp
.src(path.style.scss)
.pipe(sass().on("error", sass.logError))
.pipe(postCSS([require("tailwindcss"), require("autoprefixer")]))
.pipe(minify())
.pipe(gulp.dest(path.style.css));
});
// keep 'watch'
gulp.task("watch", function () {
gulp.watch(path.html.index, gulp.series["css"]);
gulp.watch(path.html.templates, gulp.series["css"]);
});gulp는 자동화할 동작을 task라는 단위로 나누어 생성한다. "css"라는 이름의 task는 scss와 tailwindcss를 css3로 변환하고 css를 최소화하는 동작을 한다. "watch"라는 이름의 task는 html 파일이 수정될 때마다 "css" task를 실행하도록 대기하도록 설정되어 있다. 이렇게 설정된 task는"gulp 이름" 형태로 실행할 수 있다. src나 dest와 같은 함수는 gulp에서 제공하는 API이다.
> gulp 이름
// package.json
{
"name": "gulpSetting",
"version": "1.0.0",
"description": "",
"devDependencies": {
"autoprefixer": "^10.4.2",
"gulp": "^4.0.2",
"gulp-csso": "^4.0.1",
"gulp-postcss": "^9.0.1",
"gulp-sass": "^5.1.0",
"tailwindcss": "^3.0.18",
"node-sass": "^7.0.1",
"sass": "^1.49.0"
}
}필요 없는 내용을 삭제하였고, 사용한 패키지의 버전은 위와 같다.
// tailwind.config.js
module.exports = {
content: ["./index.html", "./templates/*.html"],
theme: {
extend: {},
},
plugins: [],
};tailwind.config에는 tailwindcss를 사용할 HTML 파일을 등록해주어야 한다. content 내부에 파일이 포함된 경로를 추가한다.
실행
경로가 등록되어 있는 index.html을 생성하고 테스트해보았다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- css file -->
<link rel="stylesheet" href="./static/css/styles.css">
<title>GULP</title>
</head>
<body>
<div class="w-32"> <!-- tailwind css -->
<img src="./assets/img/sample.jpg">
</div>
</body>
</html>scss가 변환된 css 파일의 경로를 등록해준다. 테스트를 위해 tailwindcss에서 사용하는 넓이 설정을 사용했다.
> gulp css위 명령어를 입력해 실행해 보면 설정한 위치에 css 파일이 생성되고, tailwind의 기본 설정과 .w-32에 대한 설정이 생긴 것을 볼 수 있다.
/* static/styles.css */
/* 생략 */
.w-32{width:8rem}css 코드가 정렬되지 않고 한 줄로 작성된 이유는 css 최소화 작업을 했기 때문이다.
> gulp watch위 명령어를 사용하면 gulp가 종료되지 않고 대기하면서 html 파일이 변경될 때마다 css 코드를 수정하는 것을 볼 수 있다.
gulp는 scss 외에도 이미지 압축(gulp-image)나 TS 변환(gulp-typescript)과 같은 작업도 자동화해 수행할 수 있다.