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

  • 127
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

web-starter-kit.png

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']);

上記の3つの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.htmlapp/styleguide/index.htmlの中で使われていないセレクタへのスタイルを自動削除。

CSSセレクタ.navdrawer-container.open.app-bar.openは除く。

その後全てのCSSファイルをひとつに結合、圧縮。

components/components.csscomponents/main.min.cssにリネーム。

app以下の全てのhtmlファイルを圧縮。

上記で生成されたファイルをdistに出力。

サイズをコンソール出力。

Clean Output Directory

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

.tmpdistフォルダを削除。

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);
});

.tmpappフォルダをルートとして仮想サーバーを立てる。

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タスクが処理されたあと、jshinthtmlimagesfontscopyのタスクを平行処理する。

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は知らないパッケージだったので目から鱗。

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