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を実行した時にエラーでもタスクを続行する方法
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/01/29
JadeでもEmmetが使えるらしい
マジかよ…。情報ありがとうございます。
でもやっぱりコピペでインデントがずれるし(Atom)、EJSの方がいいかなぁと思ってます。
テストはしないのか
大規模なWebサービスなら、目視確認の前にプログラムが動作確認してくれるというのはありがたいと思うんですが、↓の前提条件のようなサイトなら目視確認で十分で、テストって必要ありませんよね…？
テストが必要な文化圏にいませんので、正直よく分かってません。すみません。今年の課題だなぁ。
PostCSSじゃないのか
CSSは、ネストやルートのセレクタを選択できたり、Mixinが使えれば別に困らないので、別にSassでいいよなぁという気持ちです。
数年後に「Sassはオワコン」とか言われていたら乗り換えます。
脱Gulpをしないのか
Gulpをやめるメリットをあまり感じられないので。
Gulpはなんだかんだ便利だし、gulpfileさえ作ってしまえば、各種コンパイルやブラウザの自動リロード、画像のSprite化などを数文字のコマンドで実行できるのはやはり魅力的です。
追記終わり。