【初心者必見】Gulp環境を構築して神速な作業環境にしよう

gulpで最適な作業環境を構築しよう!




こんにちは!

 

久しぶりに技術者っぽい記事を書きます。Gulp環境構築について備忘録として書きましたー。

node.jsは?なにそれ?って僕でもしかkり構築ができているのでわかりやすくお伝えできればと思いますー

 

 

そもそもGulpって?

以下、引用になります。

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

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

 

ありがたい内容ですね。素晴らしい。

 

でも僕はこれだけ読んでも「????」でした。もうすこし噛み砕いて説明すると、

 

 

Gulpとは

jsやcssを圧縮したり(一行にする)、他の言語をコンパイル(読み込んだり)したり、
ブラウザをファイル更新時にリロードしてくれたりローカルサーバーを立ち上げたり、

とコーディング作業を自働化するようにできるツールになります。

 

これでイメージがつきやすくなったのではないでしょうか?ローカルサーバーは色々な環境で確認したい時に有効だと思います。

Gulp導入するだけで一連の作業がスムーズに済んでしまいます。いやーすげー!

 

 

ここから実際に導入してみよう

実際にGulpを導入していこうと思います。そこまで小難しいことはしていないと思うのですんなりいけると思います。

 

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

Node.js

 

http://nodejs.org

ここからインストーラーをインストールしましょう。

左のLTS版の方が安定しているのでそちらで問題ないかと思います。Current版は最新版ですが安定は自信ないです。しょぼん。

 

すらすらとインストール作業が完了しましたら、コマンドを起動しましょう!黒い画面のやつですね。

node -v

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

 

 

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

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

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

 

cd /Users/**/project

こんな感じですね!(Macベースでお話進めてます・・)

 

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

ls

こちらを入力すると、今の自分がどのディレクトリにいるのか確認ができます。

 

確認ができたら下記のコマンドを叩きましょう。ターーーン!と叩いて大丈夫です。

npm init -y

 

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

 

 

Gulpのインストール

またまた下記のコマンドを叩きましょう。これでGulpがインストールされるはずです。

 

npm install -D gulp

 

Gulpのインストールはこれだけで完了です。まぁ簡単でしょう〜

 

 

gulp.jsファイルの作成

 

いよいよgulp.jsファイルの作成をしていきます。これもすぐに終わらせていきましょう!

さきほどのpackage.jsonファイルを作成した、ディレクトリに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が走り出します!しかしこれだけでは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は便利ですね。

 

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