Gulpを使ってScss/Sassをコンパイルする方法

ゆっくり見て行ってください！(*’’*)


# 自己紹介

HAL大阪四年生4年IT学科Web開発専攻所属(現2020年)

# 記事について

Sassのコンパイルをいちからやろうと思って遊んでいたら楽しくなってしまったのでまとめておきます
難しいお話は私もわからないので参考記事にて閲覧ください！！

***

<FONT COLOR="#33CC33">↓下記から記事開始</FONT>

***

# Gulpとは
gulpはNode.jsをベースとしたビルドシステムヘルパーです。

gulpを使えばさまざまな作業を自動化することができます。
gulpの一番の特徴はサイトのトップページで「ストリーミングビルドシステム」と自ら名乗っているように、ファイルの処理をストリームで行うというところです。

この特徴によって複雑なタスクも細かくカスタマイズして書くことができます。

## Gulpを使うところ
今回の記事ではSass/Scssをコンパイルする為に使用しています。

## 実行環境の構築とgulpのインストール 

###  <a href="https://nodejs.org/en/"target="_blank"><font color="#33cc33">node.js</font></a>

サイトへ行きインストーラをダウンロードし、実行してください。
正常にインストールされたか確認

プラグインを使うために0.10以上が必要なのでそれ以上のバージョンが入っているか確認してください

~~~
$ node -v
~~~


###  <font color="#33cc33">npm</font>
#####<font color="#cccc">↓npmでパッケージをインストールする際には、次のコマンドを実行します。</font>

~~~
$ npm install
~~~
または、

~~~
$ npm i
~~~

でも正常にインストールされます。

実行すると現在いるフォルダにnode_modulesフォルダが作られ、そこにパッケージがインストールされます。
正常にインストールできているかの確認を行ってください

~~~
$ npm -v
~~~

### ローカルインストールとグローバルインストール
npmではパッケージをローカルとグローバルのどちらにインストールするか、選ぶことができます。
#####<font color="#cccc">↓ローカルにインストールした場合（デフォルト）</font>
インストールしたパッケージは、そのプロジェクトのフォルダ内でのみ利用できます。

~~~
$ npm install パッケージ名
~~~

#####<font color="#cccc">↓グローバルにインストールした場合</font>
インストールしたパッケージは、そのマシン上のどこからでも利用できるようになります。
グローバルにインストールしたい場合には-gオプションを付け、次のように実行します。

~~~
$ npm install -g パッケージ名
~~~

### プロジェクトごとに利用するパッケージの管理

### installコマンドのオプション
package.jsonでインストールするパッケージの管理をするには`npm install`を実行する際に
`--save`または`--save-dev`というオプションを付けます。

#####<font color="#cccc">↓`--save`オプション
作成しているプログラム自体にそのパッケージが必要なときに付けます

#####<font color="#cccc">↓`--save-dev`オプション
gulpやgulpで使うプラグインなど、開発時だけ必要となるもののときに付けます。

~~~
$ npm intsall --save-dev パッケージ名
~~~

`package.json`で利用するパッケージを管理しておくことで、ライブラリを直接コピーせずに、使うライブラリの情報だけを共有することができます。
プロジェクトの環境を共有する際、共有された側は最初に`npm install`を実行すれば、プロジェクトに必要なパッケージをインストールすることができるのです。

##### npmコマンドにはショートカットがある
参考URL:[npmjs.com](https://www.npmjs.com/doc/misc/npm-config.html)

###  <font color="#33cc33">gulp</font>
上記でインストールした`npm`で`gulp`をインストールしていきます。


`gulp`のインストールは通常ですとローカルとグローバルの両方にインストールする必要があります。
グローバルにインストールした`gulp`は、ローカルにインストールした`gulp`を実行することが役割です。

プロジェクトによって使用するgulpのバージョンが異なる場合でも、無理にgulpのバージョンを合わせることなく、タスクを実行することができます。



~~~
$ npm install -g gulp
~~~

~~~
$ npm install --save-dev gulp
~~~

正常にインストールできているかの確認を行ってください

~~~
gulp -v
~~~

## Sass/Scssを監視するタスクを書いてみる

###  <font color="#33cc33">gulp-sass
Sassファイルをコンパイルする為のプラグイン`gulp-sass`をインストールします。

~~~
$ npm i gulp-sass --save-dev
~~~

`gulp`のタスクは`gulpfile.js`に書いていきます。

`gulpfile.js`を作成し下記のサンプルコードを記入します。
タスクの内容はScssファイルを監視するものです。


~~~gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('sass', function(done){
    // stream
    gulp.src('./sass/**/*.scss') //タスクで処理するソースの指定
    .pipe(sass()) //処理させるモジュールを指定
    .pipe(gulp.dest('./style/css/')); //保存先を指定

    console.log('sass compile');
    done();
});

//defaultタスクは、タスク名を指定しなかったときに実行されるタスクです。
gulp.task('default', ['sass']);
~~~

では、コマンドで`gulp`とうち`gulp`を実行していきます。

~~~
$ gulp
~~~

####Gulpを使ってSass/Scssファイルを永久的に監視すさせる方法

先ほどの`gulpfile.js` のソースの下にプラスで下記のコードを書きます。

~~~gulpfile.js

//~~~~~~~~~~~~~~~~~~　　略　　~~~~~~~~~~~~~~~~~//

gulp.task('watch', function(done){
    gulp.watch('./sass/*.scss', gulp.task('sass'));
    //watch task
    console.log('watch start');
    done();
});

gulp.task('default', ['sass']);

~~~

では、コマンドで`gulp`を実行していきます。

~~~
$ gulp watch
~~~

前回と違い、Sass/Scssを保存するたびに更新していくことがわかります。


#####<font color="#cccc">↓おまけ
コンパイル時にScssファイルをまとめてimportする方法があります。

まず`style.scss`へ下記のソースを記述します

~~~style.scss
// subの下層のsub.scssのみ
@import './sub/sub.scss';
~~~
subファイルの下層の`sub.scss`ファイルをimportします。

~~~style.scss
// sunの下層全て
@import './sub/';
~~~
subファイルの下層の全てのSass\Scssファイルをimportします。

そして、ファイルの下層全てをまとめてimportさせたい場合

### <font color="#33cc33">gulp-sass-glob
`gulp-sass-glob`というプラグインをインストールします。

~~~
$ npm i gulp-sass-glob --save-dev
~~~

インストールが終わったら、先ほどのコードに下記のコードを追加して行ってください。
`const sassGlob = require("gulp-sass-glob");`と
｀pipe(sassGlob())｀を下記のように追加します。

｀pipe(sassGlob())｀は必ず`sass()`の上に入れるようにしてください。


~~~gulpfile.js

const sassGlob = require("gulp-sass-glob");

gulp.task('sass', function(done){
    // stream
    gulp.src('./sass/**/*.scss')
    .pipe(sassGlob()) // Sassの@importにおけるglobを有効にする
    .pipe(sass())
    .pipe(gulp.dest('./style/css/')); 

    console.log('sass compile');
    done();
});

~~~

動いているか確認していきます

~~~
$ gulp
~~~

エラーが出なかったら。
`style.css`ファイルを確認して正しくコンパイルされていることを確認しましょう。


***
### 今回の参考資料


<a href="https://app.codegrid.net/entry/gulp-1" target="_blank"><font color="#33cc33">gulpとは何か</font></a>
<a href="https://www.nxworld.net/services-resource/gulp-plugin-gulp-sass-glob.html" target="_blank"><font color="#33cc33">gulp-sass-glob</font></a>


### ご挨拶

最後まで読んでいただきありがとうございました。
文面等見にくい部分が多々あるかと思いますが、「このやり方おすすめ！」や「私はこのやり方やってるよ！」等ご意見くださると嬉しいです。
もっと成長できるように、たくさん勉強しながら記事を書いていこうと思っていますので、よろしくお願い致します。

####SNS
<a href="https://twitter.com/oga_osayo"target="_blank"><font color="#33cc33">Twitter</font></a>
<a href="https://www.facebook.com/profile.php?id=100018334369337"target="_blank"><font color="#33cc33">Facebook</font></a>
<a href="https://github.com/yosa34"target="_blank"><font color="#33cc33">Github</font></a>
***


<font color="#cc3333"> ＊上記の投稿は個人によるもので、団体を代表するものではありません。ご了承くださいますようお願い致します。 </font>