gulp로 Sass를 좋은 느낌으로 컴파일

소개

「이 기사를 보면 gulp로 좋은 느낌으로 Sass를 CSS에 컴파일 할 수 있다!」라고 하는 기사입니다.

이전 gulp 초입문 이라는 기사를 집필했지만, 환경 구축을 실시해,Sass를 CSS에 컴파일 하는 것만의 기본적인 내용이었습니다.
이 기사에서 좀 더 자세히 설명합니다.

참고가되면 꼭 LGTM을 부탁드립니다!

사전 준비

환경 구축의 방법에 대해서는, 이전 gulp 초입문 라고 하는 기사를 집필하고 있으므로, 그쪽을 참고로 해 주세요.
환경 구축은 이쪽의 기사를 바탕으로 되어 있는 것으로서 진행해 갑니다.

gulp 초입문

디렉토리 구성은 다음과 같습니다. src 부하가 개발 환경에서 dist 부하로 컴파일한 CSS가 토출됩니다.

디렉토리 다이어그램

プロジェクト名
 ├ dist
 │  └ css
 │     └ app.min.css
 ├ node_modules
 ├ src 
 │  └ sass
 │     └ app.scss
 ├ package.json
 └ gulpfile.js

사용할 플러그인입니다.


플러그인
버전


Node.js
12.14.1

npm
6.13.4

gulp
4.0.2

gulp-sass
4.1.0

gulp-plumber
1.2.1

gulp-notify
3.2.0

gulp-sourcemaps
2.6.5

gulp-autoprefixer
7.0.1

gulp-group-css-media-queries
1.2.2

gulp-clean-css
4.3.0

gulp-rename
2.0.0

gulp-mode
1.0.2

플러그인 설치

방금 소개한 플러그인을 설치합니다.

터미널

$ npm install --save-dev gulp-sass gulp-plumber gulp-notify gulp-sourcemaps gulp-autoprefixer gulp-group-css-media-queries gulp-clean-css gulp-rename gulp-mode

설치가 완료되면 package.json에 플러그인이 추가됩니다.

package.json의 scripts에 설명

package.json 의 scripts 에 코드를 추가합니다.
이번은 개발용과 납품용으로 커맨드 실행시의 처리를 나누고 있습니다.
(처리 자체는 gulpfile.js 에 나중에 기술합니다)

package.json

"scripts": {
    "dev": "npx gulp",
    "build": "npx gulp --production"
}

gulpfile.js에 설명

gulpfile.js에 작업을 등록합니다.

gulpfile.js

var gulp = require("gulp");
var sass = require("gulp-sass");
const plumber = require("gulp-plumber");
const sourcemaps = require("gulp-sourcemaps");
const autoprefixer = require("gulp-autoprefixer");
const gcmq = require("gulp-group-css-media-queries");
const cleanCSS = require("gulp-clean-css");
const rename = require("gulp-rename");
const notify = require("gulp-notify");
const mode = require("gulp-mode")({
    modes: ["production", "development"],
    default: "development",
    verbose: false,
});

var paths = {
    srcDir: "./src",
    dstDir: "./dist",
};

// SassをCSSにコンパイルしてdistに吐き出す
// タスクの名前
function sassCompile() {
    return (
        gulp
            // 参照するSassファイルのパスを記述する
            .src(paths.srcDir + "/sass/**/*.{scss,sass}")
            // 強制停止を防止、デスクトップにエラーを通知する
            .pipe(plumber(notify.onError("Error: <%= error.message %>")))
            // ソースマップを初期化
            .pipe(sourcemaps.init())
            // Sassをコンパイルする
            .pipe(sass({ outputStyle: "expanded" }))
            .on("error", sass.logError)
            // プレフィックスを自動で付けてくれる
            .pipe(
                autoprefixer({
                    cascade: false,
                })
            )
            // ソースマップの作成
            .pipe(sourcemaps.write())
            // メディアクエリごとにコードを整えてくれる
            .pipe(gcmq())
            // productionモード（buildコマンド）の時のみCSSをMinify化
            // コメントアウトも削除してくれる
            .pipe(mode.production(cleanCSS()))
            // ファイル名を変更する
            .pipe(
                rename({
                    extname: ".min.css",
                })
            )
            // コンパイルしたファイルを吐き出すパスを記述する
            .pipe(gulp.dest(paths.dstDir + "/css"))
    );
}

// src配下のファイルに変更があれば自動でコンパイルしてくれる
function watchFile(done) {
    gulp.watch(paths.srcDir + "/sass/**/*.{scss,sass}", sassCompile);
    done();
}

// タスクの実行！
exports.default = gulp.series(sassCompile, watchFile);

작업 실행

그런 다음 작업을 수행하기 만하면됩니다.npm run build 명령을 두드리면 CSS 파일이 Minify되고 소스 맵이 삭제됩니다.
실제로 명령을 두드려 차이점을 비교하십시오.

개발 명령

터미널

$ npm run dev

프로덕션 명령

터미널

$ npm run build

각 플러그인 개요(덤)

사용한 프라이그 인의 설명을 간단하게 해 두고 싶습니다. (순부동)
gulp-sass Sass 파일을 컴파일해 준다gulp-plumber 에러가 원인으로 태스크가 강제 정지하는 것을 방지해 준다gulp-notify 데스크탑 통지를 해준다gulp-sourcemaps 컴파일하기 전의 Sass를 유지한 상태로 해 준다gulp-autoprefixer 벤더 프리픽스를 자동으로 붙여 준다gulp-group-css-media-queries 별도의 장소에 쓰여진 같은 내용의 미디어 쿼리를 정리해 준다gulp-mode 개발 모드와 프로덕션 모드를 전환해 준다gulp-rename 디렉토리 구조를 유지한 채로 리네임해 준다

마지막으로

끝까지 봐 주셔서 감사합니다.
안건 등에 따라 어레인지하여 사용해 주시면 감사하겠습니다.

「참고가 되었어!」라고 하는 분은, 꼭 LGTM을 부탁합니다! !