最近構築したpug+sass+babel環境

githubのレポジトリはこちら
 こことかこことかここを参照しながら組んだ

versionリスト

nvm: 0.32.1
- https://github.com/creationix/nvm
node: 7.1.0
- 構築始めた時にnvm ls-remoteして出てきた最新版
yarn: 0.17.6

yarn外のものはこれくらい、後はここ見て

簡単な説明

gulpとwebpack使って、pug,sass,javascriptをかけるようにする
それぞれの説明を下に書いてく。
基本的に、yarnでpackageのインストールを全て終わらせるって方針で構築してる。

pug

gulp-pug

gulpfile.babel.js

import pug from 'gulp-pug';
〜省略〜
const paths = {
  〜省略〜
  pug: 'src/pug/**/*.pug',
  html: 'dist',
    〜省略〜
}
〜省略〜
gulp.task('pug', () =>
  gulp.src(paths.pug)
    .pipe(pug({pretty: true}))
    .pipe(gulp.dest(paths.html)),
);

pugはjstです。
hamlのようなもの。
元々はjadeという名前だったがいろいろあって名前が変わったらしい
- インデントで階層を組む
- 属性は()で囲む
- テンプレート継承やインクルードができる
とかいう感じ。

例

index.pug

doctype html
html(lang='ja')
  head
  body
    div#hoge

↓コンパイル

index.html

<!DOCTYPE html>
<html lang="ja">
  <head></head>
  <body>
    <div id="hoge"></div>
  </body>
</html>

sass

gulp-sass
gulp-postcss
postcss-cssnext

gulpfile.babel.js

import sass from 'gulp-sass';
import postcss from 'gulp-postcss';
import cssnext from 'postcss-cssnext';
〜省略〜
const paths = {
  〜省略〜
  sass: 'src/sass/**/*.sass',
  css: 'dist/css/',
  〜省略〜
}
〜省略〜
gulp.task('sass', () => {
  const processors = [
    cssnext(),
  ];
  gulp.src(paths.sass)
    .pipe(sass())
    .pipe(postcss(processors))
    .pipe(gulp.dest(paths.css));
});

sassはcssにコンパイルできるscript言語
私はインデントで階層をつける記述のほうが好き。
{}で階層つけるやつはなんかifとかwhenとかもかけるらしい。

こいつらはsassをcssに変換してくれるやつら。
もう、sassとかが無い素のcssは書けない書きたくない…
しかもpostcss-cssnextはベンダープレフィックスを自動でつけてくれるマンかっこいい。
デフォルトだとモダンブラウザ＋ちょっと古い位なもんだけど色々設定できるらしい
例

test.sass

.test
  display: flex

↓コンパイル

test.css

.test {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

babel

gulp-babel
del webpackとかも使ってる。

gulpfile.babel.js

import babel from 'gulp-babel';
import del from 'del';
〜省略〜
const paths = {
  〜省略〜
  allSrcJs: 'src/**/*.js',
  clientEntryPoint: 'src/client/app.js',
  js: 'dist/js',
  libDir: 'lib',
  clientBundle: 'dist/client-bundle.js?(.map)',
    〜省略〜
}
〜省略〜
gulp.task('main', ['test’]() =>
  gulp.src(paths.clientEntryPoint)
    .pipe(webpack(webpackConfig))
    .pipe(gulp.dest(paths.distDir))
);
gulp.task('test', ['build'], () =>
　〜省略〜
);

gulp.task('build', ['lint', 'clean', 'pug', 'sass'], () =>
  gulp.src(paths.allSrcJs)
    .pipe(babel())
    .pipe(gulp.dest(paths.libDir)),
);
gulp.task('clean', () => del([
  paths.libDir,
  paths.clientBundle,
]));

mainタスクはtestタスクが実行されてから実行される。
また、testタスクはbuildタスクが実行されてから実行されます。
と言った具合に色々と実行されて、最後に出てきたjsをwebpackで面倒見る感じ。

eslint

jsのコードの静的検証ツール。

gulpfile.babel.js

import eslint from 'gulp-eslint';
〜省略〜
gulp.task('lint', () =>
  gulp.src([
    paths.allSrcJs,
    paths.gulpFile,
    paths.webpackFile,
  ])
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError())
    .pipe(flow({ abort: true })),
);

eslint-config-airbnb

package.json

〜省略〜
  "eslintConfig": {
    "extends": [
      "airbnb",
〜省略〜

後、このeslint-config-airbnbっていうのは引数を更新してはいけないとか、使ってない引数は消せとか色々と厳しい感じの公開されてるeslint設定
私は引数とか更新されるべきじゃ無いのではとか思ったから良いなと思ってる。
オブジェクト自体に更新用のfunctionが用意されていない限り、直接上書きはできなくなるとかそんな感じのほうが良さげ
ただ、実はこの制約がくっそ辛かったりして後で外すこともあったりして…

大体こんな感じ

後はテストのmochaとかも設定してるからjsのテストもできる、やったー！
そっちはまた別に記事にするかも。（すでにある記事のほうが良い可能性もある

まだこれ使い始めて間もなかったり、継ぎ接ぎ的なところの設定とかあったりするから間違ってたり、非効率なところとかあるかもしれない
そういう所は教えてくれたら嬉しい！