PHPerが学ぶ〜GulpでSassを自動コンパイルする方法〜
Gulpとは?
GulpはNode.jsをベースとしたビルドシステムヘルパーです。
タスクランナーとビルドシステムヘルパーの違い
タスクランナーのGruntとビルドシステムヘルパーのGulpの目的は同じです。
どちらも、いろいろな機能(プラグイン)を使い、目的とする成果物を求める一連の処理(タスク)を実行することです✌️
ただ、そのアプローチの仕方が両者で少々異なります。
- Gruntの場合
タスク=プラグインといった感じに、
その単一のタスク(プラグイン)を実行させるのが主な役割です。
単一のタスクを組み合わせて実行することで、ビルドという大きい目標に辿り着くというアプローチになります。
要するに、それぞれのタスクはそれぞれで完結しているってこと😇
- Gulpの場合
プラグインはあくまでも入力に対して処理を行うためのものです。
GulpのタスクはGruntでいうところのビルドに近いもので、タスクの中でいろいろなプラグインを組み合わせることで、タスク=ビルドを行うといったアプローチを取っています。
要するに、入力されたものに対して処理を実行して行き、1つの流れの中でビルドを行うアプローチってこと😇
Gulpの特徴
Gulpの一番の特徴は「ストリーミングビルドシステム」です。
「ストリーミングビルドシステム」とは、ファイルの処理をストリームで行うことです。
この特徴によって複雑なタスクも細かくカスタマイズして書くことが可能になるわけです。
※ストリームがどのようなものかは、後述します。
Gulpインストール
npmでのパッケージ管理の説明は省きます。
まずは、プロジェクトに移動して、package.json
(プロジェクトの設定ファイル)を作成
$ cd プロジェクト
$ npm init
インストール
ローカルにインストール(後でnpm scripts
に登録)
$ npm install gulp --save-dev
Sassのプラグインインストール
Sassをコンパイルするためのプラグインgulp-sass
をインストール。
$ npm install gulp-sass --save-dev
タスクを書く
gulpfile.jsの作成
まずは、プロジェクトフォルダにgulpfile.js
というファイルを作成。
このファイルがGulpの設定ファイルです。ここに実行するタスクを記述していきます。
※gulpfile.js
はpackage.json
と同じディレクトリに置いてください。
Gulpの設定
gulpfile.js
に以下を記述。
// gulp core
var gulp = require('gulp');
// sass compiler
var sass = require('gulp-sass');
// task
gulp.task('sass', function () {
gulp.src('src/style.scss')
.pipe(sass())
.pipe(gulp.dest('dist/'));
});
説明
- require
でGulp本体とプラグインを呼び出す
※プラグインを追加して使用するたびに呼び出してください。
- gulp.task('タスク名', 処理)
でタスクを定義
- gulp.src('対象ファイル')
で読み込むファイル(.scss)を指定
- pipe()
で実行する処理を書きます
- gulp.dest('出力先')
で処理を行ったファイルの出力先を指定
scr/style.scss
ファイルに対してSassをコンパイルするプラグインを実行 → 最後に指定したディレクトリに出力という流れです。
pipe()
でそのタスクで実行する処理をつなげていく感じですね。😤
ストリーム(stream)について
ざっくり言うと、データの流れです。
データ(結果のオブジェクト)をバトンタッチのように次の処理へと流していくみたいな感じ😇
各処理を実行した結果(ストリーム)をpipe()
によって次の処理に渡すことで、
複数の処理を簡潔にまとめることが可能というわけです。
それぞれの処理の間に新たに処理を追加したい、といった場合には、pipe()
を増やすだけ!
タスクが何をするのか、直感的に書くことができるからわかりやすいですね!😇
Gulpのメリット
GruntではタスクをJSON形式で宣言的に記述していくんですが、
宣言的な記述はタスクの内容がパッと見でわかりやすい反面、タスク同士を組み合わせるのが難しいです😭
タスクが増えていくと、それぞれの関連性などを把握しきれなくなるみたい💦
もうGrunt使うことないだろうけど、一応タスクランナーとの違いは覚えて損はないかな。。。
一方、Gulpでは処理したファイルをストリームによって次の処理に渡すことで、手続き的に記述することができます。
「アレをしてからコレをする」というタスクをわかりやすく、より簡潔に書くことができます。
GulpのAPIはたいていコールバック関数を取れるようになっているので、「タスク実行後に何かする」ってのも書けます👍✨
つまり、Gulpではタスクと処理を行う機能が分離できるので、
タスクの持っている役割をより明確にすることができるメリットがあります!😎
MiniMatch
gulp.src('対象ファイル')
で読み込むファイルの指定パターンは以下があります。
プロジェクトのファイル構成によって変えてください。
MiniMatchパターン | 説明 |
---|---|
'src/style.scss' | 特定のファイルを指定 |
'src/*.scss' | 特定のファイル形式を指定その1(srcディレクトリ直下にある.scss ファイル) |
'src/*/.scss' | 特定のファイルを指定その2(sassディレクトリ以下にあるすべての.scss ファイル) |
['src//.scss','!src/sample//*.scss]' | 特定ファイルの除外(src/sample以下にある.scss ファイルを除く、srcディレクトリ以下の.scss ファイル) |
ファイルの変更を監視
gulpfile.js
に以下を追加。
//...省略
gulp.task('default', ['sass'], function () {
gulp.watch('src/**/*.scss', ['sass']);
});
gulp.watch()
でファイルの保存を監視し、
変更があればsass
のタスクが自動で実行されるタスクを追加しています。
default
のタスクを作っている理由としては、$ gulp
コマンドを実行するだけでdefault
タスクを実行することができます。
よく使うタスクはdefault
タスクにしましょう😎
ビルド実行
$ gulp sass
グローバルにインストールしていれば、上記のようにgulpコマンドで実行できるんですが、
今回はpackage.json
にコマンドを追加。
"scripts": {
"build": "gulp"
}
npmでビルド実行
$ gulp タスク名
で実行したいタスクだけを指定できます。
指定しない場合はdefault
タスクが実行されます。
$ npm run build
無事にコンパイルされたcssファイルが出力されたか確認してみてください😪
現場で使える設定
現場で使える設定を以下にまとめてみました。参考になれば幸いです。
別途必要なものはカスタマイズしてみてください。
プラグインインストール
$ npm install gulp-autoprefixer gulp-plumber gulp-notify gulp-clean-css browser-sync --save-dev
Gulpの設定
サンプルです。
// gulp core
var gulp = require('gulp');
// sass compiler
var sass = require('gulp-sass');
// auto prifix
var autoprefixer = require('gulp-autoprefixer');
// error handling
var plumber = require('gulp-plumber');
// notify
var notify = require('gulp-notify');
// clean css
var cleanCSS = require('gulp-clean-css');
// server
var browser = require("browser-sync");
// task
gulp.task('server', function () {
browser({
server: {
baseDir: "./"
}
});
});
gulp.task('sass', function () {
gulp.src('src/style.scss')
.pipe(plumber({
errorHandler: notify.onError('Error: <%= error.message %>')
}))
.pipe(sass())
.pipe(autoprefixer())
.pipe(cleanCSS())
.pipe(gulp.dest('dist/'))
.pipe(browser.reload({stream:true}));
});
gulp.task('default', ['server', 'sass'], function () {
gulp.watch('src/**/*.scss', ['sass']);
});
説明
gulp-autoprefixer
CSSのベンダープレフィックス付与を自動化(※gulp-pleeeaseの方が良いかも😏)gulp-plumber
watch中にエラーが発生するとwatch自体が停止してしまうため、タスクが強制停止することを防止gulp-notify
コマンドラインではエラーに気づきにくいためエラーが発生したときにデスクトップに通知gulp-clean-css
CSSファイルの圧縮browser-sync
LiveReload環境構築 → プロジェクトにindex.html
置いてhttp://localhost:3000にアクセしてみてください。
他にもたくさんあるので、案件ごとに必要なプラグインを追加していきながらカスタマイズしていく感じかな。
単純にsassをビルドするような場合には、簡単で使いやすそうでした。
だけど、jsの依存関係も解消するとなると、結局webpackを使うことになるんですけどね😷💦
Author And Source
この問題について(PHPerが学ぶ〜GulpでSassを自動コンパイルする方法〜), 我々は、より多くの情報をここで見つけました https://qiita.com/_Keitaro_/items/9eef1a7b272706369e3e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .