gulp/Sass入門・再入門

開催日

2018年5月3日

主催者

ハンズオン形式

目次

1. Sassとは
2. gulpとは
3. macにインストール
4. Sassを使ってみる

Sassとは

• CSSの拡張言語。
• CSSとの互換性が高い。
• Sassには記法と呼ばれる、書き方が違う方法があります。

Sass記法とSCSS記法について

• Sass記法

CSSでいう プロパティーを {} (波括弧・中括弧) で挟むが、Sass記法では、波括弧を使用せず、スペースで波括弧を表す。

• SCSS記法

SCSSは Sassy CSS の略で、書き方は、CSSに近く波括弧を使用します。

現在では、SCSS記法を用いた、方法が主流で、SCSS記法をSassとよばれています。

• 変数が使えて、色 font の定義ができます。

[SCSS] では

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

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

[CSS] に変換すると

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

• ネスト(入れ子構造)ができます。

[SCSS] では

div {  
    p {  
        font-weight: bold;  
    }  
}  

[css] では

div p{  
    font-weight: bold;  
}  

• 複数のscssファイルを一つのCSSファイルとして連結して出力できます。

• SCSSのファイル名を _ (アンダーバー)から始まるファイル名にすると、コンパイル (CSSに変換)されません。

• メインのSCSSファイルに @import"ファイル名"; で_ファイルを記載して、連結ができます。

[パーツのSCSS]

\_reset.scss  
\_body.scss  

[メインのSCSS]

style.scssの中に

@import "reset";  
@import "body";  

とすると記載すると結合されます。
※　_(アンダーバー)と拡張子は省略ができます。

• SASSは上から順に呼ばれます。

• mixin お好みの定義をつくり、@include で定義を呼び出すことができます。

例えば、ボタンを作ったとします。
[CSS]

.button_red{  
    height: 40px;  
    width: 50px;  
    background-color: red;  
    color: #fff;  
}

これを、背景色だけ変えたボタンを作る場合、

    height: 40px;  
    width: 50px;  
    color: #fff;  

この部分は共通項目と利用するとします。

[SCSSの @mixin で定義の設定]

@mixin button{  
    height: 40px;  
    width: 50px;  
    color: #fff;  
}  

[SCSSの @include で定義の呼び出し]

.button_red{  
    @include button;  
    background-color: red;  
}  

とできます。

@mixin は引数を使うこともでき、例では、ボタンの横幅を場合によって変えることができます。

[SCSSの @mixin の設定]

@mixin button($size){  
    height: 40px;  
    width: $size;  
    color: #fff;  
}  

[SCSS @includeで呼び出し]

.button_red{  
    @include button(60px);  
    background-color: red;  
}  

もちろんメディアクエリも対応できます。

gulpとは

gulp(ガルプ)とは、さまざまな作業を自動化ができます。今回のSASSをCSSに変換するのもgulpを使用します。

そのほかの機能に画像の圧縮もできるとか。

今回の開発環境

macOS	High Sierra
プロセッサ	intel Core i5
メモリ	8GB

macにインストール

使用するアプリ

ブラウザー (お好みで)
- google chrome
https://www.google.co.jp/chrome/index.html

エディター (お好みで)
- Sublime Text
https://www.sublimetext.com
- atom
https://atom.io/
- Brackets
http://brackets.io/

--- point ---
ここからの作業は macOS にログインするパスワードが必要です。
設定していない場合、 システム環境設定から、ユーザーとグループ を選択します。
ログインしているユーザーを選択して、パスワードを変更ボタンより、パスワードを登録します。

node.jsをインストール

1. Command Line Toolsをインストール
2. Homebrewをインストール
3. nodebrewをインストール
4. Node.jsをインストール
5. fishをインストール

Command Line Toolsをインストール

Homebrew をインストールするために、 Command Line Toolsをインストールします。
Command Line Toolsとは、コマンドを入力して操作するアプリケーション、CUI (キャラクターユーザーインターフェース) のことです。

ターミナルを起動します。

• macOS 右上にある虫眼鏡をクリックします。
• Spotlight検索 という部分に terminal.app を入力します。
• ターミナルをダブルクリックし、ターミナルを起動します。
• $以下をコピペしてcommand Line Toolsをインストールします。

$ xcode-select --install  

 ”xcode-select”コマンドを実行するには、コマンドライン・デベロッパ・ツールが必要です。ツールを今すぐインストールしますか？

画面が表示されます。

• インストールボタンをクリックします。

Command Line Tools 使用許諾契約画面  

が表示され同意しますボタンをクリックします。

ソフトウエアがインストールされました。  

画面が表示されますので完了ボタンをクリックします。

Homebrewをインストール

nodebrewをインストールするために、Homebrewをインストールします。
Homebrewとは、パッケージ管理システムです。パッケージは各種アプリの実行ファイルや、設定ファイルをまとめていて、アプリをmacOSにインストールすることを簡単にしてくれます。

• ブラウザーより、https://brew.sh/index_ja を開きます。
• スクリプトをターミナルにコピペします。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"  

• 途中で、returnキーの入力を求められます。

Press RETURN to continue or any other key to abort enter(return)  

• macOSにログインするためのパスワードの入力をもとめられます。

Password:  

nodebrewをインストール

Node.js をインストールするために nodebrew をインストールします。
nodebrew は macOS で Node.js のバージョン管理するためのソフトウエアです。

• brewコマンドを利用して、nodebrewをインストールします。

$ brew install nodebrew  

nodebrewの初期設定

(初期設定しないとNode.jsインストール時にエラーが出ます。)

$ nodebrew setup  

nodebrewのpathを設定

nodebrew をインストールすると、結果 Add path: と表記があるので path を設定します。

• pathの設定

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile  

• 解説

echoコマンド とは ''(シングルクォーテーション)で囲んだ部分を表示します。

>>でechoコマンド を表示から矢印先の bash_profileファイル に出力できます。

\~/ (チルダスラッシュ)で bash_profileファイル はホームディレクトリにできた事がわかります。

.(ドット)で bash_profileファイル は隠しファイルであることがわかります。

Node.js のインストールの解説では、bash_profileファイル や bashrcファイル に path を設定してしています。

違いは bash_profileファイル はログイン時に動作し、bashrcファイル は bash を起動する時に毎回動作します。

わたしの記事では、再起動すると消え、再度 bash を起動する必要がある、 bashrcファイル より bash_profileファイル に設定したいと思います。

exportは環境変数を設定するコマンドです。

• pathの反映

$ source ~/.bash_profile  

• bash_profileを確認してみます。

Finderを起動して、

メニューバーより、移動 → ホームの順にクリックします。  

ここで

command + shift + . (ピリオド)  

すると隠しファイルが表示されます。

• bash_profileファイルをエディターで確認します。

export PATH=$HOME/.nodebrew/current/bin:$PATH  

の記載があることを確認します。

なにもせずに閉じます。

• nodebrewがインストールできたか確認します。

$ nodebrew -v  

結果

nodebrew use v8.9.4  

Node.jsをインストール

$ nodebrew install-binary latest  

• latestの部分を変えると安定版と最新版をインストールできます。

最新版	安定版
latest	stable

長い結果のあと Installed successfully と表示されれば完了です。

• インストールされた nodeのバージョン を確認します。

$ nodebrew list  

結果

v10.1.0 

current: none  

• 使用するNode.jsのバージョンを指定します。

$ nodebrew use v10.1.0  

結果

use v10.1.0  

• 最終確認

$ node -v  

結果

v10.1.0  

fishをインストール

fishとはターミナルを強化するシステムです。 今回の授業では、インストールしなくても大丈夫です。

fishをmacOSにインストールすると以下の捜査が簡単になります。

• ターミナルの文字の補完機能
• ディレクトリ間のタブ 矢印移動

• タイプミスをハイライト

• fish をインストールします。

$ brew install fish  

• fish がインストールできたか確認します。

 $ fish -v  

結果

 fish, version 2.7.1  

• fishを起動します。

$ fish  

結果

Welcome to fish, the friendly interactive shell  

• fishの停止方法

~> exit

※ fishが動いていると、 $ が　~> になります。

作業ディレクトリの作成

ここから fish を使用するといいかもしれません。

私は、ホームディレクトリに workdirディレクトリ その配下に gulp-lessonディレクトリ を作りました。

$ mkdir -p ~/workdir/gulp-lesson  

• つくった作業ディレクトリに移動します。

$ cd ~/workdir/gulp-lesson  

• 移動できたか確認します。

$ pwd  

結果

/Users/ユーザー名/workdir/gulp-lesson

npm initでprojectの初期設定

• package.jsonを作成します。

$ npm init -y  

結果

Wrote to /Users/ユーザー名/workdir/gulp-lesson/package.json:  

{  
    "name": "gulp-lesson",  
    "version": "1.0.0",  
    "description": "",  
    "main": "index.js",  
    "scripts": {  
      "test": "echo \"Error: no test specified\" && exit 1"  
  },  
    "keywords": [],  
    "author": "",  
    "license": "ISC"  
}  

• package.jsonを確認します。

Finderで/gulp-lesson にある、package.jsonをエディターで確認します。

Gulpをインストール

• ターミナルで/gulp-lessonにいる事を確認します。

$ pwd  

結果

/Users/ユーザー名/workdir/gulp-lesson  

※ gulp-lesson にいない場合は移動してください。

• Gulpをインストール

$ npm install -D gulp  

結果
gulp-lesson ディレクトリを確認すると、node_modulesディレクトリが作成されます。
今後プロジェクトごとにこの作業をします。

Gulpのsass用のオプションをインストール

$ npm install -D gulp gulp-sass  

gulpfile.jsというファイルを作成

/gulp-lesson の下に touchコマンド で、gulpfile.js をつくります。

• ターミナルで/gulp-lessonにいる事を確認します。

$ pwd  

結果

/Users/ユーザー名/workdir/gulp-lesson  

※ gulp-lesson にいない場合は移動してください。

• touchコマンドで、gulpfile.js をつくります。

$ touch gulpfile.js  

• gulpfile.js をエディターで修正します。

[gulpfile.js]

// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');

// style.scssをタスクを作成する
// gulp.task('default',function () {実行される処理})
// 第一引数のdefaultはタスク名を記載する
// defaultで省略することができます。
gulp.task('default', function () {
    // style.scssファイルを取得
    gulp.src('css/style.scss')
    // Sassのコンパイルを実行
    // pip()は処理をつなげることができます。
    // sassで読み込んだファイルをsassファイルをコンパイルし、
    // gulp.destでcssディレクトリに出力します。
        .pipe(sass())
    // cssフォルダー以下に保存
        .pipe(gulp.dest('css'));
});

SCSSファイルの作成

gulpfile.js 内では、 style.scssファイル を取得する為に gulp.src('css/style.scss') と記載があります。
css/style.scssの部分で cssディレクトリ 内の style.scss を読み込みます。なので、css ディレクトリとその中に、 style.scss を作成します。

• 自分の階層を確認します。

$ pwd  

結果

/Users/ユーザー名/workdir/gulp-lesson  

違ったらgulp-lessonに移動します。

• cssディレクトリを作成します。

$ mkdir css

• cssディレクトリ内に sytle.scss ファイルを作成します。

$ cd css  

$ touch style.scss   

HTMLファイルの作成

gulp_lessonディレクトリ内に index.html を作成します。

• /gulp_lessonディレクトリに移動します。

ひとつ前の作業をしていると、

$ pwd  

/Users/ユーザー名/workdir/gulp-lesson/css にいると思います。

$ cd ..  

• 現在のディレクトリが /gulp-lesson にいる事を確認します。

$ pwd  

結果

/Users/ユーザー名/workdir/gulp-lesson  

• /gulp-lesson　ディレクトリの中に index.html を作成します。

$ touch index.html  

それぞれのファイル(style.scss index.html)に内容を記載します

エディターでファイルを修正します。

[index.html]

html
<!DOCTYPE html>  
<html lang="ja">  
<head>  
    <meta charset="UTF-8">  
    <title>初めてのgulpによる、Sass</title>  
    <meta name="Author" content=""/>  
    <link rel="stylesheet" type="text/css" href="css/style.css">  
</head>  
<body>  
<h1>初めてのgulpによる、Sass</h1>  
<div>  
<p>divの中にpがあります。</p>  
</div>  
<div class="button_red">ボタン赤です。</div>  
<div class="button_size">サイズの違い。</div>   
</body>  
</html>  

[style.scss]

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

body{
    font: 100% $font-stack;
    color: $primary-color;
}
div{
    p{
        font-weight: bold;
    }
}
@mixin button{
    height: 40px;
    width: 50px;
    color: #fff;
}
.button_red{
    @include button;
    background-color:#red;
}

@mixin buttonS($size){
    height: 40px;
    width: $size;
    color: #fff;
}
.button_size{
    @include buttonS(60px);
    background-color: #666;
}

初めてのGulpによるSass

• /gulp-lessonにある、index.htmlをブラウザーで確認します。

表示すると、cssファイルがないので、htmlの文字だけが表示されるはずです。

• 現在のディレクトリが /gulp-lesson にいる事を確認します。

$ pwd  

結果

/Users/ユーザー名/workdir/gulp-lesson  

• gulpでSassからCSSを出力します。

$ npx gulp

結果

[01:33:36] Using gulpfile ~/workdir/gulp-lesson/gulpfile.js
[01:33:36] Starting 'default'...
[01:33:36] Finished 'default' after 8 ms

• 確認

/gulp-lesson/cssディレクトリ内にstyle.cssが出力されたと思います。

エディターで確認して見ましょう。

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

div p {
  font-weight: bold; }

.button_red {
  height: 40px;
  width: 50px;
  color: #fff;
  background-color: #red; }

.button_size {
  height: 40px;
  width: 60px;
  color: #fff;
  background-color: #666; }

• 続いてindex.htmlをブラウザで再度確認します。

結果
色がついたかと思います。

Gulpのオプション

• CSSのコードを整形
  上記の結果だとCSSファイルは、

.button_size {
  background-color: #666; }

波括弧の位置が気になります。それらを整形します。
gulpfile.js を修正します。
.pipe(sass(ここに))

{
        outputStyle: 'expanded'
    }

を追記します。
[修正後のgulp file.js]

// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');

// style.scssをタスクを作成する
// gulp.task('default',function () {実行される処理})
// 第一引数のdefaultはタスク名を記載する
// defaultで省略することができます。
gulp.task('default', function () {
    // style.scssファイルを取得
    gulp.src('css/style.scss')
    // Sassのコンパイルを実行
    // pip()は処理をつなげることができます。
    // sassで読み込んだファイルをsassファイルをコンパイルし、
    // gulp.destでcssディレクトリに出力します。
        .pipe(sass(    {
        outputStyle: 'expanded'
    }))

    // cssフォルダー以下に保存
        .pipe(gulp.dest('css'));
});

• 修正後ファイルを保存してターミナルより実行します。

$ npx gulp   

• 再度、エディターで出力されたstyle.cssファイルをみてみます。

結果

.button_size {
  height: 40px;
}

波括弧の位置が変わったかと思います。

• CSSのコードを圧縮

gulpfile.jsをエディターで修正します。

.pipe(sass(ここに))

{
      outputStyle: 'compressed'
    }

を記載します。

[修正後のgulpfile.js]

const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('default', function () {
    gulp.src('css/style.scss')
        .pipe(sass(    {
        outputStyle: 'compressed'
    }))
        .pipe(gulp.dest('css'));
});

同様に $ npx gulp コマンドでSassをCSSに変更します。

エディターでCSS を確認します。

[CSS] 圧縮されて一行で記載されているかと思います。

• SCSSファイルの自動更新

gulpfile.jsをエディターで修正します。
css/style.scssに変更があった場合、gulp.watchで監視します。

gulp.watch('css/style.scss', function(){処理の内容});

コンパイルエラーが発生した場合、watch(監視)が停止します。
.on('error', sass.logError) を追加する事によって、停止しないようにする事ができます。

        .pipe(sass({
            outputStyle: 'expanded'
        })).on('error', sass.logError)

のようにに記載します。

[修正後のgulpfile.js]

const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('default', function () {
    gulp.watch('css/style.scss', function(){
        gulp.src('css/style.scss')
            .pipe(sass({
            outputStyle: 'expanded'
        })).on('error', sass.logError)

    // cssフォルダー以下に保存
        .pipe(gulp.dest('css'));
    });
});

• ターミナルより、watch機能を起動します。

$ npx gulp 

• 止め方はctrl + c

• sassを変更して、自動的に更新されるか確認します。

style.scssファイルエディターで開いて修正し保存します。

[修正後のCSS]

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

body{
    font: 100% $font-stack;
    color: $primary-color;
}
div{
    p{
        font-weight: bold;
        color: aqua;
    }
}
@mixin button{
    height: 40px;
    width: 50px;
    color: #fff;
}
.button_red{
    @include button;
    background-color:red;
}

@mixin buttonS($size){
    height: 40px;
    width: $size;
    color: #fff;
}
.button_size{
    @include buttonS(60px);
    background-color: #666;
}

• 変更を確認します。

出力されたcssがaquaになっていること。

index.htmlをブラウザーで確認すると、aqua色になっていることを確認します。

以上でgulpによる初めてのsassは完了です。

質疑応答

githubやファイルの受け渡しについて Node_moduleはファイル数が多くギットで管理しない。
gulpfile.js ,　package.json　, style.scss　を頂いたり、gitで管理するとよい。