前提条件
下記はすでにインストールと仮定
- gulp
また、下記の記事を完了していることを想定
プラグインの利用とgulpfileの書き方
今回は、「gulp-sass」というプラグインを利用してインストールからgulpfileの書き方を説明していきます。
前回の記事が完了している方は、gulpfile.jsというファイル(中身は空)は作成済みのはずですので、ここに設定を記述しながら実際にgulp-sassプラグインを利用できるようにしていきましょう。
◆gulp-sassプラグインとは？
下準備
今回、gulp-sassプラグインを実際に利用するために下準備を行います。
◆HTMLファイルの作成
下記のコマンドを実行してファイルを作成。
// publicというディレクトリを作成
$ mkdir public
// publicディレクトリの中にindex.htmlファイルを作成
$ touch public/index.html
作成したindex.htmlというファイルに下記を貼り付け
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>エフゼロ勉強会</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>エフゼロ勉強会</h1>
</body>
</html>
これで事前準備は終了です。
プラグインのインストール
ではまずは今回利用するgulp-sassプラグインをインストールしていきます。
インストールは下記のコマンドを実行すれば完了です。
※前回gulpをインストールしたディレクトリ(gulp_lessonディレクトリ)にいる前提です。
// npmを利用してgulp-sassをインストールする
$ npm install gulp-sass
gulpfile.jsに設定を記述
gulp-sassプラグインを利用できるようにgulpfile.jsに設定を記述してきます。
var gulp = require('gulp');
var sass = require('gulp-sass');
// sassコンパイルタスク
gulp.task('sass-compile', function(){
return gulp.src('./dev/style.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./public/style.css'));
});
// gulpのデフォルトタスクとしてsass-compaileタスクを指定
gulp.task('default', ['sass-compile']);
上記を記述後、保存してください。
※詳しい説明は後半でしています。
scssファイルの作成
では実際に、gulp-sassプラグインを利用してsassファイルをcssファイルに変換してみましょう。
まずsassファイルを作成します。
// devというディレクトリを作成
$ mkdir dev
// devディレクトリの中にindex.htmlファイルを作成
$ touch dev/style.scss
作成したstyle.scssファイルの中に書きを記述
body {
background-color: red;
& h1 {
color: bule;
}
}
実行
最後にgulpを利用してsassファイルをcssに変換してみましょう。
下記のコマンドを実行してください。
$ gulp
これでgulpとgulp-sassを利用できるようになりました。
ただ、現状ではgulpのよさを実感できないのでより実務に使える形にしていきます。
プラグインを追加していく
ここまでで作成したファイルをさらに便利にしていきましょう。
現状、下記のパッケージが入っています。
- gulp
- gulp-sass
ここではさらに便利にしていくために下記のパッケージを導入します。
- gulp-autoprefixer =>
- gulp-csscomb =>
- gulp-plumber =>
- browser-sync =>
◆パッケージのインストール
まずはnpmを利用してパッケージをインストールして使用できるようにしていきます。
// npmを利用してインストール(半角スペースを入れることで複数をまとめて指定することも可能)
$ npm install gulp-autoprefixer gulp-csscomb gulp-plumber browser-sync
◆gulpfile.jsのカスタマイズ
パッケージのインストールが完了したので実際に利用できるようにgulpfile.jsをカスタマイズしていきます。
最終的に下記のようになります。
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var csscomb = require('gulp-csscomb');
var plumber = require('gulp-plumber');
var browser = require('browser-sync');
// sassコンパイルタスク
gulp.task('sass-compile', function(){
return gulp.src('./dev/style.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./public/style.css'));
});
// gulpのデフォルトタスクとしてsass-compaileタスクを指定
gulp.task('default', ['sass-compile']);
では少しづつ解説していきます。
ポイントを押さえてしまえばある程度カスタマイズができるようになりますので少しづつ慣れていきましょう。