GulpでSassをコンパイルする方法

sassのコンパイルの自動化をGulpでしたときのメモ。

詳しいことは、公式サイトにのってます。

まず最初に作業したいフォルダ構成を以下のようにする。

GulpでSassをコンパイルする方法

Gulpのインストール

1
2
3
4
sass$ npm init
sass$ npm install -D gulp-cli
sass$ npm install -D gulp
sass$ npm install -D gulp-sass

gulpfile.jsを作成する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
'use strict'

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

gulp.task('sass', function(){
 return gulp.src('./_src/sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css'));
});

gulp.task('watch', function(){
  gulp.watch('./_src/sass/**/*.scss', gulp.task('sass'));
})

gulp.task('default',gulp.series('watch'));

試しにgulpを実行してみる。

1
sass$ npx gulp

ここまでが基本形。

あとは、自動化の設定とかが必要になりますが、僕はgulpを使うのが面倒でやめました。

結局、簡単なやり方でやることにしました。

sassの環境構築とhtmlの共通化をなるべく簡単にやる

Web制作者のためのSassの教科書改訂2版

Amazon

楽天

Honto