githubのレポジトリはこちら
こことかこことかここを参照しながら組んだ
versionリスト
- nvm: 0.32.1
- node: 7.1.0
- 構築始めた時にnvm ls-remoteして出てきた最新版
- yarn: 0.17.6
yarn外のものはこれくらい、後はここ見て
簡単な説明
gulpとwebpack使って、pug,sass,javascriptをかけるようにする
それぞれの説明を下に書いてく。
基本的に、yarnでpackageのインストールを全て終わらせるって方針で構築してる。
pug
- gulp-pug
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という名前だったがいろいろあって名前が変わったらしい
- インデントで階層を組む
- 属性は()で囲む
- テンプレート継承やインクルードができる
とかいう感じ。
例
doctype html
html(lang='ja')
head
body
div#hoge
↓コンパイル
<!DOCTYPE html>
<html lang="ja">
<head></head>
<body>
<div id="hoge"></div>
</body>
</html>
sass
- gulp-sass
- gulp-postcss
- postcss-cssnext
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
display: flex
↓コンパイル
.test {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
babel
- gulp-babel
- del
webpackとかも使ってる。
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のコードの静的検証ツール。
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
〜省略〜
"eslintConfig": {
"extends": [
"airbnb",
〜省略〜
後、このeslint-config-airbnbっていうのは引数を更新してはいけないとか、使ってない引数は消せとか色々と厳しい感じの公開されてるeslint設定
私は引数とか更新されるべきじゃ無いのではとか思ったから良いなと思ってる。
オブジェクト自体に更新用のfunctionが用意されていない限り、直接上書きはできなくなるとかそんな感じのほうが良さげ
ただ、実はこの制約がくっそ辛かったりして後で外すこともあったりして…
大体こんな感じ
後はテストのmochaとかも設定してるからjsのテストもできる、やったー！
そっちはまた別に記事にするかも。（すでにある記事のほうが良い可能性もある
まだこれ使い始めて間もなかったり、継ぎ接ぎ的なところの設定とかあったりするから間違ってたり、非効率なところとかあるかもしれない
そういう所は教えてくれたら嬉しい！