Gulp導入

gulpの導入手順

こんにちは！ウェブエンジニアのジワタネホです！

最近LPの制作案件がありまして、普段rails,coffee script,slim,sassで開発している身からするとそのままのhtmlもcssもjavascriptもコーディングがストレスだとwww

で、今回は完全に個人完結する案件だったのでそういった案件が今後も来ると信じてLPコーディング用のリポジトリを作りました。

static-page-template

今回はその備忘録として。

gulp導入を検討している方の参考になれば！

gulpとは

公式サイト

https://gulpjs.com/

タスクランナーとは

タスクランナーとは、そのままなんですが、タスクを処理してくれるやつですwww

要は予め決められたタスク（処理）を実行してくれるものです。

例えば、cssのベンダープレフィックスを自動で付けてくれるとか。

便利ですよね？

できること

もちろん色々あるので、ここでは触り程度に。

• cssベンダープレフィックス自動付与
• sassをcssにコンパイル
• slimをhtmlにコンパイル
• coffeeをjavascriptにコンパイル
• 各ファイルをミニファイしてくれる
• etc

まあ他にも色々ありますが、今回はフロントエンド系の基本的なやつを上げました。

今回の要件

要件と言っても上記の機能を付けるくらいですねwww

今回の要件としては、制作案件の効率が目的なので、なるべく汎用的なものにしたなと。

なので、ファイル納品でその後の運用は先方任せというケースも考慮するとミニファイなどはないほうがベターなので本記事での要件は以下とします。

• cssベンダープレフィックス自動付与
• sassをcssにコンパイル
• slimをhtmlにコンパイル
• coffeeをjavascriptにコンパイル
• 上記をファイルの変更を検知して自動実行する

こんなもんですかね。

Github

static-page-template

導入手順

前提

今回は導入からタスクの実装までやりたいので細かくはやりません。

なので前提としてnode.jsとnpmが入っている前提で進めます！

node.jsのインストールの参考は以下で！

Node.jsのインストール

概要

• 一応前提条件の確認
• package.jsonの作成
• gulpインストール
• gulp.jsの編集

手順としてはこんなもんでしょうか。

詳細

一応前提条件の確認

Node.jsの確認

$node -v

npmの確認

$npm -v

package.jsonの作成

Gulpを適用するディレクトリにて以下コマンド。

$npm init -y

gulpインストール

同ディレクトリにて。

導入マシン上の全てでgulpを適用させる方法もあるようですが、考慮しなければいけない要件が増えるため今回は該当ディレクトリで適用されるGulpタスクを作ります。

$npm install gulp -D

gulp.jsの編集

実際のgulpタスクの実行はjsファイルで設定します。

だので該当ディレクトリ直下にgulpfile.jsというファイルを作ります。

さらに必要なタスクモジュールをインストールします。

モジュールのインストールのコマンドは以下。

$npm install -D gulp hogehoge

hogehogeの部分に必要なタスクモジュールを書きます。

例えば、

$npm install -D gulp gulp-sass

などです。

モジュールのインストールが完了したら、gulpfile.jsファイルでモジュールの呼び出し設定を行います。

以下は参考までに。

const sass = require('gulp-sass');
// sass -> css
gulp.task('build-css', function(){
  return gulp.src('dev/sass/*.sass')
    //cssをsassへ変換
    .pipe(sass({
      outputStyle: 'expanded'
    })).on('error',sass.logError)
    .pipe(gulp.dest('production/css/'));
});

簡単に説明すると、

dev/sassディレクトリのsassファイルをcssファイルに変換して、production/cssディレクトリに保存すると。

そんな感じです。

最終的なgulp実行コマンド

slim→html

$npx gulp build-html

sass→css

$npx gulp build-css

coffee script→javascript

$npx gulp build-js

ファイル変更の監視

$npx gulp watch

最後に

基本的には、コーディング作業前に、ファイル変更の監視のタスクを走らせてからコーディングすれば問題ないかと。

これがあるだけで開発のスピードは格段に上がるはず。。。

本日はここまで！

ありがとうございました！