こんにちは！きゅんです。
Gulp環境構築について備忘録として書きましたのでみなさんに共有いたします。
コーディングなどはソースを書けばいいものだと思いがちですが、実にやることが多くソースを書く以外も手動かしがち。
そんなコーディングの作業効率がとても上がり、複雑な処理も自動化することができてしまいます。Gulpを導入するだけで作業効率が改善されるのは夢みたいですね。
今回の記事ではGulpとはどういった仕組みなのか？
実際にGulp環境の構築方法やおすすめのタスクをご紹介します。ぜひ参考にしていただけたら嬉しいです。
この記事を読んでわかること
- Gulpについて理解ができる
- 自身のPCでGulp環境を構築することができる
- コーディングが爆速で早くなる
Gulpとは？
以下、引用になります。
gulpはNode.jsをベースとしたビルドシステムヘルパーです。gulpの一番の特徴はサイトのトップページで「ストリーミングビルドシステム」と自ら名乗っているように、ファイルの処理をストリームで行うというところです。この特徴によって複雑なタスクも細かくカスタマイズして書くことができます。ストリームがどのようなものかは、後述します。
もうすこし噛み砕いていきましょうか、ちょっとまだ難しいですね。
ウェブ制作にはいろいろな処理を「タスク」という単位で呼びます。タスクを自動化するツールのことを「タスクランナー」といいます。ウェブ制作ではSassを編集すればコンパイルを実行、画像を圧縮したりというようにコーディング以外でもタスクが様々にあります。
タスクランナーを使用することでウェブ制作での煩わしい処理が自動で行うことができます。開発の時間の短縮や効率化に直結します。また、一度設定したしたタスクやプラグインを別の開発者同士で共有することができ、チーム内開発でもとても有効性を発揮することができます。
Gulpを実際に導入してみよう
実際にGulpを導入していきましょう。Gulpの設定ということで「難しいのでは？」と思われがちですが、実際そんなことはなく簡単ですので一緒にやっていきましょう。
Node.jsのインストール
まずはNode.jsをインストールしましょう
ここからNode.jsをインストールしましょう。
左のLTS版の方が安定しているのでそちらで問題ないかと思います。推奨と書かれている方をおすすめします。
すらすらとインストール作業が完了しましたら、コマンドを入力していくので、ターミナル起動しましょう！
node -v
こちらを入力して、Nodeのバージョンが表示されれば問題なくokです！次のSTEPに進みましょうー
package.jsonファイルの作成しよう
NodeをインストールしただけでGulpを使用できるわけではりありません。今度はpackage.jsonを作成します。
gulp環境で作成したいディレクトリにコマンドで移動をしましょう
cd /Users/**/projectこんな感じですね！
上記のコマンドで今回Gulp環境で作成したい場所に移動ができました。
lsこちらを入力すると、今の自分がどのディレクトリにいるのか確認ができます。このコマンドは今回に限らず使用する場面が多いです。覚えておきましょう。
確認ができたら下記のコマンドを叩きましょう。
npm init -yGulpのインストール
ここからGulpのインストールです。これが完了したらGulpがインストールされるはずです。
npm install -D gulpGulpのインストールはこれだけで完了です。特に難しい設定をすることなくインストールができましたね。
gulp.jsファイルの作成
いよいよgulp.jsファイルの作成をしていきます。これもすぐに終わらせていきましょう！
さきほどのpackage.jsonファイルを作成した、ディレクトリにgulp.jsファイルを作成しましょう。
Gulp.jsファイルってなに？と思う方も多いので解説します。
テキストエディタか何かで「gulp.js」を作成して下記のソースをまるっとコピーしましょう
// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');
// style.scssをタスクを作成する
gulp.task('default', function () {
// style.scssファイルを取得
gulp.src('css/style.scss')
// Sassのコンパイルを実行
.pipe(sass())
// cssフォルダー以下に保存
.pipe(gulp.dest('css')); });あとは以下のコマンドを叩いてGulpを呼び出します。
gulpこれでGulpの環境構築とGulpを実際に立ち上げることができました。
しかしこれだけではSassもローカルサーバーも立てられていないので、細かい設定があります。そこも見ていきましょう。
gulp-sassをインストール
Sassも扱えるのがgulpのいいところ！プラグインをインストールして扱えるようにします。
これが使えるとコーディングは本当に早くなりますね！
$ npm install gulp-sass --save-devインストールができたら.scssファイルを作成しましょう。自身のprojectフォルダ内に「sass」というフォルダを作ってあげるとわかりやすいですね。
作成できたら下記の記述をgulp.jsに記述します。
var gulp = require('gulp');
var sass = require('gulp-sass'); //プラグインの定義
gulp.task('default', function() {
console.log("welcome gulp!");
});
gulp.task('sass', function () { //'sass'という名前でタスクを定義
return gulp.src('./sass/**/*.scss') //sassがあるパス
.pipe(sass().on('error', sass.logError)) //sassコンパイル実行
.pipe(gulp.dest('./build/css')); //書き出し先
});書き出し先の指定の「build」フォルダも作成しておきましょう
あとはgulpのコマンドを入力するだけでsassが扱える環境になりますよー！！
gulpこれでコーディング環境は爆速になります。ぜひ試してみてくださいね。
個人的に思うコト
めんどくさいな・・難しそうだな・・と後回しにしていましたが、構築して正解でした。
案件によってsass禁止！なんて案件だとsassの恩恵はあまり受けられないかなと思いますね。
個人的にはsassとBEM(cssの記法)はとても親和性が高いと思うんですよね。BEMってつらつら書いているとすごい長いことになっちゃって可読性が下がるんです。sassは便利ですね。
ちょっとローカルサーバーの立て方とベンダープレフィックス付与の部分が抜けてしまいましたが、後日改めて別記事で書いていこうと思いますー！難しいと思うかもしれませんが、作業環境が快適になるのでぜひやってみてくださいー！
