IMUZA.com

Xserver << WordPress(ConoHa) << はてなブログ

gulp で sass コンパイル環境を構築 + autoprefixer + browser-sync

unsplash-logoFrankie

gulp で sass コンパイル環境を構築 + autoprefixer + browser-sync

2018.09.21 CSS, Node.js, SASS, はてなテーマ, はてなブログ

gulp で sass コンパイル環境を構築 + autoprefixer + browser-sync

はてなブログのテーマの作り方（それほどでもないけど）を７回ほど書いていまして、前回、display: grid を使ってみようと思いましたが、Hatena-Blog-Theme-Boilerplate ではベンダープレフィックスがつかず、それじゃ、自分で sass コンパイル環境を作ってみようということで番外編の「２」です。

「はてなブログテーマ開発」は下記記事内に一覧があります。

はてなブログテーマ開発（番外）グリッドレイアウトを使ってみる

01前回記事の訂正

前回、autoprefixer のテストの際に、

gulp-autoprefixer:
autoprefixer: auto-fill value is not supported by IE

のエラーが出るのはおかしいみたいなことを書きましたが、間違っていました。そもそも、IE に auto-fill に対応できるベンダープレフィックスがないということのようです。ですので、auto-fill を実現しようとすれば、他のプロパティを使うしかないということです。

02gulp などのインストール

node と npm のバージョンは次のとおりです。

$ node --version
v8.12.0
$ npm --version
6.4.1
$ npx --version
6.4.1

npm は v5.2.0 から npx も同梱されています。

まず、好きなところに新しいプロジェクト用のディレクトリを作り、初期化して、package.json を作ります。

$ npm init -y

続いて、モジュールをインストールします。後々必要になる browser-sync もインストールしてしまいます。

$ npm install --save-dev gulp gulp-sass gulp-autoprefixer browser-sync

例によって脆弱なモジュールがあると出ますので、指示にしたがって下のようにしていますが、これはよくわかりません。ただ、ローカルでの作業用ですので、さほど気にすることもないように思うのですがどうなんでしょう。

$ npm audit fix


# 必要かどうか不明
$ npm audit fix --force

03コンパイルと監視 sass と watch

プロジェクト直下に gulpfile.js を作成します。

'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
 
gulp.task('sass', function (done) {
    gulp.src('./sass/**/*.scss')
        .pipe(sass({
            outputStyle: 'expanded',
            indentWidth: 4
        }).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ["last 2 versions"],
            grid: true
        }))
        .pipe(gulp.dest('./css'));
    done();
});
 
gulp.task('watch', function () {
    gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});


gulp.task('default', gulp.series('sass', 'watch'));

sass ディレクトリ以下の scss ファイルをコンパイルし、css ディレクトリに css ファイルを保存します。

参考にしたサイト

Sass: Sass Basics と Autoprefixer CSS online から拾ってきたコードですが、テスト用に ./sass/sample.scss として保存します。

// Variables
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;


body {
  font: 100% $font-stack;
  color: $primary-color;
}


// Nesting
nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  
    li { display: inline-block; }
  
    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
}


// Autoprefixer
.example {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

$ npx gulp としますと、

$ npx gulp
[19:26:08] Using gulpfile ~/works/newProject/gulpfile.js
[19:26:08] Starting 'default'...
[19:26:08] Starting 'sass'...
[19:26:08] Finished 'sass' after 15 ms
[19:26:08] Starting 'watch'...

下の ./css/sample.css ができ、そのまま sass ディレクトリ以下を監視し待機状態になります。sample.scss ファイルを変更すれば、即 sample.css も変更されます。

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}


nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


nav li {
    display: inline-block;
}


nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}


.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: linear-gradient(to bottom, white, black);
}

04browser-sync で自動リロード

Hatena-Blog-Theme-Boilerplate の前バージョンは、browser-sync を使って、正確には、browser-sync-client.js を使って、ローカルの node サーバの css ファイルを監視してブラウザのリロードを実現していました。はてなブログの HTTPS 化が可能になってからの現バージョンは自動リロードは非対応になっており、browser-sync はローカルサーバを立ち上げるだけになっています（多分）。

ただ、HTTPS化したはてなブログでもローカルサーバをHTTPS化すれば自動リロードが可能で、その方法は以下の記事にあります。

www.imuza.com

HTTPであれ、HTTPSであれ、このプロジェクトでも自動リロードを可能にしましょう。

gulpfile.js の変更

'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
 
gulp.task('sass', function (done) {
    gulp.src('./sass/**/*.scss')
        .pipe(sass({
            outputStyle: 'expanded',
            indentWidth: 4
        }).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ["last 2 versions"],
            grid: true
        }))
        .pipe(gulp.dest('./css'));
    done();
});
 
gulp.task('watch', function () {
    gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});


gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: './css/',
        },
        socket: {
            domain: 'localhost:3000'
        },
        /* https サーバの場合 
        https: {
            key: "./server.key",
            cert: "./server.crt"
        },  ここまで */
        files: ['./css/style.css'],
        open: false
    });
});


gulp.task('default', gulp.series(
    'sass',
    gulp.parallel('browser-sync', 'watch')
));

はてなブログの head に追加

<link rel="stylesheet" href="https://localhost:3000/boilerplate.css"/>
<script async src="https://localhost:3000/browser-sync/browser-sync-client.js"></script>

後は、Hatena-Blog-Theme-Boilerplate から sass ディレクトリ以下をコピーして、$ npx gulp とすれば自動リロード可能で display: grid が使える sass コンパイル環境が出来上がります。

で、この browser-sync 、せっかくですので、これを機会にもう少し突っ込んで調べてみようと思います。次回です。

Twitter
Facebook
ブックマーク
LINEで送る