sass(scss) 가져오기 [glop을 통해 자동 컴파일]

자바 프로젝트에서 scss 기법을 사용하고 싶어서 glop으로 자동 컴파일했습니다.
카탈로그

이른사스

glop은

glyp 가져오기 단계

설치 glop

gulpfile.js의 제작

watch에서 자동 실행

완성된glopfile.js

마지막

Sass

이것은 읽기와 쓰기에 편리한 스타일시트입니다.

S…Syntactically（文法的に）
a…Awesome（素晴らしい）
ss…StyleSheet（スタイルシート）

그런 뜻인 것 같아요.아워썸 같은 거 있으면 좋더라.
Sass에는 sass기법과 scss기법이 있다.

이번에는 css와 비슷한 scss를 사용했습니다.
자세한 설명은 여기 있습니다.
https://udemy.benesse.co.jp/design/web-design/sass.html

무엇이gulp입니까

간단하게 말하면, 이것은 자동으로 처리할 수 있는 도구다.
다른 유사한 도구가 있는 것 같지만, 처리가 매우 빠르다.특징은 js의 포장입니다.
이번에는 glop을 통해sass(scss)를 css로 컴파일하는 처리 자동화입니다.
자세한 설명은 여기 있습니다.
https://www.pc-koubou.jp/magazine/38196

gulp 가져오기 단계

glop 설치

프로젝트 루트 디렉토리에서 다음을 수행합니다.

npm install gulp gulp-cli --save-dev

Sass에서 css로의 전환을 정의하기 위해 다음과 같은 작업을 수행합니다.

npm install sass gulp-sass --save-dev

gulpfile.js 만들기

프로젝트 루트 디렉토리에 "glopfile.js"를 만듭니다.
여기에 자동화 처리를 쓰세요.

/*
src 参照元を指定
dest 出力先を指定
watch ファイル監視
series(直列処理)
*/
const { gulp, src, dest, watch, series} = require('gulp');

// プラグインを呼び出し
var sass = require('gulp-sass')(require('sass'));

// プラグインの処理をまとめる
const cssSass = () => {
  return src('./src/main/resources/static/sass/*.scss') //コンパイル元
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(dest('./src/main/resources/static/css'))     //コンパイル先
}

// タスクをまとめて実行
exports.default = series(cssSass);

나는 이렇게 했다.
컴파일 원본과 컴파일 목표 디렉터리는 각자의 프로젝트에 따라 수정됩니다.

watch에서 자동 실행

그러면 매번 지령을 내려야 하기 때문에watch에서 자동으로 실행됩니다.

exports.watch = function() {
    watch('./src/main/resources/static/sass/*.scss', cssSass);
}

아까 마지막 줄에서 추가 처리.
이렇게 하면 자동으로 실행할 준비가 완성된다.
이후 다음 명령을 누르면 파일을 수정하고 css로 바로 컴파일합니다.

gulp watch

정지 시ctl+c입니다.

완성된glopfile.js

/*
src 参照元を指定
dest 出力先を指定
watch ファイル監視
series(直列処理)と(並列処理)
*/
const { gulp, src, dest, watch, series} = require('gulp');

// プラグインを呼び出し
var sass = require('gulp-sass')(require('sass'));

// プラグインの処理をまとめる
const cssSass = () => {
  return src('./src/main/resources/static/sass/*.scss') //コンパイル元
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(dest('./src/main/resources/static/css'))     //コンパイル先
}

// タスクをまとめて実行
exports.default = series(cssSass);


exports.watch = function() {
    watch('./src/main/resources/static/sass/*.scss', cssSass);
}

말씀드리는 김에 리소스 부분의 디렉터리 구성은 이렇습니다.

최후

웹학과에서는 당연한 일이지만 업무학과 SE인 저는 실제 업무에서
아직 소용없어...
이것을 계기로 자신의 프로젝트를 도입할 수 있었으면 좋겠다.
참조 링크:
https://sagara.ink/fe02.html