Google Web Starter Kitのgulpfileを翻訳してみた

Google Web Starter Kit
GitHub - google/web-starter-kit

javascriptを覚えるために静的開発環境を整えようとして、タスクランナーフレームワークgulpを導入。
ついでにcssフレームワークは話題のGoogle Web Starter Kitを使ってみる。

Google Web Starter Kitの純正gulpfileを読んで注釈をつけてみたので、投稿。

use scrict

'use strict';

ストリクトモード（厳格モード）宣言。
開発者がよりエラーを探しやすくするよう、厳格なエラーチェックが行われるモード。

Include

// Include Gulp & Tools We'll Use
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var del = require('del');
var runSequence = require('run-sequence');
var browserSync = require('browser-sync');
var pagespeed = require('psi');
var reload = browserSync.reload;

以下のパッケージを変数として宣言

• gulp
• gulp-load-plugins
• gulp-del
• gulp-run-sequence
• gulp-browser-sync
• gulp-pagespeed
• gulp-reload

autoprefixer

var AUTOPREFIXER_BROWSERS = [
  'ie >= 10',
  'ie_mob >= 10',
  'ff >= 30',
  'chrome >= 34',
  'safari >= 7',
  'opera >= 23',
  'ios >= 7',
  'android >= 4.4',
  'bb >= 10'
];

ブラウザオートプレフィックス設定。
gulp-autoprefixer

Lint Javascript

// Lint JavaScript
gulp.task('jshint', function () {
  return gulp.src('app/scripts/**/*.js')
    .pipe(reload({stream: true, once: true}))
    .pipe($.jshint())
    .pipe($.jshint.reporter('jshint-stylish'))
    .pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
});

Lint JavaScriptを設定。
jsの構文チェックをしてくれる。
app/scripts以下の全てのjsファイルが対象。
browserSyncがアクティブでなければ、jshistが動かない。
gulp-jshist

Optimize Images

// Optimize Images
gulp.task('images', function () {
  return gulp.src('app/images/**/*')
    .pipe($.cache($.imagemin({
      progressive: true,
      interlaced: true
    })))
    .pipe(gulp.dest('dist/images'))
    .pipe($.size({title: 'images'}));
});

画像の圧縮処理後、dist/imagesに出力。
サイズをコンソールへ出力。
app/images以下の全てのファイルが対象。
gulp-imagemin

Copy All Files At The Root Level (app)

// Copy All Files At The Root Level (app)
gulp.task('copy', function () {
  return gulp.src(['app/*','!app/*.html'], {dot: true})
    .pipe(gulp.dest('dist'))
    .pipe($.size({title: 'copy'}));
});

appフォルダに存在する__htmlファイルを除く__全てのファイルをdistに出力。
階層化された（appルートより深い）ファイルはコピーされない。
その後サイズをコンソールへ出力。

Copy Web Fonts To Dist

// Copy Web Fonts To Dist
gulp.task('fonts', function () {
  return gulp.src(['app/fonts/**'])
    .pipe(gulp.dest('dist/fonts'))
    .pipe($.size({title: 'fonts'}));
});

app/fonts以下の全てのファイルをdist/fontsへ出力。
その後サイズをコンソールへ出力。

AUtomaticallu Prefix CSS

// Automatically Prefix CSS
gulp.task('styles:css', function () {
  return gulp.src('app/styles/**/*.css')
    .pipe($.changed('app/styles'))
    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
    .pipe(gulp.dest('app/styles'))
    .pipe($.size({title: 'styles:css'}));
});

app/styles/以下の全てのCSSファイルを対象に、ブラウザプレフィックスを自動で付ける。
その後サイズをコンソール出力。
出力先フォルダが同じところだということにも注意。

Compile Sass For Style Guide Components (app/styles/components)

// Compile Sass For Style Guide Components (app/styles/components)
gulp.task('styles:components', function () {
  return gulp.src('app/styles/components/components.scss')
    .pipe($.rubySass({
      style: 'expanded',
      precision: 10,
      loadPath: ['app/styles/components']
    }))
    .on('error', console.error.bind(console))
    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
    .pipe(gulp.dest('app/styles/components'))
    .pipe($.size({title: 'styles:components'}));
});

app/styles/components/components.scssのSASSコンパイルを行う。
オプションは表記通り。
エラーの場合はコンソールへ出力。
ブラウザプレフィックスを自動で付ける。
出力先はapp/styles/components。
サイズをコンソール出力。

Compile Any Other Sass Files You Added (app/styles)

// Compile Any Other Sass Files You Added (app/styles)
gulp.task('styles:scss', function () {
  return gulp.src(['app/styles/**/*.scss', '!app/styles/components/components.scss'])
    .pipe($.rubySass({
      style: 'expanded',
      precision: 10,
      loadPath: ['app/styles']
    }))
    .on('error', console.error.bind(console))
    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
    .pipe(gulp.dest('.tmp/styles'))
    .pipe($.size({title: 'styles:scss'}));
});

app/styles/**/*.scss以下のcomponents.scssを除く全てのSASSファイルをコンパイル。
オプションは表記通り。
エラーの場合はコンソールへ出力。
ブラウザプレフィックスを自動で付ける。
出力先は.tmp/styles。
サイズをコンソール出力。

Output Final CSS Styles

// Output Final CSS Styles
gulp.task('styles', ['styles:components', 'styles:scss', 'styles:css']);

上記の３つのstyles:で定義したタスクをまとめて実行。
並列処理される。

Scan Your HTML Fot Assets & Optimize Them

// Scan Your HTML For Assets & Optimize Them
gulp.task('html', function () {
  return gulp.src('app/**/*.html')
    .pipe($.useref.assets({searchPath: '{.tmp,app}'}))
    // Concatenate And Minify JavaScript
    .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
    // Remove Any Unused CSS
    // Note: If not using the Style Guide, you can delete it from
    // the next line to only include styles your project uses.
    .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/
      ]
    })))
    // Concatenate And Minify Styles
    .pipe($.if('*.css', $.csso()))
    .pipe($.useref.restore())
    .pipe($.useref())
    // Update Production Style Guide Paths
    .pipe($.replace('components/components.css', 'components/main.min.css'))
    // Minify Any HTML
    .pipe($.if('*.html', $.minifyHtml()))
    // Output Files
    .pipe(gulp.dest('dist'))
    .pipe($.size({title: 'html'}));
});

appフォルダ以下の全てのhtmlファイルを対象に、本番環境用にコードを削除。
例としてはapp/index.htmlの28〜32行目を削除する。
次に全てのapp以下のjsファイルを対象に、ひとつのjsファイルに結合と圧縮をする。
次に全てのapp以下のCSSファイルを対象に、app/index.htmlとapp/styleguide/index.htmlの中で使われていないセレクタへのスタイルを自動削除。
CSSセレクタ.navdrawer-container.open、.app-bar.openは除く。
その後全てのCSSファイルをひとつに結合、圧縮。
components/components.cssをcomponents/main.min.cssにリネーム。
app以下の全てのhtmlファイルを圧縮。
上記で生成されたファイルをdistに出力。
サイズをコンソール出力。

Clean Output Directory

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

.tmp、distフォルダを削除。

Watch Files For Changes & Reload

// Watch Files For Changes & Reload
gulp.task('serve', function () {
  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']
    }
  });

  gulp.watch(['app/**/*.html'], reload);
  gulp.watch(['app/styles/**/*.scss'], ['styles:components', 'styles:scss']);
  gulp.watch(['{.tmp,app}/styles/**/*.css'], ['styles:css', reload]);
  gulp.watch(['app/scripts/**/*.js'], ['jshint']);
  gulp.watch(['app/images/**/*'], reload);
});

.tmpとappフォルダをルートとして仮想サーバーを立てる。
browserSyncを起動。
同フォルダでファイルの変更があった場合ブラウザをリロード。

Build and serve the output from the dist build

// Build and serve the output from the dist build
gulp.task('serve:dist', ['default'], function () {
  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: 'dist'
    }
  });
});

本番環境用のdistフォルダをルートとして仮想サーバーを立てる。

Build Production Files, the Default Task

// Build Production Files, the Default Task
gulp.task('default', ['clean'], function (cb) {
  runSequence('styles', ['jshint', 'html', 'images', 'fonts', 'copy'], cb);
});

gulpコマンドでデフォルトで処理されるタスクを設定。
まずcleanタスクを行い、終了後、runSequenceプラグインの効果で、
styleタスクが処理されたあと、jshint、html、images、fonts、copyのタスクを平行処理する。

Run PageSpeed Insights

// Run PageSpeed Insights
// Update `url` below to the public URL for your site
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コマンドでGoogle Page Speed Insightsを使用できる。

Load custom tasks from the tasks directory

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

自分のタスクをロードする用。

まとめ

勉強になった。
タスクのまとめ方が綺麗。
直列処理させたいときや、if文で動作判定したいときに参考になりそう。
UnCSSは知らないパッケージだったので目から鱗。

注釈間違っているところがあれば是非コメントください！