@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

Web Starter Kitのgulpfile.js内で使用されているプラグインについて調べてみた

regular gulp web starter kit

最近話題になっていますね、Web Starter Kit。
タスクランナーにGulpを使っているとのことで、早速中身を確認してみました。

その中で使用されているプラグインについてまとめました。
以下がgulpfile.js内に記述されているプラグイン一覧です。

それぞれどのようなプラグインなのかを見ていきます。

browser-sync

ブラウザの動きを同期してくれるプラグイン。
詳しいことは下記の参考サイトを確認してみると幸せになれるかもしれません。

記述箇所: gulpfile 142行目

browserSync({
  notify: false,
  // Run as an https by uncommenting 'https: true'
  // Note: this uses an unsigned certificate which on first access
  //       will present a certificate warning in the browser.
  // https: true,
  server: {
    baseDir: ['.tmp', 'app']
  }
});

ドキュメントルートを指定し、エラー通知を表示させない設定でブラウザを同期させます

del

ファイルを削除するプラグインです。

記述箇所: gulpfile 138行目

gulp.task('clean', del.bind(null, ['.tmp', 'dist']));

拡張子「tmp」のファイルとdistディレクトリを削除します。

gulp

みんなご存知gulp
最近広まってきたタスクランナーです。

gulp-autoprefixer

CSSにベンダープレフィックスをいい感じに付けてくれるプラグイン。
Can I useのデータを元にベンダープレフィックスを追加したり削除したりしてくれます。
設定で対応ブラウザを細かいところまで設定できるのもありがたいです。

記述箇所: gulpfile 138行目

.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))

AUTOPREFIXER_BROWSERSに書かれている設定を元にベンダープレフィックスをつけたり消したりしています。

gulp-cache

キャッシュを利用できるようにするプラグインです。

記述箇所: gulpfile.js 53行目〜

gulp.task('images', function () {
  return gulp.src('app/images/**/*')
    .pipe($.cache($.imagemin({
      progressive: true,
      interlaced: true
    })))
    〜

app/images/*/の中でキャッシュの無い画像のみgulp-imageminで最適化しています。

gulp-changed

変更があったファイルのみ抽出するプラグインです。

記述箇所: gulpfile.js 83行目〜

gulp.task('styles', function () {
  // For best performance, don't add Sass partials to `gulp.src`
  return gulp.src([
      'app/styles/*.scss',
      'app/styles/**/*.css',
      'app/styles/components/components.scss'
    ])
    .pipe($.changed('.tmp/styles', {extension: '.css'}))
    〜

tmp/stylesディレクトリの中で、変更があった拡張子「.css」ファイルのみ抽出しています
抽出されたファイルのみ次の処理に回されます。

gulp-csso

CSSを圧縮してくれるプラグインです。 gulpfile.jsでは以下の様な使い方をしている。

記述箇所: gulpfile.js 125行目

.pipe($.if('*.css', $.csso()))

拡張子が「.css」であれば、CSSをMinifyする

gulp-if

gulpfile.js内でif文っぽいものが使えるようになるプラグインです。

記述箇所: gulpfile.js 125行目他

.pipe($.if('*.scss', $.rubySass({
  style: 'expanded',
  precision: 10
})

拡張子が「.scss」のファイルであればexpanded形式でコンパイルしています。
そうでないファイルは何もしません。

gulp-imagemin

PNG, JPEG, GIF, SVG形式のファイルを圧縮&最適化してくれるプラグインです。

記述箇所: gulpfile 55行目〜

.pipe($.cache($.imagemin({
  progressive: true,
  interlaced: true
})))
.pipe(gulp.dest('dist/images'))

キャッシュにない画像ファイルを圧縮, 最適化した後dist/imagesに出力しています。 このうち、JPEGはプログレッシブJPEG、GIFはインターレースGIFに変換するよう設定しています。

gulp-jshint

JSの構文チェックが出来るJSHintが使えるようになるプラグインです。

記述箇所: gulpfile 47行目

.pipe($.jshint())

gulp-load-plugins

package.jsonに書かれたプラグインのうち、指定された構文に合うプラグインを一括で読み込んでくれるプラグインです。
デフォルトでは"gulp-"と書かれたプラグインを読み込みます。

記述箇所: gulpfile.js 24行目

var $ = require('gulp-load-plugins')();

この関数で読み込まれたプラグインは"$.hoge()"といった形式で利用することが出来ます。

gulp-minify-html

HTMLファイルを圧縮するプラグインです。

記述箇所: gulpfile.js 131行目

.pipe($.if('*.html', $.minifyHtml()))

拡張子が「HTML」のファイルの時、ファイルを圧縮しています。

gulp-replace

ファイル名の文字を、指定した文字に置換するプラグインです。

記述箇所: gulpfile.js 129行目

.pipe($.replace('components/components.css', 'components/main.min.css'))

components.cssというファイル名をmain.min.cssに置換しています。

gulp-ruby-sass

SassのファイルをCSSにコンパイルするプラグインです。
同様のプラグインにgulp-sassがありますが、大きな違いはコンパイルの形式を選ぶことが出来ます。

記述箇所: gulpfile.js 91行目

.pipe($.if('*.scss', $.rubySass({
  style: 'expanded',
  precision: 10
})

拡張子が「scss」のファイルの時にexpanded形式で、少数以下は10桁で出力しています。

gulp-size

プロジェクトで使用するファイルのサイズをコンソールに出力するプラグインです。

記述箇所: gulpfile.js 99行目

.pipe($.size({title: 'styles'}));

stylesディレクトリ以下のファイルのサイズを出力しています。

gulp-uglify

JSファイルの圧縮をするプラグインです。

記述箇所: gulpfile.js 109行目

.pipe($.if('*.js', $.uglify({preserveComments: 'some'})))

拡張子が「js」のファイルの時、そのファイルを圧縮します。
このとき「!」で始まるコメントまたは「@preserve, @license, @cc_on」が含まれているコメントは残します。

gulp-uncss

使用されていないCSSを削除するプラグインです。

記述箇所: gulpfile.js 113行目〜

.pipe($.if('*.css', $.uncss({
  html: [
    'app/index.html',
    'app/styleguide/index.html'
  ],
  // CSS Selectors for UnCSS to ignore
  ignore: [
    '.navdrawer-container.open',
    /.app-bar.open/
  ]
})))

「app/index.html」、「app/styleguide/index.html」内で使用されていないCSSを削除します。
このとき、「.navdrawer-container.open」「.app-bar.openが含まれているセレクタ」は削除の対象から外しています。

gulp-useref

「"<!-- build -->"」「"<!-- endbuild -->"」で囲まれた部分のファイルを連結したり削除したりするプラグインです。
下記のように記述を変更してくれます。

<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
<!-- endbuild -->

↓

<link rel="stylesheet" href="css/combined.css"/>

記述箇所: gulpfile.js 127行目

.pipe($.useref())

jshint-stylish

jshintで表示される文言のスタイリングをしてくれるプラグインです。

記述箇所: gulpfile 47行目

.pipe($.jshint.reporter('jshint-stylish'))

jshintを使うとき、「jshint-stylish」というスタイルファイルを指定していしています。

psi

ページの表示速度をコンソールで表示してくれるプラグインです。

記述箇所: gulpfile.js 181行目〜

gulp.task('pagespeed', pagespeed.bind(null, {
  // By default, we use the PageSpeed Insights
  // free (no API key) tier. You can use a Google
  // Developer API key if you have one. See
  // http://goo.gl/RkN0vE for info key: 'YOUR_API_KEY'
  url: 'https://example.com',
  strategy: 'mobile'
}));

"gulp pagespeed"とコマンドを打つと、https://example.comというサイトをモバイル端末で見た時のスピードを表示してくれます。

-　公式サイト: psi

require-dir

指定したディレクトリ内のファイルを取得するプラグインです。

記述箇所: gulpfile.js 190行目

// Load custom tasks from the `tasks` directory
try { require('require-dir')('tasks'); } catch (err) {}

tasksディレクトリにある、自分で作成したタスクを読み込むよう記述しています。

-　公式サイト: require-dir

run-sequence

タスクの実行順を制御するプラグインです。
gulpを使用する上で結構重要なプラグインではないでしょうか。

記述箇所: gulpfile.js 176行目

runSequence('styles', ['jshint', 'html', 'images', 'fonts', 'copy'], cb);

「styles」というタスクを処理した後、「jshint, html, images, fonts, copy」というタスクを並行して処理を行います

gulpfile.js内でどういうプラグインが使用され、どういう処理が行われているかを大体把握出来ました。
これを元にオレオレgulpfile.jsを作れば良い物が出来そうな気がします。