browserifyとgulpでフロントエンド開発

概要
パッケージ管理ツールの導入
- npmとは
- npmのインストール
- npmの使い方
  - npm init
  - npm install
  - パッケージを使用する
    - scriptタグを使用する
    - requireを使用する
モジュールバンドラーの導入
- browserifyのインストール
- requireを使ったjQueryの使用方法
タスクランナーの導入
- タスクランナーとは
- gulpのインストール
- gulpからblowserifyを動作させる
- gulp-clean-cssでCSSを圧縮(minify)
より便利に使うためには
- gulp-watchのインストール
終わりに

概要

このチュートリアルは次のような人をターゲットとしたチュートリアルです。
1. HTML,CSS,JSは作れるがその後のツールを利用したことがない人
2. 最近のフロントエンド開発がわからない
このチュートリアルを通してできること
- パッケージ管理ツール(npm)によるライブラリの管理
- モジュールバンドラー(browserify)によるjavascriptの依存関係を解決
- タスクランナー(gulp)によるファイルの監視&圧縮(minify)を行う

現在のフロント界隈は移り変わりが激しく、このチュートリアルも古くなりつつありますが、一見難しそうに聞こえるフロントエンド開発ってこんなもんなんだと理解していただけたら幸いです。基本的に開発工程はWindowsもMacも同じはずですが、私の環境がMacであるためWindowsとは一部インストールなどが異なる場合があります。また、私も勉強中のため間違っていることがあればご指摘お願いします。

パッケージ管理ツール(npm)の導入

npmとは

npmとは Node Package Managerの略でNode.jsのパッケージモジュールを管理するためのツールです。 Nodeをインストールするとnpmもインストールされるので、Node.jsのインストールを行います。 npmをインストールすることにより、パッケージのバージョンを一括管理することができます。

npmのインストール

Windowsでのダウンロード
1. npmインストーラのダウンロードこちらからダウンロードを行います。
2. 自分のPCにあったインストーラーをダウンロードしてください
3. インストーラーを実行します。
4. 無事インストールが完了したら、コマンドプロンプトを立ち上げてください。
5. コマンドプロンプト上に$ node --versionと入力してくださいバージョンが表示されればインストールは成功です。
Macでのダウンロード
- MacでのダウンロードはHomebrew経由でインストールします。次にnodebrewをインストールし、最後にNode.jsをインストールします。
  - HomebrewとはMac用パッケージマネージャ
  - nodebrewとはNode.jsのバージョン管理ツール
- Homebrewのインストールターミナルを開き、こちらにあるスクリプトを実行インストール完了後、$ brew -vでバージョンが表示されます。
- nodebrewのインストールここからはHomebrewを使用してインストールを行います。ターミナル上に$ brew install nodebrewを記入します。インストール完了後、$ node brew -vと入力し、バージョンが表示されればインストール完了です。
- Node.jsのインストール最後にNode.jsをインストールします。 $ nodebrew ls-remoteを実行すると、インストール可能なバージョンを表示されます。 $ nodebrew install-binary {version}を実行するとこちらで必要なバージョンを指定してインストールできます。最新バージョンを取得するには$ nodebrew install-binary latestを実行することでインストールができます。万が一インストール時にエラーが発生する場合、 $ mkdir -p ~/.nodebrew/srcを実行しディレクトリを作成しましょう。

npmの使い方

npm init

まずはじめにターミナル上で開発用フォルダまで移動します。次にnpm initを実行してください。これによりpackage.jsonが生成されます。以下のような表示がされますが、すべてエンターキーでスキップしても問題ありません。

package
package name: (a)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: techacademy
license: (ISC)

全て終了するとpackage.jsonが生成されます。

json:package
    {
        "name": "front-dev",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1"
        },
    "author": "",
    "license": "ISC"
    }

先ほどスキップした内容が書かれています。 package.jsonが生成されていたらnpmの初期作業は完了です。

npm install

さっそくnpmにパッケージをインストールしていきましょう今回はjqueryをインストールしていきます。 $ npm install jqueryを実行します。うまくインストールが完了したら$ npm info jquery versionsを実行してみましょうバージョンが確認出来たらインストール完了です。インストールされているパッケージはpackage.jsonでも確認することができます。

```json:package.json
{
    "name": "front-dev",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "dependencies": {
        "jquery": "^3.2.1"
    }
"author": "",
"license": "ISC"
}
```
dependenciesという項目が追加され、jqueryのバージョンが書かれていると思います。
こちらでもインストール済みのパッケージを確認することもできます。

パッケージを使用する

scriptタグを使用する

scriptタグを使用し、インストールしたパッケージを利用していきます。以下のようなhtmlとjavascriptを準備して、ブラウザで開いてください。

<!doctype html>
<head>
    <meta charset="utf-8">
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="test.js"></script>
    
    <title>sample</title>
</head>
<body>
    <div id="jquery-test"></div>
</html>

(function($){
    $("#jquery-test").text("hello jQuery!");
})(jQuery);

画面に「hello jQuery!」と表示されたでしょうか。表示されていた場合、jQueryが使用できています。

この方法はhtml側で読み込むライブラリを読み込ませておく必要があり、 JavaScriptを分割したりパッケージが多くなったりすると複雑になり管理が難しくなっていきます。このためhtmlで表記しJavaScriptで読み込むのは最近の主流ではないようです。ここからもう一つの方法としてrequireを使用した方法をご紹介します。

requireを使用する

require関数を使用してパッケージを管理します。 requireとはコードをモジュール化して、必要なファイルを必要な時に呼び出して使えるといったものです。しかしブラウザにはrequireが実装されていないので単純に書くだけでは動きません。つまりrequireを利用できるようにする必要があります。今回はbrowserifyを利用してrequireを使用できるようにしましょう。

モジュールバンドラーの導入

browserifyのインストール

npm install --save-dev browserifyと入力しnpmにインストールします。 jQueryをインストールした際と違い、--save-devというのがつけえ加えられていることにお気づきになったでしょうか。これはこのライブラリをdev(開発)するときに使用するものと分けるという意味合いで使用します。

インストールが完了したらrequireを使用した方法をみていきましょう。

requireを使ったjQueryの使用方法先ほど作成したhtmlとJavaScriptを変更します。

<!doctype html>
<head>
    <meta charset="utf-8">
    <!-- 先ほどまでnpmから読み込んでいたjQueryは消します
        <script src="node_modules/jquery/dist/jquery.js"></script>
    -->
    <!-- 読み込むjsはindex.jsに変更しましょう -->
    <script src="index.js"></script>
    
    <title>sample</title>
</head>
<body>
    <div id="jquery-test"></div>
</html>

var jQuery = require("jquery"); //新たに追加します。

(function($){
    $("#jquery-test").text("hello jQuery!");
})(jQuery);

変更したJavaScriptをbrowserifyで読ませれば完了です $ ./node_modules/.bin/browserify test.js > index.js 実行するとindex.jsが新しくできたかと思います。このindex.jsにはrequireしたjQueryと、先ほど記述したコードが含まれています。 htmlをブラウザで開くと、requireを使用しても先ほどと同じように「hello jQuery!」が出たかと思います。

タスクランナーの導入

browserifyを使用することで、パッケージを管理しつつrequireも使用できるようになりかなりモダンなコーディングになってきたかと思います。しかし、実際の開発ではbrowserifyをかけて、htmlやcssや画像などを圧縮してSASSやLESSをコンパイルして…などなど完成までにはコーディング以外にも数多くの作業があります。特に最近ではPCでWEBサイトを閲覧する場合以外に、スマートフォンを利用して閲覧することも増えてきました。 3秒以上かかると40%以上のユーザーは離脱するとも言われていますし、表示速度を度外視することはできません。サイトのデータ量を抑えるためにもhtmlやcss,Javascriptの圧縮や、データの大部分を占める画像は圧縮処理をしたほうが良いでしょう。

しかし、これをすべて行うのはツールなしでは量が多すぎて難しいと思います。そこでこれを1つにまとめて解決してくれるタスクランナーを導入していきましょう

タスクランナーとは

browserifyや画像の圧縮、SASSのコンパイル、ベンダープレフィックスを自動付与などなど様々な作業(タスク)を走らせてくれる優れものです。タスクランナーで有名なのはGrantとgulpです。今回はgulpを使用してhtmlやcss,js,画像(.jpg)を圧縮してみましょう

gulpのインストール

ターミナル上にコマンドを入力し、インストールしていきます。 npm install --save-dev gulp こちらもdev(開発)するときに使用するもののため、--save-devをつけてインストールをしましょう

gulpからblowserifyを動作させる

gulpを動作させるためにはgulpのビルドファイルgulpfile.jsを準備する必要があります。 npmと同じディレクトリ内にgulpfile.jsを作成しましょう。

var gulp = require("gulp");
var browserify = require("browserify");
var fs = require("fs");

gulp.task("build", function() {
    var out = fs.createWriteStream('./src/index.js');

    browserify({
        entries: ['dist/test.js']
    })
    .bundle()
    .pipe(out);
});

次にgulpfile.jsと同じディレクトリ内にdistとsrcというフォルダを追加します。以降srcからのデータを読み取ってdist内に出来上がったものを保存していきます。

これでbrowserifyを呼び出す準備ができました。 buildというタスクで呼び出します。 package.jsonから呼び出すようにしましょう package.jsonを以下を書き加えてください

{
  "scripts": {
    "build": "gulp build"
  },
  ...

ターミナル上でnpm run buildと入力することで、gulpのbuildのタスクが呼び出されbrowserifyができるようになりました。

gulp-clean-cssでCSSを圧縮(minify)

先ほども言いましたが、表示速度を改善するためにはデータを圧縮しデータ量を抑える必要があります。今回は、gulp-clean-cssというライブラリを使用したCSSの圧縮を行っていきましょう。ここでいう圧縮とはminifyのことで、人間がコードを読む際には必要である改行や、インデントといった内容を削除し少しでも容量を小さくしよう、といったものです。まずはじめに、npmにインストールをしていきます。 npm install --save-dev gulp-clean-css npm install --save-dev gulp-rename 次にgulpfileにコマンドを追加していきましょう。

var gulp = require("gulp");
var browserify = require("browserify");
var fs = require("fs");

//css-minify
cleanCSS = require('gulp-clean-css');
//rename
var rename   = require("gulp-rename");

gulp.task("build", function() {
    var out = fs.createWriteStream('./src/index.js');

    browserify({
        entries: ['dist/test.js']
    })
    .bundle()
    .pipe(out);
});

//CSSをminifyするコマンド
gulp.task('minify-css', () => {
    return gulp.src('./src/css/*.css')
      .pipe(cleanCSS())
      .pipe(rename({
          extname: '.min.css'
        }))
      .pipe(gulp.dest('dist/css'));
  });

追加したgulp-clean-cssによって記入したCSSファイルがminifyされます。またminifya済みのファイルはabc.min.cssのように表記しminify済みであることを示していることが多いです。

こちらも起動のためにはpackage.jsonに記入する必要があります。

{
  "scripts": {
    "minify-css": "gulp css"
  },
  ...

これにより、ターミナル上でnpm run cssと記入することでcssがminifyできます。

今回は触れませんが、他にもhtmlやjavascript,画像に対しても私は圧縮を行っています。どれもやり方はどれも似ているため、導入に苦労はしないと思います。私が使用しているライブラリを以下に記述してありますので、導入したい方は参考にしてみてください。 - HTMLをminify - gulp-minify-html - javascriptをminify - gulp-uglify - 画像を圧縮 - gulp-imagemin - 私は.png, .jpgに対し圧縮されるようにしています。表示サイズによりますがquality: '45-60'で動作させています。

より便利に使うためには

ここからはgulpを使ったより便利な方法watchについて説明します。 watchとはファイルの変更を監視し、タスクを実行することができるものです。 watchを導入することで作業がグッと楽にすることができます。

このチュートリアルではnpm run buildでjavascriptでrequireが動作するようにし、javascriptが使える状態にしてきました。開発の際、一部を変更しては動作させる、ということの繰り返しになるかと思います。少しの修正で毎回npm run buildを実行しなければいけないのはちょっと大変です。ファイルを監視し、自動でblowserifyを動作させることを可能にするgulp-watchを使ってみましょう。

gulp-watchのインストール

gulp-watchをインストールしていきます。ターミナル上でnpm install --save-dev gulp-watchと入力してください。

その後gulpfile.jsにコマンドを入力していきます。

var gulp = require("gulp");
var browserify = require("browserify");
var fs = require("fs");

//css-minify
cleanCSS = require('gulp-clean-css');
//rename
var rename   = require("gulp-rename");

//ファイルの監視
var watch = require('gulp-watch');

gulp.task("build", function() {
    var out = fs.createWriteStream('./src/index.js');

    browserify({
        entries: ['dist/test.js']
    })
    .bundle()
    .pipe(out);
});

//CSSをminifyするコマンド
gulp.task('minify-css', () => {
    return gulp.src('./src/css/*.css')
      .pipe(cleanCSS())
      .pipe(rename({
          extname: '.min.css'
        }))
      .pipe(gulp.dest('dist/css'));
  });

//ファイルをwatchして自動でタスクを動作
gulp.task("watch", function () {
    //ここにタスクを記入し、browserifyとcssのminifyを自動化
    gulp.watch("src/js/*.js", gulp.parallel(["build"]));
    gulp.watch("src/css/*.css", gulp.parallel(["minify-css"]));
});

最後にpackage.jsonに記入していきましょう。

{
  "scripts": {
    "watch": "gulp watch"
  },
  ...

このように記述することでnpm run watchと入力すれば今までbrowserifyとCSSの自動化ができています。ではgulpfile.jsについて詳しく見ていきます。

gulp.task("watch", function () {

});

今までも何度か出てきているものですが、この記述内に書かれたものがwatchが呼び出された際に実行されるコマンド、ということになります。 gulp.watch("src/js/*.js", gulp.parallel(["build"]));ですが、 src/js/*.js"は監視したいファイルの位置を指定します。ファイルに変更があった場合、動作します。何を動作させるのか書かれているのが後半のgulp.parallel(["build"])です。この場合buildしてね、ということですね。 gulp.parallelですが gulp v4 で追加されたものです。 gulp.seriesとgulp.parallelの2種類あります。 - gulp.series : 順番に実行 - gulp.parallel : 並列に実行

終わりに

フロントエンド界隈は移り変わりが激しく、すぐに別のツールが主流になったりするためフロントエンドと聞くと難しそうだとか思う方もいるかと思いますが案外やってみるとそんなに複雑ではなかったという印象です。昔に少し趣味で触ったことがある程度の私のような骨董品みたいなhtml知識で止まっていた人が最先端でなくても少しはフロントエンドといえる環境に近づけられたならうれしい限りです。

2019年3月現在、browserifyやgulpが主流から外れてきているそうです。 webpackを導入し、npm scriptで動作させるというのが主流になりつつあるそうです。なんとなくこのチュートリアルで感覚をつかんで、これを足掛かりにwebpackなどの学習につなげられたらとてもうれしいです。

arc tech blog