Go to Qiita Advent Calendar 2024 Top
LoginSignup
91
106

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@ferretdayo

開発しやすい環境の作り方~Web系~

Last updated at Posted at 2016-05-20

はじめに

何か記述等にミスやこうした方がいいとのことがあればコメントで教えてくださると幸いです。

目的

開発を円滑するために行ったら良いと思われることについての紹介

概要

タスクランナーのGulpを用いて開発の効率化を図る。
内容は、SassやPugで書いた内容を変換し、ファイルの内容が変更された場合は自動的にブラウザのリロードを行う流れを作成する。

gulp.gif

環境

  • Windows 8.1
  • npm 2.15.1
  • node 4.4.3
  • gulp 3.9.1

環境構築

フォルダ構成

まず初めに、フォルダ構成を作成します。今回の場合私はポートフォリオサイト作ろうと思っていたので以下のようにしました。
今回はこのフォルダ構成で説明していきます。

root/
 ├ js/
 |  └ index.js
 ├ css/
 |  └ style.css
 ├ img/
 |  └ hoge.png
 ├ sass/
 |  └ style.scss
 ├ pug/
 |  └ index.pug
 ├ node_modules
 ├ package.json
 ├ gulpfile.js
 └ index.html

Node.jsのインストール

まずgulp等を利用するには、Node.jsが必要なので、インストールしてください。インストールはこちらから
コマンドプロンプトで以下のコマンドを実行してバージョンが出てきたらインストールされています。

CommandPrompt
node -v
npm -v

フォルダ構成の構築

まず任意の場所にプロジェクトのフォルダを作成し、jsやcssなどのフォルダを作成します。

CommandPrompt
mkdir frontend_template
cd frontend_template
mkdir css
mkdir js
mkdir sass
mkdir pug
mkdir img

gulpのインストール

gulpとはCSSやJavaScriptなどのコードの縮小化，画像の圧縮，ファイル変更時のブラウザのリロードなどのタスクを自動化するツールです。
今回gulpで自動化するタスクは以下の通りです。

利用するモジュール 説明
gulp-sass sassファイルをcssファイルに変換
gulp-pug pugファイルをhtmlファイルに変換
gulp-plumber sassとpugの変換でエラーが出た場合の強制終了を防止
gulp-notify デスクトップ通知を行う
browser-sync ブラウザの起動とファイル変更時にリロード

まず初めにpackage.jsonを作成するために以下のコマンドを実行します。

CommandPrompt
npm init

いろいろ入力出来る欄が出てきますがすべてEnterで大丈夫です。

次にgulpのインストールです。
iはinstallの略称、-gはglobalにインストール、-Dはpackage.jsonのdevDependenciesにバージョン付きで書き込み、インストールします。
package.jsonに書く理由としては、npm iコマンドでpackage.jsonに書かれているこのプロジェクトに必要なパッケージ(指定されたバージョン)を自動的にインストールするためです。これにより、自分以外の人も同じバージョンで統一され、簡単に必要なパッケージをインストールが出来ます。
Macの場合は、npm i -g gulpをする際sudoを追加して、sudo npm i -g gulpにしなきゃ-g出来ない模様

CommandPrompt
npm i -g gulp
npm i -D gulp

gulp-sassのインストール

gulp-sassは説明した通り、sassファイルをcssファイルに変換してくれるモジュールです。
インストールは以下のコマンドを実行してください。

CommandPrompt
npm i -D gulp-sass

package.json見てもらうとdevDependenciesに追記されていると思います。

style.scssの作成

では、sassフォルダにstyle.scssを作成しておきましょう。※拡張子はscssです。

style.scss
h1{
  color: red;
  &:hover{
    color: blue;
  }
}

こちらは後でcssファイルに変換します。

gulp-pugのインストール

gulp-pugは説明した通り、pugファイルをhtmlファイルに変換してくれるモジュールです。
インストールは以下のコマンドを実行してください。

CommandPrompt
npm i -D gulp-pug

index.pugの作成

Pug(旧Jade)は簡単にhtmlコーディング出来るツールです。htmlはと閉じタグがあるのに対し、Pugでは、閉じタグがなく、インデントでタグの階層を実現します。インデントだけで言うと、プログラミング言語でPythonみたいな感じです。

ではpugフォルダにindex.pugを作成します。

index.pug
doctype html
html(lang='ja')
    head
        meta(charset="utf-8")
        title タイトル
        link(href="/css/style.css", rel="stylesheet")
    body
        div#header
        div#navigation
        div#content
            h1 helloWorld!
        div#footer

詳しくは、ゴリラでもわかるPug入門を参照してください。

gulp-plumber, gulp-notify, browser-syncのインストール

その他のplumber, notify, browser-syncをインストールします。

CommandPrompt
npm i -D gulp-plumber
npm i -D gulp-notify
npm i -D browser-sync

たぶん1行で書けるかも

CommandPrompt
npm i -D gulp-plumber gulp-notify browser-sync

gulpfile.jsの作成

次に、タスクをgulpfile.jsに記述します。
今回作成したgulpfile.jsはこちらになります。

gulpfile.js
var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require("gulp-plumber");
var browserSync = require("browser-sync");
var notify = require("gulp-notify");
var pug = require("gulp-pug");

gulp.task('default', ['sass', 'browser-sync', 'pug', 'watch']);

//sassとpugの監視をして変換処理させる
gulp.task('watch', () => {
    gulp.watch(['./sass/**'], () => {
        gulp.start(['sass']);
    });
    gulp.watch(['./pug/**'], () => {
        gulp.start(['pug']);
    });
});

//ブラウザ表示
gulp.task('browser-sync', () => {
    browserSync({
        server: {
            baseDir: "./"   //サーバとなるrootディレクトリ
        }
    });
    //ファイルの監視
    //以下のファイルが変わったらリロードする
	gulp.watch("./js/**/*.js",     ['reload']);
    gulp.watch("./*.html",         ['reload']);
});

//sassをcssに変換
gulp.task("sass", () => {
	gulp.src("./sass/**/*scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
		.pipe(sass())
		.pipe(gulp.dest("./css"))
        //reloadせずにinjectする
        .pipe(browserSync.stream())
});

//pugをhtmlに変換
gulp.task("pug", () => {
    var option = {
        pretty: true
    }
    gulp.src("./pug/**/*.pug")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(pug(option))
        .pipe(gulp.dest("./"))
});

//ブラウザリロード処理
gulp.task('reload', () => {
    browserSync.reload();
});

モジュールのインクルード

それでは説明します。
まずここでは、必要なモジュールをrequireで呼び出しています。C言語で言うと#include、PHPで言うとrequire_onceなどにあたると思います。

gulpfile.js一部
var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require("gulp-plumber");
var browserSync = require("browser-sync");
var notify = require("gulp-notify");
var pug = require("gulp-pug");

gulpコマンドで実行する処理の指定

これは、コマンドプロンプトからgulpと実行された場合に行うタスクの一覧です。
[]の中身は、gulp.task('ここ')に書かれている内容を記述しています。
sassやbrowser-syncなどのタスクはまだ記述しておらず、gulpfile.jsの下の方に書いています。

gulpfile.js一部
gulp.task('default', ['sass', 'browser-sync', 'pug', 'watch']);

フォルダ内の監視

次は、gulp.watchを用いてファイルの監視を行っている記述です。watchでsassフォルダとpugフォルダに入っているファイルを監視しています。
何か変更があればgulp.start([])でgulp.task('sass')またはgulp.task('pug')のタスクを実行させています。

gulp.task('watch', () => {})と書いており、() => {}は見たことない方もおられるかもしれませんが、function(){}の略称です。

gulpfile.js一部
//sassとpugの監視をして変換処理させる
gulp.task('watch', () => {
    gulp.watch(['./sass/**'], () => {
        gulp.start(['sass']);
    });
    gulp.watch(['./pug/**'], () => {
        gulp.start(['pug']);
    });
});

sassからcssに変換

次は、sassをcssファイルに変換するタスクについてです。
処理の内容は以下の通りです。

  • 対象のscssファイルをgulp.srcで指定
  • plumberでcssに変換する際にエラーが起きた際に強制終了しないようにする
  • sass()でsassをcssに変換
  • gulp.destで変換したcssファイルを./cssフォルダに入れる
  • ブラウザに変更をinjectする
gulpfile.js一部
//sassをcssに変換
gulp.task("sass", () => {
	gulp.src("./sass/**/*scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
	.pipe(sass())
	.pipe(gulp.dest("./css"))
        //reloadせずにinjectする
        .pipe(browserSync.stream())
});

pugからhtmlに変換

pugに関してもsassとほぼ同様です。

  • 対象のpugファイルをgulp.srcで指定
  • plumberでhtmlに変換する際にエラーが起きた際に強制終了しないようにする
  • pug()でpugをhtmlに変換
  • gulp.destで変換したhtmlファイルを./に置く
gulpfile.js一部
//pugをhtmlに変換
gulp.task("pug", () => {
    var option = {
        pretty: true
    }
    gulp.src("./pug/**/*.pug")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(pug(option))
        .pipe(gulp.dest("./"))
});

ブラウザの起動とファイル変更時にリロード

次は、ブラウザの起動とファイルの更新時にリロードを行うタスクです。
browserSync({server:{baseDir: './'}});ではブラウザを起動するルートを指定し、そこにあるフォルダをブラウザで表示します。
また、jsファイルやpugが変換したhtmlファイル等の監視をして、変更があればreloadタスクに記述されているbrowserSync.reload();でブラウザのリロードを自動的に行います。

gulpfile.js一部
//ブラウザ表示
gulp.task('browser-sync', () => {
    browserSync({
        server: {
            baseDir: "./"   //サーバとなるrootディレクトリ
        }
    });
    //ファイルの監視
    //以下のファイルが変わったらリロードする
    gulp.watch("./js/**/*.js",     ['reload']);
    gulp.watch("./*.html",         ['reload']);
});
//ブラウザリロード処理
gulp.task('reload', () => {
    browserSync.reload();
});

実行方法

まず初めに、最初に書いたsassとpugをcssとhtmlに変換しましょう。

CommandPrompt
gulp sass
gulp pug

その後、以下のコマンドを実行するとブラウザが立ち上がります。

CommandPrompt
gulp

gulpで立ち上げている間、scssファイルとpugファイルを少し変更してみましょう。
変更したファイルを保存すると自動的にsass⇒css,pug⇒htmlと変換し、ブラウザがリロードされると思います。

今回作成したもの

今回作成したテンプレートはgithubにあげておきますので、よければご利用ください。

クローンを行った後、以下のコマンドで動くはずです。

CommandPrompt
npm i

その後、gulpで起動できると思います。

CommandPrompt
gulp

参考文献

91
106
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
91
106

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?