LoginSignup
119
120

More than 5 years have passed since last update.

@zchee(zchee)inMercari

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

Last updated at Posted at 2014-07-23

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

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

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

119
120
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
119
120