TECH

Gulp設定公開!コーディングが自動化されて便利に【初心者必見】

Gulp設定公開!コーディングが自動化されて便利に【初心者必見】

こんにちは!きゅんです。

Gulp環境構築について備忘録として書きましたのでみなさんに共有いたします。

コーディングなどはソースを書けばいいものだと思いがちですが、実にやることが多くソースを書く以外も手動かしがち。

そんなコーディングの作業効率がとても上がり、複雑な処理も自動化することができてしまいます。Gulpを導入するだけで作業効率が改善されるのは夢みたいですね。

今回の記事ではGulpとはどういった仕組みなのか?

実際にGulp環境の構築方法やおすすめのタスクをご紹介します。ぜひ参考にしていただけたら嬉しいです。

きゅん
きゅん
コーディングが今までの倍は確実に早くなりますので、ぜひ参考にしていてください。

この記事を読んでわかること

  • Gulpについて理解ができる
  • 自身のPCでGulp環境を構築することができる
  • コーディングが爆速で早くなる

Gulpとは?

以下、引用になります。

gulpはNode.jsをベースとしたビルドシステムヘルパーです。gulpの一番の特徴はサイトのトップページで「ストリーミングビルドシステム」と自ら名乗っているように、ファイルの処理をストリームで行うというところです。この特徴によって複雑なタスクも細かくカスタマイズして書くことができます。ストリームがどのようなものかは、後述します。

引用:https://app.codegrid.net/entry/gulp-1

もうすこし噛み砕いていきましょうか、ちょっとまだ難しいですね。

ウェブ制作にはいろいろな処理を「タスク」という単位で呼びます。タスクを自動化するツールのことを「タスクランナー」といいます。ウェブ制作ではSassを編集すればコンパイルを実行、画像を圧縮したりというようにコーディング以外でもタスクが様々にあります。

タスクランナーを使用することでウェブ制作での煩わしい処理が自動で行うことができます。開発の時間の短縮や効率化に直結します。また、一度設定したしたタスクやプラグインを別の開発者同士で共有することができ、チーム内開発でもとても有効性を発揮することができます。

Gulpを実際に導入してみよう

実際にGulpを導入していきましょう。Gulpの設定ということで「難しいのでは?」と思われがちですが、実際そんなことはなく簡単ですので一緒にやっていきましょう。

Node.jsのインストール

まずはNode.jsをインストールしましょう

http://nodejs.org

ここからNode.jsをインストールしましょう。

左のLTS版の方が安定しているのでそちらで問題ないかと思います。推奨と書かれている方をおすすめします。

すらすらとインストール作業が完了しましたら、コマンドを入力していくので、ターミナル起動しましょう!

node -v

 

こちらを入力して、Nodeのバージョンが表示されれば問題なくokです!次のSTEPに進みましょうー

package.jsonファイルの作成しよう

NodeをインストールしただけでGulpを使用できるわけではりありません。今度はpackage.jsonを作成します。

gulp環境で作成したいディレクトリにコマンドで移動をしましょう

cd /Users/**/project

こんな感じですね!

上記のコマンドで今回Gulp環境で作成したい場所に移動ができました。

ls

こちらを入力すると、今の自分がどのディレクトリにいるのか確認ができます。このコマンドは今回に限らず使用する場面が多いです。覚えておきましょう。

 

確認ができたら下記のコマンドを叩きましょう。

npm init -y
きゅん
きゅん
これでjsonファイルが作成されました。次はGulpをインストールしていきますよー!

Gulpのインストール

ここからGulpのインストールです。これが完了したらGulpがインストールされるはずです。

npm install -D gulp

Gulpのインストールはこれだけで完了です。特に難しい設定をすることなくインストールができましたね。

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は便利ですね。

ちょっとローカルサーバーの立て方とベンダープレフィックス付与の部分が抜けてしまいましたが、後日改めて別記事で書いていこうと思いますー!難しいと思うかもしれませんが、作業環境が快適になるのでぜひやってみてくださいー!

 

ABOUT ME
kyun65
kyun65
フリーランスのweb屋。時間と場所に捉われず、やりたいことだけをやっています。loop-bitterはweb制作についてやフリーランスの情報を発信しています。NLPを駆使してコーチングも行っています!