Twitter사제 UI 작성 프레임워크 Bootstrap의 최신판 「 부트스트랩 4 」에서는, Sass를 베이스로 한 CSS 설계가 가능합니다. Bootstrap 4에 디폴트로 준비되어 있는 태스크 러너는 Grunt입니다만, 간결한 기술로 고속 처리가 가능한 Gulp가 지금은 인기로, Bootstrap 4의 CSS 컴파일 태스크도 Gulp로 관리하고 싶은 곳입니다. 이 항목에서는 Bootstrap 4 CSS 컴파일 작업을 Gulp에서 관리하는 방법을 보여줍니다.


▲ Gulp와 Grunt를 Google 트렌드로 검색한 결과. 빨간색이 Gulp. (카테고리:컴퓨터, 가전제품)

소스 파일 다운로드 및 Gul 준비

다운로드 페이지의 [Source files]에서 Sass를 포함한 파일 세트를 다운로드하여 원하는 위치로 확장합니다. 배포된 위치에서 터미널을 시작하고 Gulp를 사용할 준비를 합니다. Gulp의 기본 설정 방법에 대해서는 기사 「 5분에 도입! 태스크 러너 Gulp에서 웹 제작을 효율화하자 - ICS MEDIA 」를 참조해 주세요.

npm init -y
npm i -D gulp

Sass를 컴파일하기 위해 gulp-sass를 설치하십시오.

npm i -D gulp-sass

Bootstrap 4에서는, 번거로운 벤더 프리픽스 부여를 자동으로 설정해 주는 「 Autoprefixer 」를 채용하고 있으므로, 이쪽도 아울러 인스톨 해 둡니다. Autoprefixer에 대해서는 기사 「 CSS 벤더 프리픽스(-webkit-)를 지금 이 순간에 그만두기 위한 Autoprefixer의 도입과 추천 설정 」를 참조해 주세요.

$ npm i -D gulp-autoprefixer

CSS 컴파일 작업

환경 준비가 끝나면 Bootstrap 4 CSS 컴파일을 Gulp에서 관리하는 작업을 작성합니다. gulpfile.js 라는 자바스크립트 파일을 새로 만들고 작성합니다.

Bootstrap 4의 Sass는 여러 scss 파일로 구성됩니다. 각 파일은 scss 폴더 아래에 저장되며 "bootstrap.scss"가 모든 파일을 가져옵니다. 따라서 bootstrap.scss를 CSS로 컴파일하고 Autoprefixer에서 공급 업체 접두사를 부여하면됩니다.



▲ Sass 파일군

CSS를 컴파일하는 작업

이제 Bootstrap 4의 Sass 파일을 CSS로 컴파일하는 다음 작업을 만듭니다.

Sass를 CSS로 컴파일

공급업체 접두사 부여

css 폴더로 출력

gulpfile.js

// 必要なプラグインを読み込む
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

// Sassをコンパイルするタスク設定
gulp.task("default", function () {
    gulp.src('scss/bootstrap.scss') // コンパイル対象のSassファイル
        .pipe(sass())           // コンパイル実行
        .pipe(autoprefixer())   // ベンダープレフィックスの付与
        .pipe(gulp.dest('css/')); // cssフォルダに出力
});

태스크를 작성한 후 아래 명령으로 Sass 파일을 컴파일하고 CSS 폴더로 출력합니다.

$ gulp

파일 업데이트를 모니터링하고 Sass를 컴파일하는 작업

Sass 파일을 업데이트 할 때마다 수동으로 컴파일을 실행해야 불편합니다. 그래서, Sass 파일의 갱신이 있을 경우에 자동으로 컴파일이 실행되도록 해 봅시다.

gulpfile.js

gulp.task("default", function () {
    // scssフォルダを監視し、変更があったらコンパイルする
    gulp.watch('scss/*.scss', function() {
        gulp.src('scss/bootstrap.scss')
            .pipe(sass())
            .pipe(autoprefixer())
            .pipe(gulp.dest('css/'));
    });
});

Bootstrap 4도 Gulp에서 작업을 관리합시다.

Grunt와 Gulp는 어느 것이 더 좋지 않지만 Gulp는 Grunt에 비해 사용하기 쉽습니다. 인기도 Gulp 쪽이 상냥하고 있는 지금, Bootstrap 4도 Gulp로 태스크 관리하는 것이 추천입니다.