<h1>はじめに</h1>
<p>こちらの記事の続きで実際に作ってみました。</p>
<p><a href="https://www.shunya.ninja/posts/cobra-cli-tool.html">Cobra で CLI ツールを作ろう</a></p>
<h2>作るに当たっての背景</h2>
<p>自分の性格として、新しい技術に対する好奇心が強すぎて足下が疎かになるというか、
基本的なマークアップの知識が抜け落ちてしまっているのをひしひしと感じていました。</p>
<p>そこで、HTML,CSS 当たりの復習をしようと思ったが、どうせなら新しいことも組み込みたい！と思い、</p>
<ul>
<li>Pug の書き方</li>
<li>Sass(Scss)の書き方</li>
<li>Gulp で以上をリアルタイムでトランスパイル</li>
<li>FLOCSS の考え方</li>
<li>CLI ツール化していつでも使えるテンプレートを作る</li>
</ul>
<p>以上を一緒に学ぼうと思ったのがきっかけ。</p>
<h2>Pug 編</h2>
<p>基本的な書き方はこのように閉じタグが不要になったり、</p>
<pre><code>&#x3C;div>Hello HTML&#x3C;/div>
</code></pre>
<pre><code>  div Hello Pug
</code></pre>
<p>変数が使えるようになったり、</p>
<pre><code>  - var text = "Hello Pug"
  div #{text}
</code></pre>
<p>プログラミング言語的記述が使えたり、</p>
<pre><code>  - var arr = ["Hello", "Pug"]
  each val in arr
    p #{val}
</code></pre>
<p>他ファイルからインポートできたり、</p>
<pre><code>  include ./config.pug
  p #{text}
</code></pre>
<p>まあとにかく便利。
特に他ファイルからのインポート機能によってコンポーネント単位でファイルを分けたり
ページ単位で分けたりと、最近のフレームワークチックなことができそう。</p>
<h2>Sass(Scss) + FLOCSS 編</h2>
<p>Sass は HTML における Pug のような立ち位置で同じく変数化したり、関数作ったり DRY 原則に則ったコーディングができそう。
CSS はとにかく苦手で今まで敬遠していたが Sass 触ってみて楽しいと感じた。</p>
<p>いつもガーっと Css を気ままに書いた後にとんでもないコードのレスポンシブ対応ができずに挫折しがちだったが、
そもそもレスポンシブ対応を並行しながらやればよいのでは？と気づいたのでやってみた。</p>
<p>それを助けてくれるのが関数化、こんな感じでいつでも mq メソッドを呼び出せるようにしておくと楽だった。</p>
<p>でもやっぱり Css はむずい。</p>
<pre><code>$breakpoints: (
  'sm': 'screen and (min-width: 400px)',
  'md': 'screen and (min-width: 768px)',
  'lg': 'screen and (min-width: 1000px)',
  'xl': 'screen and (min-width: 1200px)',
) !default;

// over $bp px
@mixin mq($bp: md) {
  @media #{map-get($breakpoints, $bp)} {
    @content;
  }
}
</code></pre>
<p>ディレクトリ構造も FLOCSS に則ってこうしてみた。
命名規則が component なのか project なのかで一生悩みそう。</p>
<pre><code>sass
├── component
│   └── _component.scss
├── foundation
│   ├── _foundation.scss
│   └── _reset.scss
├── layout
│   └── _layout.scss
├── project
│   └── _project.scss
├── style.scss
└── utility
    ├── _responsive.scss
    └── _utility.scss

</code></pre>
<h2>Gulp 編</h2>
<p>トランスパイルの際にフォルダ分けしているファイル達も一緒に dist フォルダに作られてしまうのはよろしくないので、_(アンダーバー)から始まるファイルは dist に送られないようにした。</p>
<p>主に<a href="https://qiita.com/ararie/items/e4d70fadafe0f5a8f28b">こちらの記事</a>を参考に作りました。</p>
<pre><code>const gulp = require('gulp');
const pug = require('gulp-pug');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
const uglify = require('gulp-uglify');
const browsersync = require('browser-sync');
const notify = require('gulp-notify');
const plumber = require('gulp-plumber');
const del = require('del');

const paths = {
  src: 'src',
  dest: 'dist',
};

//Pug
gulp.task('html', function () {
  return gulp
    .src([paths.src + '/pug/**/*.pug', '!' + paths.src + '/pug/**/_*.pug'])
    .pipe(
      plumber({
        errorHandler: notify.onError('Error: &#x3C;%= error.message %>'),
      }),
    )
    .pipe(pug({ pretty: true }))
    .pipe(gulp.dest(paths.dest));
});

//Sass
gulp.task('css', function () {
  return gulp
    .src([paths.src + '/sass/**/*.scss', '!' + paths.src + '/sass/**/_*.scss'])
    .pipe(
      plumber({
        errorHandler: notify.onError('Error: &#x3C;%= error.message %>'),
      }),
    )
    .pipe(
      sass({
        outputStyle: 'expanded',
      }),
    )
    .pipe(
      autoprefixer({
        overrideBrowserslist: 'last 2 versions',
      }),
    )
    .pipe(cssmin())
    .pipe(gulp.dest(paths.dest + '/assets/css'));
});

//JavaScript
gulp.task('js', function () {
  return gulp
    .src(paths.src + '/js/**/*')
    .pipe(uglify())
    .pipe(gulp.dest(paths.dest + '/assets/js'));
});

//Image File
gulp.task('image', function () {
  return gulp.src(paths.src + '/images/**/*').pipe(gulp.dest(paths.dest + '/assets/images'));
});

//Browser Sync
gulp.task('browser-sync', function (done) {
  browsersync({
    server: {
      //ローカルサーバー起動
      baseDir: paths.dest,
    },
  });
  done();
});

//Watch
gulp.task('watch', function () {
  const reload = () => {
    browsersync.reload(); //リロード
  };
  gulp.watch(paths.src + '/sass/**/*').on('change', gulp.series('css', reload));
  gulp.watch(paths.src + '/pug/**/*').on('change', gulp.series('html', reload));
  gulp.watch(paths.src + '/js/**/*').on('change', gulp.series('js', reload));
  gulp.watch(paths.src + '/images/**/*').on('change', gulp.series('image', reload));
});

//Clean
gulp.task('clean', function (done) {
  del.sync(paths.dest + '/**', '！' + paths.dest);
  done();
});

//Default
gulp.task(
  'default',
  gulp.series('clean', gulp.parallel('html', 'css', 'js', 'image', 'watch', 'browser-sync')),
);
</code></pre>
<h2>CLI 化 編</h2>
<p>前回同様 cobra さんで作りました。
と言っても難しいことは何にもしておらず、
テンプレートリポジトリを<code>git clone</code>して<code>git remote remove origin</code>しただけ。</p>
<h2>終わりに</h2>
<p>こちらがテンプレートリポジトリ</p>
<ul>
<li><a href="https://github.com/esh2n/markup-template">https://github.com/esh2n/markup-template</a></li>
</ul>
<p>こちらが作成した CLI ツールのリポジトリ</p>
<ul>
<li><a href="https://github.com/esh2n/marks">https://github.com/esh2n/marks</a></li>
</ul>
<p>以下で使えます。</p>
<pre><code>// installation
$ go get -u github.com/esh2n/marks

// init project
$ marks init -d &#x3C;dirname>

// just replace with npm install
$ marks install

// just replace with gulp
$ marks dev
</code></pre>
