LoginSignup
4

More than 5 years have passed since last update.

posted at

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

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

versionリスト

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のテストもできる、やったー!
そっちはまた別に記事にするかも。(すでにある記事のほうが良い可能性もある

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

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
What you can do with signing up
4