過去記事「Browserifyを使ってnpmのパッケージにあるjQueryを読み込む」にて、Browserifyの具体例な使い方などについてまとめていましたが、今回はGulpでBrowserifyを使えるようにタスクとして登録する方法について見ていきたいと思います。   Browserifyは実行時に対象となるソースコードファイルのパスと、生成先のディレクトリを指定する必要がありますが、都度コマンドで入力するのはかなり手間になってしまうので、Gulpなどのタスクランナーにタスクとして登録してしまうと手軽に使うことができます。今回はBabelを使ったトランスパイルのタスクと合わせて実行できる内容になっています。Babelを使ったトランスパイルについては過去記事「GulpでBabelを使ったJavascriptをトランスパイルする環境を構築する」をご覧ください。   では、早速必要なモジュールをインストールしていきます。ここではBabelに関する必要なモジュールはすでにインストールされているものとして割愛させていただきます。

$ npm install --save-dev browserify through2

  GulpでBrowserifyを使う場合には本体のモジュールである「browserify」の他に「through2」というのも必要になります。パッケージのインストールが完了すると「package.json」に追記されているのが確認できます。 【package.json】※一部省略

{
 ......
 "devDependencies": {
  ......
  "browserify": "^16.5.1",
  "through2": "^3.0.1"
  ......
 }
 ......
}

  続けて「gulpfile.js」にタスクを追加していきます。Babelのタスク内に追加する形になりますが、先にBrowserifyで外部のモジュールを読み込んでから、Babelを通すような処理の流れにしていきます。（下記のコードはGulpの4系に合わせた記述になっています） 【gulpfile.js】

const { src, dest, watch } = require("gulp"),
 plumber = require('gulp-plumber'),
 notify = require('gulp-notify'),
 rename = require('gulp-rename'),
 browserify = require('browserify'),
 through2 = require('through2'),
 babel = require('gulp-babel'),
 sourcemaps = require('gulp-sourcemaps'),
 concat = require('gulp-concat'),
 uglify = require('gulp-uglify'),

const taskJs = (done) => {
 const browserified = through2.obj((file, encode, callback) => {
  browserify(file.path)
   .bundle((error, response) => {
    if(error) {
     return callback(error);
    }
    file.contents = response;
    callback(null, file);
   });
  });
 src('src/es6/**/*.js')
  .pipe(browserified)
  .pipe(plumber(
   { errorHandler: notify.onError('Error: <%= error.message %>') }
  ))
  .pipe(sourcemaps.init())
  .pipe(babel(
   { presets: ['@babel/preset-env'] }
  ))
  .pipe(concat('main.js'))
  .pipe(uglify())
  .pipe(rename(
   { extname: '.min.js' }
  ))
  .pipe(sourcemaps.write('../maps'))
  .pipe(dest('dist/assets/js'));
  done();
}

// Watch
const taskWatch = (done) => {
 watch('src/es6/*.js', taskJs);
 done();
}

exports.default = taskWatch;

  必要なモジュールを読み込んだら、まずは、browserifiedという変数で定義している部分に注目します。ここではthrough2を使ってオブジェクトを作成することで、独自の処理としてpipe()関数に渡してあげることができます。その中でBrowserifyを使って外部のモジュールを読み込みます。   そして、Gulpのタスク内で実行されるように処理をつなげていきます。ここではBabelを通す前に実行することで、外部の読み込んだモジュールに対してもBabelを適用させることができます。あとは同じようにタスクを記述していきます。watchタスクとしておけば便利ですね。   これで対象のソースファイル側で外部のモジュールを読み込むことができるようになります。例としてnpmのパッケージとしてインストールしたjQueryをrequire()で読み込んでみます。 【src/Javascript】

const $ = require('jQuery');
$(function(){
 alert("jQueryを読み込みました！");
});

  タスクを実行し、生成されたJavascriptファイルを確認してみると、きちんとjQueryのライブラリとなるソースコードがインクルードされているのが確認できます。これで、ソースファイルの中でも外部モジュールのスクリプトを利用することができるようになります。

【dist/Javascript】
function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}
..........
var r,i=e("jQuery");$(function(){alert("jQueryを読み込みました！");});,{jQuery:1}]},{},[2]);

  Browserifyはブラウザ側でもrequire()が使えるようになり、外部モジュールを利用することができます。そこでGulpと併用することで、より導入しやすくなるのではないのでしょうか。とても便利になるので是非試してみてはいかがでしょうか。  

---

  （参考にさせていただいたサイト） Browserify + gulpではまったのでメモ