GulpでSass(scss)を自動コンパイルする方法【スタイルシート】

gulpでSassを自動コンパイルする方法

ディレクトリ構成

gulp-sample
├── assets
│   └── css
├── index.html
└── src
    └── sass
        └── style.scss

gulpをインストール

グローバルにgulpをインストールします

npm install gulp -g

ディレクトリを移動

使用するディレクトリに移動します。
今回はgulp-sampleに移動

cd /psth/to/gulp-sample

※利用している環境に合わせたパスにしてください

package.jsonを作成

下記のコマンドを打つといろいろ質問されます。
回答後ディレクトリにpackage.jsonが作成されます。

質問内容※全部エンターで飛ばしても大丈夫です
package name: (gulp-sample)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

npm init

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

package.jsonにライブラリなどの情報が記入されていきます。
このファイルを他の人と共有することで同じ環境をつくることができます。

必要なライブラリをインストール

npm install gulp@3.9.1 gulp-sass gulp-plumber -D

package.jsonにインストールしたライブラリの情報が追加されます。

gulpfile.jsを作成

touch gulpfile.js

gulpfile.jsにSassをコンパイルするタスクを書いていきます。

var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require("gulp-plumber");

gulp.task('sass', function(){
  gulp.src('src/sass/*scss')//scssファイルのディレクトリを指定
    .pipe(plumber())//エラーが起きても監視を続行
    .pipe(sass({outputStyle: 'compressed'}))//圧縮:compressed 未圧縮:expanded
    .pipe(gulp.dest('assets/css/'));//指定のディレクトリにcssを出力
});

//監視タスク
gulp.task("watch", function() {
    gulp.watch("src/sass/**/*scss",["sass"]);//sassタスクを監視
});

gulp.task('default', ['watch']);//デフォルトで監視タスクを実行

タスク実行

gulp

defaultに設定されたwatchを実行します。
sassタスクがwatchされているのでscssファイルに変更があればコンパイルを実行します。

以上でSassの自動コンパイル環境の完成です。