Master PG

プログラムし続ける...

【Polymer Starter Kit】ベンダープレフィックスを意識せずに開発するための環境を整える

【Polymer 1.0】目次へ

環境構築

ベンダープレフィックスを意識せずに開発するための環境を整えるには、まず「BrowsersyncでWEBサーバー環境を整える」を読んでおいてください。その後ここからリポジトリを自身の環境へクローンしてください。

クローンを作成したら次のフォルダへ移動します:

cd /【任意のフォルダ】/polymer-starter-kits/projects/style-task


gulpfile.jsの内容

プロジェクトルートの直下にあるgulpfile.jsで、ベンダープレフィックスに関わる部分を抜粋して説明します。

プラグイン読み込み

今回のタスクに関わるgulpプラグイン読み込み部分の抜粋です:

var path = require('path');
var changed = require('gulp-changed');
var merge = require('merge-stream');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var pleeease = require('gulp-pleeease');
var htmlAutoprefixer = require("gulp-html-autoprefixer");
srcタスク

srcタスクでは、ベンダープレフィックスを付加する関数cssTask()とhtmlTask()を呼び出しています。

/**
 * srcフォルダのファイルに対するタスクを実行します。
 * css, htmlファイル内で定義されたスタイルにベンダープレフィックスを付加します。
 */
gulp.task('src', function (cb) {
  var css = cssTask('src', ['**/*.css']);
  var html = htmlTask('src', ['**/*.html']);
  return merge(css, html);
});

cssTask()はhtmlファイルに対してベンダープレフィックスを付加するための関数で、引数'src'は対象のフォルダを、['**/*.css']はフォルダ内の全てのcssファイルに対してベンダープレフィックスを付加するよう指定しています。htmlTask()はhtmlファイルに対してベンダープレフィックスを付加するための関数で、引数の内容はcssTask()とほぼ同じ意味になります。

最後のmerge(css, html)では指定されたストリーム (cssTask関数とhtmlTask関数の戻り値) を並列に実行することができ、逐次実行するよりも効率よく実行できます。

cssTask()関数

cssTask()関数は、上記のsrcタスクで呼び出されている関数になります:

/**
 * cssファイルのコンパイルを行います。
 * ファイル内で定義されたスタイルにベンダープレフィックスを付加します。
 * @param cssPath トップフォルダを指定(パスの先頭・末尾に「/」は指定しないこと)
 * @param srcs トップフォルダ配下のファイルを指定(ファイル名、グロブを配列で指定)
 */
var cssTask = function (cssPath, srcs) {
  // gulp.src()の引数には、対象のファイルを指定している
  return gulp.src(srcs.map(function (src) {
    return path.join(cssPath, src);
  }))
    // ファイルの生成元と生成先を比較して変更があったかどうかを判断し、
    // 変更があった場合のみcssファイルのコンパイルを行うよう設定
    .pipe(changed(path.join('.tmp', cssPath), {extension: '.css'}))
    // エラー発生時の通知設定
    .pipe(plumber({
      errorHandler: notify.onError("Error: <%= error.message %>")
    }))
    // cssファイルをコンパイルし、ベンダープレフィックスを付加
    .pipe(pleeease({
      // ベンダープレフィックス対象のブラウザ、バージョンを細かく指定できる
      autoprefixer: {"browsers": ["last 4 versions"]},
      // 圧縮の有無 true/false
      minifier: false
    }))
    // コンパイルされたファイルを指定フォルダへ出力
    .pipe(gulp.dest(path.join('.tmp', cssPath)));
};

先頭のgulp.src()ではベンダープレフィックスを付加する対象のファイルを指定しています。cssTask()の引数srcsは複数のファイルを配列で指定できるようになっているため、map()で配列のアイテムごとにパスの加工を行っています。

changed(...)はファイルの生成元と生成先を比較し、変更があった場合のみ処理を行うプラグインで、処理対象のファイルを絞り込むことでパフォーマンスを確保しています。オプションのextension: '.css'は生成先ファイルの拡張子を指定しています。

plumber(...)は処理中のエラーが原因でタスクが強制停止することを防止するプラグインです。開発中は常にファイルの変更監視を行っていますが、この際エラーが発生すると、この変更監視自体が停止してしまうため、これを防止するために使われています。

plumber(...)の中で使われているnotify(...)は、処理中エラーが発生した場合、コンソールにエラーを表示しただけでは気づかないこともあるので、デスクトップ通知を表示するプラグインです。

pleeease(...)はcssファイルにベンダープレフィックスを付加するプラグインで、その設定を行っています。

最後にgulp.dest(...)でコンパイルされたファイルを指定のフォルダへ出力します。

htmlTask()関数

htmlTask()関数は、cssTask()関数と内容はほぼ同じです:

/**
 * htmlファイルのコンパイルを行います。
 * ファイル内で定義されたスタイルにベンダープレフィックスを付加します。
 * @param htmlPath トップフォルダを指定(パスの先頭・末尾に「/」は指定しないこと)
 * @param srcs トップフォルダ配下のファイルを指定(ファイル名、グロブを配列で指定)
 */
var htmlTask = function (htmlPath, srcs) {
  return gulp.src(srcs.map(function (src) {
    return path.join(htmlPath, src);
  }))
    .pipe(changed(path.join('.tmp', htmlPath), {extension: '.html'}))
    .pipe(plumber({
      errorHandler: notify.onError("Error: <%= error.message %>")
    }))
    // htmlファイルをコンパイルし、ベンダープレフィックスを付加
    .pipe(htmlAutoprefixer())
    .pipe(gulp.dest(path.join('.tmp', htmlPath)));
};

changed(...)では、オプションのextension:に'.html'を指定しています。

htmlAutoprefixer()はhtmlファイルにベンダープレフィックスを付加するプラグインです。

ファイルの変更監視

ここではファイルの変更監視の指定を行います:

gulp.task('serve', ['serve:mock', 'src', 'styles'], function () {
  ...

  // 変更を監視するファイルを指定
  gulp.watch(['src/**/{*.css,*.html,*.js}'], ['src', reload]);
  gulp.watch(['styles/**/{*.css,*.html}'], ['styles', reload]);
});

gulp.watch()の第1引数では監視対象のファイルを指定します。1つ目のgulp.watch()を例にとると、「src」フォルダ配下の全ての「css, html, js」ファイルを監視対象に指定しています。

第2引数ではファイル変更変更があった際に実行するタスクを配列で指定します。ここでreloadが指定されると、ファイル変更があった際、自動的にブラウザがリロードされます。


動作確認


Starter Kitを起動する

プロジェクトルートに移動して、次の2つのコマンドを実行して必要なライブラリをローカルインストールします:

npm install
bower update

次のコマンドでStarter Kitを起動します:

gulp serve

Starter Kitが起動すると、プロジェクトルートの直下に「.tmp」フォルダが作成され、この配下にベンダープレフィックスが付加されたcss, htmlファイルが生成されているはずです。


ベンダープレフィックスが自動で付加されるか確認する

Starter Kitが起動した状態で、cssまたはhtmlファイルにスタイルを追加し、自動でベンダープレフィックスが付加されるか確認してみましょう。

確認用にダミーのスタイルを次のファイルに追加します:

【styles/main.css】

.dummy {
  display: flex;
}

cssまたはhtmlファイルが修正されると、ベンダープレフィックスが自動で付加され、.tmpフォルダ配下に出力されるはずです。次のファイルを開いてみてください:

【.tmp/styles/main.css】

.dummy {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

このようにスタイルが追加され、ベンダープレフィックスが付加されていれば成功です!


【Polymer 1.0】目次へ