Build Tools
Build Tools
Fomantic UI에서 Gulp를 사용해 테마를 빌드하고, CSS/JS를 생성하며, 맞춤형 배포판을 만드는 방법을 설명하는 문서예요. 빌드 도구의 목적과 주요 명령, 설정 파일들을 다룹니다.
출처: Build Tools
본문
Fomantic UI와 함께 Gulp 사용하기
개요 (Overview)
30초 설명
Fomantic UI를 다운로드해 설치 폴더로 이동한 다음 gulp 명령을 실행하면 돼요.
npx gulp build
npx gulp watch
왜 빌드 도구인가요?
Fomantic UI가 Gulp를 사용하는 이유는 여러 가지예요:
Process LESS files with theming variables
Add vendor prefixes for supported browsers with autoprefixer
Watch file changes and rebuild the necessary files when adjusting themes
Automatically process asset paths, so that minified and concatenated releases can exist in different directories
Allow custom builds with only the required components for your site
Allow advanced usage like Right-To-Left (RTL) languages using RTLCSS
- 테마 변수로 LESS 파일을 처리
- autoprefixer로 지원 브라우저에 vendor prefix 추가
- 파일 변경을 감시하고 테마를 조정할 때 필요한 파일을 다시 빌드
- asset 경로를 자동 처리하여 minified·concatenated 릴리즈를 서로 다른 디렉토리에 존재시킴
- 사이트에 필요한 컴포넌트만 담은 커스텀 빌드 허용
- RTLCSS를 사용한 RTL 언어 같은 고급 사용 허용
Fomantic UI 프로젝트는 다음과 같은 폴더 구조를 포함해요.
Folder Structure
src
site
Your site's theme
themes
default
Default theme
packaged-theme
Additional themes
theme.config
Config file for setting packaged themes
dist
Compiled CSS and JS files
components
Individual component CSS and JS
semantic.css
concatenated release
semantic.js
concatenated release
semantic.json
Contains build settings for gulp
Gulp 명령
다음은 사용 가능한 모든 gulp 명령의 목록이에요.
Command
Description
install
Asks install questions to setup semantic.json
watch (default)
Watches for changes in source files, and builds file on change
build
Build all files
clean
Cleans dist/ folder
version
Outputs current version
build-javascript
Build JS files
build-css
Build CSS files
build-assets
Build assets files
serve-docs
Serves files to local docs instance
build-docs
Builds files to docs folder
install— semantic.json을 설정하기 위한 설치 질문watch(기본) — 소스 파일 변경을 감시하고 변경 시 빌드build— 모든 파일 빌드clean— dist/ 폴더 정리version— 현재 버전 출력build-javascript— JS 파일 빌드build-css— CSS 파일 빌드build-assets— asset 파일 빌드serve-docs— 로컬 문서 인스턴스에 파일 서빙build-docs— 문서 폴더에 파일 빌드
설정 파일 (Configuration Files)
semantic.json
빌드 도구 설정은 semantic.json이라는 특수 파일에 저장돼요. 이 파일은 fomantic 설치 폴더의 상위 폴더에 해당하는 어떤 폴더에도 포함시킬 수 있어요.
{
// base path added to all other paths specified in "paths"
"base": "",
// current version of Fomantic UI
"version": "2.9.4",
// output fileName (without extension) for packaged files (.min, .css, .js will be added automatically)
"fileName": "semantic",
// Whether to include the version string to the released files. Default: false
"includeVersionInFileName": false,
// If includeVersionInFileName is true, this revision string will also be added to the name of the released file
"revision": "",
"paths": {
"source": {
// source theme.config
"config" : "src/theme.config",
// source definition folder
"definitions" : "src/definitions/",
// source site theme
"site" : "src/site/",
// source themes folder
"themes" : "src/themes/"
},
"output": {
// packaged source (both compressed/uncompressed)
"packaged" : "dist/",
// uncompressed source
"uncompressed" : "dist/components/",
// compressed source
"compressed" : "dist/components/",
// output directory for theme assets
"themes" : "dist/themes/"
},
// directory for gulp clean task
"clean" : "dist/"
},
// when set to an integer permission, will set dist files with this file permission
"permission" : false,
// whether gulp watch/build should run RTLCSS
"rtl": false,
// will only include components with these names
"components": [
"reset",
"site",
"button",
"container",
"divider",
"flag",
"header",
"icon",
"image",
"input",
"label",
"list",
"loader",
"rail",
"reveal",
"segment",
"step",
"breadcrumb",
"form",
"grid",
"menu",
"message",
"table",
"ad",
"card",
"comment",
"feed",
"item",
"statistic",
"accordion",
"checkbox",
"dimmer",
"dropdown",
"embed",
"modal",
"nag",
"popup",
"progress",
"rating",
"search",
"shape",
"sidebar",
"sticky",
"tab",
"transition",
"api",
"state",
"visibility",
"text",
"calendar",
"slider",
"toast",
"emoji"
],
// generate .css/.js files for individual components (under /dist/components), but exclude them from semantic.css and semantic.js
"individuals": [
"form",
"modal",
"step",
"emoji"
],
// Use custom postcss/autoprefixer options object
"prefix": {},
// Use a custom Banner on each generated js/css file
"banner": "/* A custom central FUI Banner !!!\n Awesome Release! \n*/",
// strip all top headers from each component inside the concatenated, non-minified, semantic.css/js
"stripHeaders": true,
// Custom placeholder values inside banner
"header": {
"year": "ALWAYS 2099 :)",
"title": "Fomantic-UI Pro",
"repository": "Not yet available",
"url": "https://fomantic-ui.com/pro"
},
// whether to include special project maintainer tasks
"admin": false
}
base—paths에 지정된 다른 모든 경로에 더해지는 기준 경로version— 현재 Fomantic UI 버전fileName— 패키징 파일의 출력 파일명(확장자 제외,.min,.css,.js자동 추가)includeVersionInFileName— 릴리즈 파일에 버전 문자열을 포함할지 여부 (기본값: false)revision—includeVersionInFileName이 true일 때 릴리즈 파일명에 추가될 개정 문자열paths.source.config— 소스 theme.configpaths.source.definitions— 소스 정의 폴더paths.source.site— 소스 site 테마paths.source.themes— 소스 themes 폴더paths.output.packaged— 패키징 소스(압축/비압축 모두)paths.output.uncompressed— 비압축 소스paths.output.compressed— 압축 소스paths.output.themes— 테마 asset 출력 디렉토리paths.clean— gulp clean 태스크용 디렉토리permission— 정수 권한으로 설정하면 dist 파일에 이 파일 권한을 부여rtl— gulp watch/build가 RTLCSS를 실행할지 여부components— 이 이름들을 가진 컴포넌트만 포함individuals— 개별 컴포넌트용.css/.js파일 생성(/dist/components아래), 단 semantic.css와 semantic.js에는 제외prefix— 커스텀 postcss/autoprefixer 옵션 객체banner— 생성되는 각 js/css 파일에 사용할 커스텀 배너stripHeaders— 연결된 비압축 semantic.css/js 안에서 각 컴포넌트의 상단 헤더 제거header— banner 안의 커스텀 placeholder 값들admin— 특수 프로젝트 유지보수 태스크 포함 여부
variation.variables
특정 컴포넌트의 변형을 비활성화해서 필요한 기능만 담은 CSS 파일을 생성할 수 있어요. 이렇게 하면 커스텀 배포 파일 크기를 훨씬 줄일 수 있어요.
// The defaults enable everything
// In a custom theme you could only disable/adjust the variables you don't need in your own {component}.variables
@variationButtonTertiary: false; // don't compile tertiary button styles
@variationIconColors: red, green, batman; // only compile red and green as icon color options
@variationImageSizes: small, huge; // only compile small and huge image sizes
@variationSegmentColors: false; // don't compile any segment color styles
@variationBreadcrumbSizes: false; // don't compile any breadcrumb size styles
- 기본값은 모든 것을 활성화해요.
- 커스텀 테마에서는 자신의
{component}.variables에서 필요 없는 변수만 비활성화/조정하면 돼요. @variationButtonTertiary: false;— tertiary 버튼 스타일 컴파일 안 함@variationIconColors: red, green, batman;— 아이콘 색 옵션으로 red, green만 컴파일@variationImageSizes: small, huge;— small, huge 이미지 크기만 컴파일@variationSegmentColors: false;— 모든 세그먼트 색 스타일 컴파일 안 함@variationBreadcrumbSizes: false;— 모든 breadcrumb 크기 스타일 컴파일 안 함
colors.less
커스텀 colors.less 파일에서 단일 LESS Map @colors를 조정해 전역 색상 팔레트 전체를 수정/정의할 수 있어요.
// This example would only provide two custom colors "batman", "spiderman"
// Your custom compiled build will contain all colorable components
// like "ui batman button" or "ui spiderman label"
@colors: {
@batman: {
color : @white;
light : @grey;
border : @grey;
background : @black;
header : #222222;
boxShadow : @greyBoxShadow;
boxFloatShadow : @greyBoxFloatingShadow;
text : @white;
lightText : @white;
hoverText : @grey;
focus : @white;
lightFocus : @grey;
down : @white;
lightDown : @grey;
active : #888866;
lightActive : #888822;
shadow : @greyTextShadow;
lightShadow : @lightGreyTextShadow;
hover : @grey;
lightHover : @grey;
ribbon : @greyRibbonShadow;
invertedRibbon : @greyInvertedRibbonShadow;
tertiary : @greyTertiaryColor;
tertiaryHover : @greyTertiaryColorHover;
tertiaryFocus : @greyTertiaryColorFocus;
tertiaryActive : @greyTertiaryColorActive;
bright : @white;
brightHover : @grey;
isDark : false; // 'true' will adjust light colors on non inverted variants
isVeryDark : false; // 'true' will use black/white in certain color/background situations
};
@spiderman: {
color : @red;
light : @lightRed;
border : @lightRed;
... // and all the other properties as above
};
};
// Your final custom compiled build will offer form components like
// "ui excited input" or ".ui.form > .excited.message"
@formStates: {
@excited: {
color: #880000;
background: #ffcccc;
borderColor: @red;
borderRadius: 10px;
boxShadow: @inputErrorBoxShadow;
cornerLabelColor: @white;
labelBackground: @lightRed;
dropdownLabelColor: @red;
dropdownLabelBackground: @lightRed;
dropdownHoverBackground: @lightRed;
dropdownSelectedBackground: @lightRed;
dropdownActiveBackground: @lightRed;
inputAutoFillBackground: @lightRed;
inputAutoFillBorderColor: @red
inputFocusBackground: @lightRed;
inputFocusColor: @red;
inputFocusBorderColor: #440000;
inputFocusBoxShadow: @inputErrorFocusBoxShadow;
inputPlaceholderColor: #660000;
inputPlaceholderFocusColor: #550000;
transparentBackground: @white;
transparentColor: @red;
};
};
메인 css/js 파일에서 컴포넌트 제외하기
기본적으로 semantic.json에 나열된 모든 컴포넌트는 빌드 시 semantic.css와 semantic.js에 추가돼요. 하지만 모든 페이지에 포함할 필요가 없는 컴포넌트도 있어요. 메인 asset의 파일 크기를 줄이려면 이런 컴포넌트를 분리하고 HTML에서 개별적으로 참조하는 것이 좋아요.
theme.config
LESS는 theme.config라는 특수 설정 파일을 사용해 각 컴포넌트가 어떤 테마를 사용할지 지정해요. 이 파일을 아직 생성하지 않았다면 빌드 도구를 실행할 때 오류 메시지를 받게 돼요.
Gulp 태스크 임포트하기
커스텀 Gulpfile에 개별 gulp 태스크를 임포트하는 예시는 recipes 섹션을 참고하세요.
자동 설치 & 지속적 통합 (Auto-Install & Continuous Integration)
2.2에서 CLI나 다른 자동화된 배포를 더 원활하게 다루도록 semantic.json에 새 설정을 추가했어요.
더 알아보기
빌드 도구는 Fomantic UI의 테마와 배포물을 다루는 핵심이에요. 커스텀 파이프라인, 단일 컴포넌트, LESS 임포트 등 더 깊은 활용은 Recipes 문서에서 확인하세요.