🔖

Gulp + browser-sync + tailwindcssでHTMLコーディングする

2021/09/20に公開

Gulp

Tailwind CSS

browsersync

tech

HTMLのコーディングをする機会が来たのだが、最近ずっとReactのコードを書いてたため「更新したらリアルタイムに変更を知りたいしtailwindもCSSを勝手に生成して欲しいな、と思って調べたら上記の組み合わせで最低限のことは出来そうなので調べて環境を作ってみた。

環境設定

前提

tailwindcssを使う
gulpをタスクランナーとして使う

インストール

nodejs はnodenvで入ってることが前提
nodeのバージョン確認（今回は15.1.0を使う）

$ nodenv versions
* system (set by /Users/yamato/.anyenv/envs/nodenv/version)
  14.4.0
  15.0.1
  15.1.0

上記ならsystemが有効になってるのでnodenv local 15.1.0で変更する。変更したら以下のようになる。

$ nodenv versions                      
  system
  14.4.0
  15.0.1
* 15.1.0 (set by /Users/yamato/Src/proj_renewal_signalcompose.com/.node-version)

package.jsonの作成

$ npm init -y

npm を使うときに「マイナーバージョンがあるのでアップデートしてね」的なのが出るが、 Cannot find module 'agentkeepalive' と出てアップデートできない時は npm install -g agentkeepalive --save でモジュールを入れてからアップデートしてください。

    "dev": "npx gulp",
    "build": "NODE_ENV=production npx gulp",
    "build-css": "NODE_ENV=production npx gulp css"

gulpのインストール

$ npm install --save-dev gulp

設定についてはこんな感じ。

'use strict'

const gulp = require('gulp')
const { src, dest, series, parallel, watch, tree } = require('gulp')

const dev = require('browser-sync')

const browserSync = (done) => {
  dev({
    server: {
      baseDir: './site/'
    },
    startPath: 'index.html',
    files:'./site/**',
    port : 3000,
    notify: false,
    open: 'external',
  })

  done()
}

const cssSrc = './src/**/*.css'
const cssDest = './site/css/'

const css = () => {
  const postcss = require('gulp-postcss')

  return gulp.src(cssSrc)
    // ...
    .pipe(postcss([
      // ...
      require('tailwindcss'),
      require('autoprefixer'),
      // ...
    ]))
    // ...
    .pipe(gulp.dest(cssDest))
}

const watchFiles = (done) => {
  watch(cssSrc, css)
  done()
}

exports.default = series(css, watchFiles, browserSync)
exports.css = css

tailwindcssのインストール

$ npm install tailwindcss

gulp-postcssのインストール

$ npm install --save-dev postcss gulp-postcss

autoprefixerのインストール

npm install --save-dev autoprefixer

tailwindの設定ファイルを作る

$ npx tailwindcss init

purgeの設定を加えた。

module.exports = {
  purge: ["./src/**/*.css", "./site/**/*.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

package.jsonにコマンドnpm run gulpを追加（内容はpackage.jsonをみてください）

Memo

How to setup Tailwind CSS with PostCSS & Browsersync?
browser-syncの設定

const browserSync = (done) => {
  dev({
    server: {
      baseDir: './site/' // browser-syncが基準とするディレクトリを指定する
    },
    startPath: 'index.html', // 開きたいパスを指定する
    files:'./site/**', // 指定した値が変更されるとブラウザをリロードする
    port : 3000, // browsersyncサーバが使うポート番号を変更できる
    notify: false, // ブラウザ更新時に出てくる通知を非表示にする
    open: 'external', // ローカルIPアドレスでサーバを立ち上げる
  })

  done()
}

環境設定

前提

インストール

Memo

Discussion