非フロントエンジニア向けのnpm+sass+gulpの解説

webフロントの開発に着手しようとしたところ、
gulpでの開発方法についてまとまった記事がなかったので簡単にまとめてみた。
※(追記)ちなみにgulpは少し古い技術で、こんな記事もあります。
webpack時代の終わりとparcel時代のはじまり

目的

• sassとgulpの解説
• webサイトのテンプレ構築

gulpとsassを理解した上で、webサイトのテンプレを構築し、
それをいじっていくイメージ。

Sass

コンパイルしてcssをはいてくれるメタ言語。
具体的に言うと、変数や関数を用いてcssを書くことができるので、繰り返し出て来る表現等を簡潔にし、可読性や運用性をめっちゃあげることができる。

ほんの一例だけど、これが

.top{
    &-img{
   }
    &-lead{
  }
    &-text{
  }
}

コンパイルするとこうなる。

.top-img{
}
.top-lead{
}
.top-text{
}

ちょー見やすい、ちょー開発しやすい。

gulp

フロント開発用のタスクランナーと言われるもの。
実際にコード見たほうが早い。

まずはtaskの生成。先ほどのコンパイルタスクはこんな感じになる。

gulp.task('sass', function() {
  return gulp.src('scss/sample.scss')
    .pipe(sass())
    .pipe(gulp.dest('css'))
});

コンパイルして、gulp.destで指定したフォルダに移動する。
さらにgulp.watchを用いて、このタスクを自動的に実行するようにできる。

gulp.task('watch', function() {
  gulp.watch('./src/js/example.js', ['sass']);
});

つまり、ctrl+sする度にコンパイルしてくれる。しゅごい。

browserSunc

npmでbrosersyncを入れてこんな感じで書けば
コンパイルした直後に勝手にブラウザをリロードしてくれるようにできる。しゅごい。

gulp.task('sass', function() {
  return gulp.src('scss/clean-blog.scss')
    .pipe(sass())
    .pipe(gulp.dest('css'))
    //browserSync
    .pipe(browserSync.reload({
      stream: true
    }))
});

webサイトのテンプレ構築

以上を理解した上で、webサイトのテンプレの構築をしてみる。
※gulpファイルはテンプレ作者が作ってくれてるので自分で1から書かなくていいです。

npm, gulpコマンドのインストール

$sudo npm install -g gulp

　参考：npm から gulp インストールまでの手順

サイトから好きなテンプレートを拾って来る
　　https://startbootstrap.com/template-categories/all/

作業フォルダに npm install

$cd ~/WORKSPACE/template_theme
$npm install

ちなみにnpmはnode.jsのパッケージマネージャーで、オプション無しでinstallコマンドを打つと、package.jsonを読み込んで必要なライブラリを全部インストールしてくれます。便利。

$gulp browserSync 等のコマンドを打つ
これはテーマごとに違う(？)ので、gulpfile.jsの中身見ながらコマンド打ちましょう。
gulp.taskの流れを追えば何をやればいいか大体わかります。

まとめ

ざっくりしてしまったんですが、以上になります。
非フロントエンジニアがわかりにくいbootstrapの話もしたいのですが、それはまた今度。

お読み頂きありがとうございました。