【学習記録:122日目】GulpでSassのコンパイル×プログラミング

勉強記録

こんにちは!アラサーOLのぱるこです。

現在、webプログラマーを目指して、プログラミングの勉強中です。

今回は4ヶ月目(後半)の定例ブログです。時間経つの早い。。。!!!

GulpでSASSをコンパイル

今回のブログでは、私が苦戦したSassをコンパイル(scssをcssに変換)する為の、gulpを使った環境設定方法の備忘録です。また、今回コンパイルするファイルは、FLOCSSで構成されたものを例としているので、階層が深いときのコンパイルにも対応できるはずです!!!

FLOCSSを使った場合のSASSのディレクトリ構成例

今回は、GitHubのFLOCSSマニュアルに記載されている「SASSを使った場合のディレクトリ構成例」を用いてコンパイルしていきます。
https://github.com/hiloki/flocss

SASS/
├── foundation
│ ├── _base.scss
│ └── _reset.scss
├── layout
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _main.scss
│ └── _sidebar.scss
└── object
│ ├── component
│ │ ├── _button.scss
│ │ ├── _dialog.scss
│ │ ├── _grid.scss
│ │ └── _media.scss
│ ├── project
│ │ ├── _articles.scss
│ │ ├── _comments.scss
│ │ ├── _gallery.scss
│ │ └── _profile.scss
│ └── utility
│ ├── _align.scss
│ ├── _clearfix.scss
│ ├── _margin.scss
│ ├── _position.scss
│ ├── _size.scss
│ └── _text.scss
└── style.scss
CSS/
└── style.css

今回は、style.scssをcssディレクトリの中のstyle.cssにコンパイルしていきます。他のファイルに関しては、コンパイルをして欲しくないので、ファイル名の最初に_(アンダースコア)をつけておきます。ちなみに、アンダースコアがついたファイルのことを、「パーシャルファイル」というそうです。

コマンドの基本操作

まず、ターミナル(黒い画面)を動かす為の基本のコマンドのおさらいです。

基本のコマンド操作方法まとめ

ls ‥‥現在のディレクトリの中身を見る
cd ‥‥移動する
cd ../     ‥‥1つ上の階層
cd ../../   ‥‥2つ上の階層
cd ~   ‥‥ホームに移動
pwd  ‥‥現在の作業ディレクトリを表示する

環境設定の手順

1. node.jsをインストール

まず公式ホームページもしくは、mac用のパッケージマネージャーのHomebrewにてインストールします。https://nodejs.org/ja/

node.jsをインストールすると、同時にnpmも一緒にインストールされるので、これでnpmコマンドを使えるようになります。 「 -v 」でバージョンの確認ができます。

paruko-no-MacBook-Pro:~ paruko$ node -v
v12.9.0
paruko-no-MacBook-Pro:~ paruko$ npm -v
6.10.2

今回は、node,jsのバージョンが「12.9.0」、npmのバージョンが「6.10.2」を用いています。

2. 作業するフォルダに移動する

今回はMAMPのhtdocsのtestフォルダを開発環境と仮定し、cd(移動)のコマンドを使ってそちらに移動します。

paruko-no-MacBook-Pro:~ paruko$ cd /Applications/MAMP/htdocs/test

3. package.jsonをローカルに作成する

作業中のtestフォルダの中に、package.jsonを作成します。nmp init(初期化)で作成できます。
enterキー押しまくってください!

paruko-no-MacBook-Pro:test paruko$ npm init

ちなみに、ライブラリが書かれているpackage.jsonがあれば、nmp installだけで自動的に開発環境が構築できます。

4 .gulpとgulp-sassを開発環境にインストール

npmコマンドを使って、gulp(タスクランナー)とgulp-sass(コンパイルする為のパッケージ)をインストールします。作業するフォルダだけで使えればOKなので、ローカルインストールをします。

paruko-no-MacBook-Pro:test paruko$ npm install –save-dev gulp
paruko-no-MacBook-Pro:test paruko$ npm install –save-dev gulp-sass

インストールすると、testディレクトリの中に「 node_modules 」が作られます。

npmコマンドのまとめ

install(省略形:-i) ‥‥インストールする
–global(省略形:-g) ‥‥グローバル(pc全体)
–save-dev(省略形:-D) ‥‥ローカル

5. gulpfile.jsを作成する
  • ./sass/*/.scss 」…sassディレクトリの全てのファイル
  • outputStyle: ‘expanded’ 」…コンパイル後の見た目を綺麗にしてくれます
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss') //コンパイル前のファイルを指定
        .pipe(sass({ outputStyle: 'expanded' }))  //コンパイル実行
        .pipe(gulp.dest('css/'));  //コンパイルした出力ファイルを指定
});

gulp.task('sass:watch', () => {
    gulp.watch('./sass/**/*.scss', gulp.series('sass'));  //scssファイルが変更される度にコンパイルを実行
});

また、gulpのバージョン4から書き方が変更になったようです。非同期や同期について、まだ勉強不足です。
こちらのgulp4の書き方に関しては、こちらのブログを参考にいたしました。

gulp@4.0.0を試してみた | CodeCode
gulpの時期バージョンであるgulp@4.0.0を試してみた。 基本的には@3.9.1と同じだけど、新しい機能が増えたり、書き方が変わったりした部分があるので覚書。 インストール Node.jsをインストールします。
6. gulp-cliをインストール

このままでは先程作ったgulpfile.jsのタスクを使えません。gulpコマンドを使えるようにするためには、グローバルにgulp-cliをインストールします。 (gulp-cliをインストールしない方法も見かけましたが、参考にした本や、ウェブカツでもインストールされていたので今回はしました。)

ターミナル

paruko-no-MacBook-Pro:test paruko$ npm install –global gulp-cli

7. インストールされているか確認

今回インストールしたgulp-cliのバージョンは「2.2.0」で、gulpのバージョンは「4.0.2」です。
これで、gulpコマンドを使えるようになります。

ターミナル

paruko-no-MacBook-Pro:test paruko$ -global gulp -v
CLI version: 2.2.0
Local version: 4.0.2

8. コンパイルする

準備は整ったので、5のgulpfile.jsで設定したタスクをコマンドで打つだけです。

ターミナル(1度だけコンパイルする場合)

gulp sass

ターミナル(scssファイルが変更される度に、コンパイルするように監視する場合)

gulp sass:watch

SASS/style.scssがCSS/style.cssにコンパイルされるはずです。
基本的には、自動的にコンパイルしてくれるように、sass:watchのコマンドを打っておけば良さそうですね!

+α もっと快適にコンパイルする

今のままでもいいのですが、 ファイルが増えてしまった場合、style.scssに記述しているimportをいちいち増やさないといけません。 また、今回のようなディレクトリの構成だといちいちimportを書かないといけません。(泣)

[style.scssの記述例]

// ============================================================
// foundation
// ============================================================
@import "foundation/ _base.scss;
@import "foundation/ _reset.scss;
// ==========================================================================
// layout
// ==========================================================================
@import "layout/ _footer.scss;
@import "layout/ _header.scss;
@import "layout/ _main.scss;
@import "layout/ _sidebar.scss;
// ==========================================================================
// object
// ==========================================================================
// -----------------------------------------------------------------
// component
// -----------------------------------------------------------------
@import "object/component/_button.scss;
@import "object/component/_dialog.scss;
@import "object/component/_grid.scss;
@import "object/component/_media.scss;
// -----------------------------------------------------------------
// project
// -----------------------------------------------------------------
@import "object/project/_articles.scss;
@import "object/project/_comments.scss;
@import "object/project/_gallery.scss;
@import "object/project/_profile.scss;
// -----------------------------------------------------------------
// utility
// -----------------------------------------------------------------
@import "object/utility/_align.scss;
@import "object/utility/_clearfix.scss;
@import "object/utility/_margin.scss;
@import "object/utility/_position.scss;
@import "object/utility/_size.scss;
@import "object/utility/_text.scss;

(ちなみに、アンダースコアと拡張子は省略してimportできるそうです。)

正直めんどくさいです。
そんなめんどくさい記述をしなくていい、便利なパッケージがありました。

[便利なパッケージ] ディレクトリ毎に全ファイルをインポートする

まずnpmから「gulp-sass-glob」のパッケージをインストールします。

ターミナル

npm install –save-dev gulp-sass-glob

そして、gulpfile.jsに追加します。

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');  //←追加分

gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
        .pipe(sassGlob()) //←追加分
        .pipe(sass({ outputStyle: 'expanded' }))
        .pipe(gulp.dest('css/'));
});
gulp.task('sass:watch', () => {
    gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});

ディレクトリ配下のファイルを「/**」でまとめることができるようになります。
おかげで、style.scssのコード量がスッキリになりました。
ちなみに、「gulp-sass-glob」は、数字・アルファベット順にインポートされてしまうので、依存関係にある場合は注意が必要です。なので、「gulp-sass-glob」を使用する場合は、_reset.scssは別のディレクトリにした方が良さそうですね!そうじゃないと、_base.scssが先に読み込まれてしまうので・・・!

// ============================================================
// foundation
// ============================================================
@import "foundation/**;

// ==========================================================================
// layout
// ==========================================================================
@import "layout/**;

// ==========================================================================
// object
// ==========================================================================
// -----------------------------------------------------------------
// component
// -----------------------------------------------------------------
@import "object/component/**;
// -----------------------------------------------------------------
// project
// -----------------------------------------------------------------
@import "object/project/**;
// -----------------------------------------------------------------
// utility
// -----------------------------------------------------------------
@import "object/utility/**;

他にも、開発ツールをscssのソースコードで見ることができたり、cssのファイル名を整理してくれたり、ペンダープレフィックスを自動付与してくれたり、エラー時にwatchを停止させないなどの便利なライブラリもあるみたいです。

参考にした本がこちらです。私の中で、買ってよかったプログラミングの本の1冊です。
環境構築からSassまで、初学者にはわかりやすい内容になっていました。まだSassに関してはまだまだ使いこなせていないので、この本で勉強していきたいたいと思います。

参考にした本はこちらです。
ウェブカツの先輩もおすすめされておりました!

プログラミング学習報告(4ヶ月目(後半))

4ヶ月目(後半)のプログラミングの勉強の振り返りです。
ちなみに私は、平日は10時〜19時までの会社勤務なので、
平日は4時間、土日祝日は6時間を勉強時間の目標としています。
子育てなどはしていないので、会社時間以外は自由に使えます。なので、自分次第です。

勉強時間の結果と目標(15日間)

まず、 4ヶ月目(前半)のプログラミングの学習時間の結果です。

目標勉強時間 平日:4h、土日祝:6h

なかなか100%達成できていません。まだまだ甘いです。

タイトルとURLをコピーしました