LOG IN

#10 Gulpを導入してSassを使ってみよう

by kuroko

この記事は、2018年3月14日に開催した「#10 Gulpを導入してSassを使ってみよう」のレポートです。タイトルどおりGulpを導入してSassを使ってみました。

Gulpの導入

まずは、過去記事(Gulp - kurokolog - g.o.a.t)を見ながら、Gulpや関連する概要をおさらい。

Gulpの導入は、こちらのサイトを参考にさせていただきました。
絶対つまずかないGulp入門(2018年版) - インストールとSassを使うまでの手順 - ICS MEDIA

Gulpのインストール

参考サイトの手順通り、1. Node.jsのインストール、2. コマンドラインの起動、3. package.jsonファイルの作成、4. Gulpのインストールを行い、インストールは問題なく完了。Gulpのインストールで実行したコマンドはこちら。

$ npm install -D gulp

これと同様に、gulp-sass、gulp-postcss、autoprefixer、css-mqpackerといったnpmのパッケージをインストールしました。コマンドの中で「-D」を指定することで、package.jsonファイルのdevDependenciesというキーにインストールしたパッケージ名とバージョンが記載されています。

▼ 今回使ったpackage.json

{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.1.0",
    "css-mqpacker": "^6.0.2",
    "gulp": "^3.9.1",
    "gulp-postcss": "^7.0.1",
    "gulp-sass": "^3.1.0"
  }
}

パッケージ名が書かれたpackage.jsonがあれば、次回からコマンドで「npm install」を実行するだけで全てのパッケージを一度にインストールすることができます。

$ npm install

インストールをすると、「node_modules」というフォルダが作成され、その中に必要なパッケージがインストールされます。

Gulpを使ってSassをコンパイルする

gulpfile.jsファイルの作成

▼ 今回使ったgulpfile.js

// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');
// プリフィックス追加
const postcss =require('gulp-postcss');
const autoprefixer = require('autoprefixer');
// メディアクエリをまとめる
const cssmqpacker = require('css-mqpacker');

// style.scssをタスクを作成する
gulp.task('default', function () {
const processors = [
autoprefixer({browsers: ['last 4 versions', 'ie >= 9', 'iOS >= 9', 'Android >= 4.4']}),
cssmqpacker
];
// style.scssファイルを取得
return gulp.src('sass/style.scss')
// Sassのコンパイルを実行
.pipe(sass())
// プリフィックス追加
.pipe(postcss(processors))
// cssフォルダー以下に保存
.pipe(gulp.dest('css'));
});

タスクの実行

コマンドで「npx gulp」を実行すると、gulpが実行され、Sassがコンパイルされます。

$ npx gulp

以上で、Sassのコンパイルまではできますが、毎回毎回コマンドを打ってコンパイルするのは現実的ではないですね。そこで、npmのパッケージに「Browsersync」というものがあります。これを使うと、ファイルが変更されたのも監視して、自動でブラウザをリロードを行ってくれるので、はじめに起動さえすれば、いちいちコマンドを打ったり、ブラウザをリロードする必要はありません。

browser-sync - npm

Sassについて

今回はあまり細かいところに触れれなかったので、次回かな。

デモ用ファイル

 GitHubに使用したファイル(実際は自分以外動かなかったので改良版)をアップしているので、お試しください。お持ちの環境で動かなかったらすみません。(Windowsでは試してないです)

GitHubのファイル

おわりに

自分と違う環境で動かしてつまづきました。クリーンなマシーンがないので、どこでハマってるかがわかりにくかったです。環境構築は時間がかかりますね。でも、GulpとSassに出会って自分の開発環境は大きく変わりました。むしろ、今はないとやってけないです!

さて、この今回で10回目となったミニ勉強会(そういえばまだ名前ない)。年度末と重なり、レポートと改良版を作るのが遅くなってすみません。

撮影:brightflavorさん


kuroko
OTHER SNAPS