kurokoroll（クロコロール）

2018.4.4

この記事は、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