以前,参加した｢一週間でWebサービスを作ろう｣でHTML,CSSが苦手なのに気づいたのでマークアップを強化していくために,まずは環境を整えて快適に開発を進めていけるようにしたいと思います。
なんかずっと準備運動で運動を始めないやつみたいな感じではありますがw

やりたいこと

• pugのコンパイル
• sassのコンパイル
• ライブプレビュー
• コンパイルエラー時に通知する

環境構築

1. 必要なパッケージのインストール

まずはパッケージのインストールから。

• gulp
• gulp-notify
• gulp-plumber
• gulp-pug
• gulp-sass

• browser-sync

  $ yarn -D add gulp gulp-notify gulp-plumber gulp-pug gulp-sass browser-sync
  # バージョン
  gulp@4.0.2
  gulp-notify@3.2.0
  gulp-plumber@1.2.1
  gulp-pug@4.0.1
  gulp-sass@4.1.0
  browser-sync@2.26.12

  2. gulpfile.jsを作成する

  2-1. ディレクトリ構成

  下記の様なディレクトリ構成で進めていきます。
  構成を変更する場合はgulpfile.jsの内容も適宜読み替えてください。

  root
  ├─ gulpfile.js <!-- 作成する -->
  ├─ package.json
  │ <!-- ここからは下はお好みの構成でOKです -->
  ├─ public/ <!-- コンパイルされたファイルはこのフォルダ配下に出力されます -->
  │  ├─ css/
  │  └─ js/
  └─ src/ <!-- このフォルダ配下のファイルをコンパイルします -->
  ├─ pug/
  └─ scss/

  2-2. gulpfile.jsを編集する

  const gulp = require('gulp');
  const plumber = require('gulp-plumber'); // エラー時の強制終了を防止
  const notify = require('gulp-notify'); // エラー発生時にデスクトップに通知
  const pug = require('gulp-pug'); // pug → html へコンパイル
  const sass = require('gulp-sass'); // sass,scss → css へコンパイル
  const browserSync = require('browser-sync'); // ライブプレビュー

/**

• srcディレクトリ配下のすべての.pugファイルをコンパイルしてpublic配下へ.htmlファイルとして出力する / gulp.task(‘pug’, function(done) { // .pugファイルを読み込む gulp.src(‘./src/pug/.pug’) // コンパイルエラーを通知する .pipe(plumber({errorHandler: notify.onError(“Error: <%= error.message %>”)})) .pipe(pug({ // pugファイルを整形するオプション pretty: true })) // .htmlファイルを出力する .pipe(gulp.dest(‘./public’)) // ライブプレビューにデータを渡す .pipe(browserSync.reload({stream: true})); done(); });

/**

• src/scssディレクトリ配下のすべての.scssファイルをコンパイルしてpublic/css配下へ.cssファイルとして出力する / gulp.task(‘sass’, function(done) { // .scssファイルを読み込む gulp.src(‘./src/scss/.scss’) // コンパイルエラーを通知する .pipe(plumber({errorHandler: notify.onError(“Error: <%= error.message %>”)})) // .scssファイルを.cssファイルへコンパイルする .pipe(sass()) // .cssファイルを出力する .pipe(gulp.dest(‘./public/css’)) // ライブプレビューにデータを渡す .pipe(browserSync.reload({stream: true})); done(); });

/**

• ローカルサーバーを起動する */ gulp.task(‘browser-Sync’, function(done) { browserSync({ server: { // プレビューしたいファイルの置いてあるディレクトリを指定 baseDir: ‘public/’, // プレビューしたいファイルを指定 index: “index.html” } }); done(); });

/**

• pugファイルの変更を検知してリアルタイムプレビューする / gulp.task(‘watch’, gulp.series(gulp.parallel(‘pug’, ‘sass’, ‘browser-Sync’), function(done) { gulp.watch(‘./src/html/.pug’, gulp.task(‘pug’)); gulp.watch(‘./public/js/.js’, gulp.task(‘pug’)); gulp.watch(‘./src/scss/.scss’, gulp.task(‘sass’)); done(); }));

  ## まとめ
  完成しました！  
  src配下(pug,scss)をもっとカスタマイズしていきたい気分ではありますが,ひとまずこれでマークアップ練習していきます。  

それではまた明日。