Kendo UI

1. util.css 만 전처리기 scss로 작업이 되어있기에, 수정을 하고자 하시면 sass를 우선 설치합니다.
2. sass를 설치하기 위해선 nodo.js기반의 패키지 관리자 npm을 사용하여 할 수 있습니다.
3. 터미널에서 명령어 npm install -g sass
4. css 폴더로 이동하여 컴파일 하여 css를 생성합니다. 그 css를 불러오면 됩니다.
5. sass -util.scss util.css
6. scss파일이 변경될때마다 자동으로 컴파일 하고자 하신다면 sass --warch util.scss:util.css 명령어를 사용하시면 자동 컴파일이 됩니다.

Node.js 가 필요합니다.

# npm 초기화
npm init -y

# gulp 설치
npm install gulp --save-dev

# gulp-file-include 설치
npm install gulp-file-include --save-dev
                                    

project/
│
├── src/
│   ├── admin/
│       ├── header.html
│       └── index.html
├── admin/
│   └── code/
├── gulpfile-admin.js
└── package.json
                                    

1. src/ 폴더: 소스 파일을 저장하는 폴더
2. admin/ 폴더: 빌드된 파일이 생성되는 폴더
3. gulpfile-admin.js gulp admin 설정 파일
4. code 코드를 볼 수 있게 만들어놓은 code 파일들 폴더

const gulp = require('gulp');
const fileInclude = require('gulp-file-include');

// prettier 모듈을 동적으로 import
// HTML 파일 병합 작업
async function fileIncludeTask() {
    const prettier = (await import('gulp-prettier')).default;

    return gulp.src(['src/admin/*.html', '!src/partials/**']) // header.html 제외
        .pipe(fileInclude({
            prefix: '@@', // 인클루드 명령어의 접두사 설정
            basepath: '@file' // 인클루드 파일의 경로 설정
        }))
        .pipe(prettier({ // HTML 코드 포맷팅 설정
            parser: 'html', // HTML 파서 사용
            tabWidth: 4, // 들여쓰기 크기 (2칸)
            useTabs: false, // 탭 대신 스페이스 사용
            singleQuote: true, // 속성값을 single quote로 사용
            htmlWhitespaceSensitivity: 'ignore', // 공백 민감도 무시
            endOfLine: 'auto', // 운영체제에 맞는 줄바꿈 설정
            printWidth: 200 // 줄 바꿈 할 폭 길이
        }))
        .pipe(gulp.dest('admin')); // 병합된 파일을 admin 폴더에 저장
}

// 기본 작업 설정
exports.default = gulp.series(fileIncludeTask);

                                            

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "admin": "gulp --gulpfile gulpfile-admin.js",
    "html": "gulp --gulpfile gulpfile-html.js",
    "podo": "gulp --gulpfile gulpfile-podosw.js"
  },
                                            

# 기존 gulp 전역 설치 버전 제거
npm uninstall -g gulp

# 기존 gulp와 관련된 로컬 패키지 제거
npm uninstall gulp --save-dev

# gulp 최신 버전 전역 설치
npm install -g gulp-cli

# gulp 최신 버전 로컬 설치
npm install gulp --save-dev
                                            

# Prettier는 코드 스타일을 일관되게 유지해주는 코드 포맷터입니다.
npm install --save-dev prettier gulp-prettier

# ESLint는 코드의 품질과 스타일을 점검해주는 도구로, 포맷팅도 가능합니다.
npm install --save-dev eslint gulp-eslint