2018/03/26更新

[フロントエンド] GulpでSourceMapを作成する

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
今日はGulpを用いてSourceMapを作成する方法をブログに書きたいと思います。



目次




ソースマップとは

ソースマップ(SourceMap)は、UglifyJSなどで最適化する前(またはコンパイルする前)のJavascriptを保持したファイルです。ブラウザへの配信ではJavascriptを最適化しますが、その最適化のプログラムに不備があったらデバッグが大変。そんな時に、圧縮したファイルに対応したソースファイルも作っておくことで、エラーの箇所を特定しやすくなります。
詳しくは、以下のサイトをご覧ください。

ソースマップを使用する - 開発ツール | MDN



GulpでSourceMapを作成する

Gulpでソースマップを作成するには、gulp-sourcemapsというライブラリを使います。

インストールはnpmで行います。
$ npm install --save-dev gulp-sourcemaps

使い方は以下のように実装します。
var gulp = require('gulp');
var plugin1 = require('gulp-plugin1');  // Uglifyなどの何らかのプラグイン
var sourcemaps = require('gulp-sourcemaps');

gulp.task('javascript', function() {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())  // ソースマップを初期化
    .pipe(plugin1())          // プラグインでJSを整形
    .pipe(sourcemaps.write()) // ソースマップの作成
    .pipe(gulp.dest('dist'));
});
UglifyJSなどの最適化プラグイン前後で、ソースマップの初期化と作成を行うことで、ソースマップを作成することができます。そのほかの詳しい使い方はリポジトリのREADMEをご確認ください。



最後に

Gulpの処理は色々とできていいですね。他にも使った内容はブログにドシドシと残したいと思います。

最後になりますが本ブログでは、フロントエンド、Swift、PHP、Node.js、Python、Linux、Java、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。