個人的フロントエンド開発環境2017

12
いいね
1
コメント

ryo_dg

2017年01月27日に投稿

2017年版、オレオレフロントエンド開発環境です。

前提条件

ここでいうフロントエンド開発とは、ペライチ、もしくは数ページから数十ページのWebサイトのこと
サーバサイドとやりとりなどはあまりなく、ランディングページやキャンペーンサイト、コーポレートサイトをよく実装する

構成

まず、ざっくりと構成です。

HTMLはEJSで書いてコンパイル
CSSはSass(SCSS記法)で書いてコンパイル
- MixinライブラリはBourbon
JSはES2015で書いてBabelでコンパイル
- Browserifyでバンドルする
タスクランナーはGulp
パッケージマネージャはnpm

省略記法に疲れた

つい最近まで、HTMLはPug(Jade)で、CSSはStylusで書いてました。省略記法で書ける楽でのええわ〜、省略記法で書いてる俺カッコいい！と思ってましたが、なんだかだんだん疲れてきた。

JadeとStylusがAtomで書きにくい(コピペなどでインデントがずれて修正が面倒)、JadeだとEmmetが使えない、JSだけ省略記法じゃないのが気持ち悪い、などの理由で、できるだけ省略しない書き方に戻していこうというコンセプトの構成です。

EJSはだいたいHTMLみたいなもんだし、Sass(SCSS)はデファクトスタンダードみたいなもんだし、どちらも学習コストが低いです。他の人と一緒に開発する時でも、教えることが少なくなるのはいいなと思います。

EJSじゃなくてHTMLで良くない？という感じですが、コンポーネント化や、JSONを読み込んで下層ページを大量に生成したりもするので、静的サイトジェネレータ的にも使えるEJSで。

JSのライブラリは別ファイルにする

Browserifyでなんでもかんでもimportしてバンドルせず、ライブラリは別のlib.jsというファイルにまとめてしまった方がいいなと最近考えるようになりました。

というのも、Browserify/Webpack readyではないJSのライブラリも沢山あり、例えばbrowserify-shimを使ってimportしようとし、うまくいかずに疲れる…というのは悲しいし、それなら普通にconcatしようぜ、というアプローチです。
（ライブラリをグローバルに出しても特に問題ない要件なので）

GulpでJSのライブラリをライセンスを残したままconcatし、BrowserifyでバンドルしたJSの直前で読み込みます。ライブラリのオブジェクトはグローバルに生成されるので、他のJSでimportせずとも利用可能になります。

CSSの書き方

以前はCSSの設計に凝っていたときもあったんですが、最近は分かりやすくてクラス名が重複しなければなんでもいいなと思って書いています。BEMをアレンジしたような、よく分からないルールで書くことが多いかも。

Gulp + gulp-sass + node-bourbonのタスクの書き方

gulp-sassでBourbonを使うには、node-bourbonというパッケージをimportし、以下のようにすると使えます。あと、エラーが出てもタスクが止まらないようにするgulp-plumberの書き方です。

[Gulp] run-sequenceでgulp-eslintを実行した時にエラーでもタスクを続行する方法

gulp/tasks/sass.js

import gulp from 'gulp';
import filePath from '../filePath';
import sass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import plumber from 'gulp-plumber';
import sourcemaps from 'gulp-sourcemaps';
import bourbon from 'node-bourbon';

gulp.task('sass', () => {
  return gulp
    .src([
      filePath.source.stylesheets + '**/*.{scss,sass}',
      '!' + filePath.source.stylesheets + '**/_*.{scss,sass}'
    ])
    .pipe(plumber({
      errorHandler(err) {
        console.log(err.message);
        this.emit('end');
      }
    }))
    .pipe(sass({
      outputStyle: 'expanded',
      includePaths: bourbon.includePaths
    }))
    .pipe(autoprefixer({
      browsers: ['last 2 versions']
    }))
    .pipe(gulp.dest(filePath.build.stylesheets));
});

まとめ

Webpackが流行ってるし、今年こそはWebpackで…と思ったりしましたが、僕の作るサイトだとBrowserifyでなんら問題はありませんでした。

Vue.jsでSPAを作る時に、ビルド時に静的サイトを吐き出してくれる prerender-spa-pluginというパッケージがWebpackのみで動くらしく、これを一度使ってみたいので、今年はいよいよWebpackデビューか…と思ってます。

要件や好みなどによってもろもろ開発環境は変わってきますし、あくまで一例ということで。

2017年版、オレオレフロントエンド開発環境です。

## 前提条件
* ここでいうフロントエンド開発とは、ペライチ、もしくは数ページから数十ページのWebサイトのこと
* サーバサイドとやりとりなどはあまりなく、ランディングページやキャンペーンサイト、コーポレートサイトをよく実装する

## 構成
まず、ざっくりと構成です。

* HTMLはEJSで書いてコンパイル
* CSSはSass(SCSS記法)で書いてコンパイル
	* MixinライブラリはBourbon
* JSはES2015で書いてBabelでコンパイル
	* Browserifyでバンドルする
* タスクランナーはGulp
* パッケージマネージャはnpm

## 省略記法に疲れた
つい最近まで、HTMLはPug(Jade)で、CSSはStylusで書いてました。省略記法で書ける楽でのええわ〜、省略記法で書いてる俺カッコいい！と思ってましたが、なんだかだんだん疲れてきた。

## JSのライブラリは別ファイルにする
Browserifyでなんでもかんでもimportしてバンドルせず、ライブラリは別の`lib.js`というファイルにまとめてしまった方がいいなと最近考えるようになりました。

## CSSの書き方
以前はCSSの設計に凝っていたときもあったんですが、最近は分かりやすくてクラス名が重複しなければなんでもいいなと思って書いています。BEMをアレンジしたような、よく分からないルールで書くことが多いかも。

## Gulp + gulp-sass + node-bourbonのタスクの書き方
gulp-sassでBourbonを使うには、node-bourbonというパッケージをimportし、以下のようにすると使えます。あと、エラーが出てもタスクが止まらないようにするgulp-plumberの書き方です。

[\[Gulp\] run\-sequenceでgulp\-eslintを実行した時にエラーでもタスクを続行する方法](http://qiita.com/ryo_dg/items/d649c58bc69f928fa5e2)

```js:gulp/tasks/sass.js
import gulp from 'gulp';
import filePath from '../filePath';
import sass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import plumber from 'gulp-plumber';
import sourcemaps from 'gulp-sourcemaps';
import bourbon from 'node-bourbon';

gulp.task('sass', () => {
  return gulp
    .src([
      filePath.source.stylesheets + '**/*.{scss,sass}',
      '!' + filePath.source.stylesheets + '**/_*.{scss,sass}'
    ])
    .pipe(plumber({
      errorHandler(err) {
        console.log(err.message);
        this.emit('end');
      }
    }))
    .pipe(sass({
      outputStyle: 'expanded',
      includePaths: bourbon.includePaths
    }))
    .pipe(autoprefixer({
      browsers: ['last 2 versions']
    }))
    .pipe(gulp.dest(filePath.build.stylesheets));
});
```

## まとめ
Webpackが流行ってるし、今年こそはWebpackで…と思ったりしましたが、僕の作るサイトだとBrowserifyでなんら問題はありませんでした。

Vue.jsでSPAを作る時に、ビルド時に静的サイトを吐き出してくれる [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin)というパッケージがWebpackのみで動くらしく、これを一度使ってみたいので、今年はいよいよWebpackデビューか…と思ってます。

要件や好みなどによってもろもろ開発環境は変わってきますし、あくまで一例ということで。

ryo_dg

136Contribution