ゆっくり見て行ってください！(’’)
自己紹介
HAL大阪四年生4年IT学科Web開発専攻所属(現2020年)
記事について
Sassのコンパイルをいちからやろうと思って遊んでいたら楽しくなってしまったのでまとめておきます
難しいお話は私もわからないので参考記事にて閲覧ください！！
↓下記から記事開始
Gulpとは
gulpはNode.jsをベースとしたビルドシステムヘルパーです。
gulpを使えばさまざまな作業を自動化することができます。
gulpの一番の特徴はサイトのトップページで「ストリーミングビルドシステム」と自ら名乗っているように、ファイルの処理をストリームで行うというところです。
この特徴によって複雑なタスクも細かくカスタマイズして書くことができます。
Gulpを使うところ
今回の記事ではSass/Scssをコンパイルする為に使用しています。
実行環境の構築とgulpのインストール
node.js
サイトへ行きインストーラをダウンロードし、実行してください。
正常にインストールされたか確認
プラグインを使うために0.10以上が必要なのでそれ以上のバージョンが入っているか確認してください
$ node -v
npm
#####↓npmでパッケージをインストールする際には、次のコマンドを実行します。
$ npm install
または、
$ npm i
でも正常にインストールされます。
実行すると現在いるフォルダにnode_modulesフォルダが作られ、そこにパッケージがインストールされます。
正常にインストールできているかの確認を行ってください
$ npm -v
ローカルインストールとグローバルインストール
npmではパッケージをローカルとグローバルのどちらにインストールするか、選ぶことができます。
#####↓ローカルにインストールした場合（デフォルト）
インストールしたパッケージは、そのプロジェクトのフォルダ内でのみ利用できます。
$ npm install パッケージ名
#####↓グローバルにインストールした場合
インストールしたパッケージは、そのマシン上のどこからでも利用できるようになります。
グローバルにインストールしたい場合には-gオプションを付け、次のように実行します。
$ npm install -g パッケージ名
プロジェクトごとに利用するパッケージの管理
installコマンドのオプション
package.jsonでインストールするパッケージの管理をするにはnpm installを実行する際に
--saveまたは--save-devというオプションを付けます。
#####↓--saveオプション
作成しているプログラム自体にそのパッケージが必要なときに付けます
#####↓--save-devオプション
gulpやgulpで使うプラグインなど、開発時だけ必要となるもののときに付けます。
$ npm intsall --save-dev パッケージ名
package.jsonで利用するパッケージを管理しておくことで、ライブラリを直接コピーせずに、使うライブラリの情報だけを共有することができます。
プロジェクトの環境を共有する際、共有された側は最初にnpm installを実行すれば、プロジェクトに必要なパッケージをインストールすることができるのです。
npmコマンドにはショートカットがある
参考URL:npmjs.com
gulp
上記でインストールしたnpmでgulpをインストールしていきます。
gulpのインストールは通常ですとローカルとグローバルの両方にインストールする必要があります。
グローバルにインストールしたgulpは、ローカルにインストールしたgulpを実行することが役割です。
プロジェクトによって使用するgulpのバージョンが異なる場合でも、無理にgulpのバージョンを合わせることなく、タスクを実行することができます。
$ npm install -g gulp
$ npm install --save-dev gulp
正常にインストールできているかの確認を行ってください
gulp -v
Sass/Scssを監視するタスクを書いてみる
gulp-sass
Sassファイルをコンパイルする為のプラグインgulp-sassをインストールします。
$ npm i gulp-sass --save-dev
gulpのタスクはgulpfile.jsに書いていきます。
gulpfile.jsを作成し下記のサンプルコードを記入します。
タスクの内容はScssファイルを監視するものです。
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 のソースの下にプラスで下記のコードを書きます。
//~~~~~~~~~~~~~~~~~~ 略 ~~~~~~~~~~~~~~~~~//
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を保存するたびに更新していくことがわかります。
#####↓おまけ
コンパイル時にScssファイルをまとめてimportする方法があります。
まずstyle.scssへ下記のソースを記述します
// subの下層のsub.scssのみ
@import './sub/sub.scss';
subファイルの下層のsub.scssファイルをimportします。
// sunの下層全て
@import './sub/';
subファイルの下層の全てのSass\Scssファイルをimportします。
そして、ファイルの下層全てをまとめてimportさせたい場合
gulp-sass-glob
gulp-sass-globというプラグインをインストールします。
$ npm i gulp-sass-glob --save-dev
インストールが終わったら、先ほどのコードに下記のコードを追加して行ってください。
const sassGlob = require("gulp-sass-glob");と
｀pipe(sassGlob())｀を下記のように追加します。
｀pipe(sassGlob())｀は必ずsass()の上に入れるようにしてください。
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ファイルを確認して正しくコンパイルされていることを確認しましょう。
今回の参考資料
ご挨拶
最後まで読んでいただきありがとうございました。
文面等見にくい部分が多々あるかと思いますが、「このやり方おすすめ！」や「私はこのやり方やってるよ！」等ご意見くださると嬉しいです。
もっと成長できるように、たくさん勉強しながら記事を書いていこうと思っていますので、よろしくお願い致します。
####SNS
Twitter
Facebook
Github
＊上記の投稿は個人によるもので、団体を代表するものではありません。ご了承くださいますようお願い致します。