/sample_pug_sass_gulp

gulpでpug、sassをコンパイルしてみよう

Primary LanguagePug

▼ 環境構築

1. gulp の cli ツールをインストールする

npm install --global gulp-cli

2. npm インストールする

npm i

▼gulp タスク

バージョン 4 なので基本的には公式ドキュメントを参考にされたし。
https://gulpjs.com/
※古いバージョンの書き方だと動かないことが多い。

・タスクについて

基本はこれ。
その場でコンパイルされる。

gulp

個別にコンパイルしたい場合は以下。

gulp html
gulp css

ファイルの変更をウォッチする場合はこれ。

gulp watch

・使用可能なタスクを確認する

gulp --tasks

こんな感じで表示される

$ gulp --tasks
[12:09:05] Tasks for ~/workspace/sample_pug_sass_gulp/gulpfile.js
[12:09:05] ├─┬ default
[12:09:05] │ └─┬ <parallel>
[12:09:05] │   ├── css
[12:09:05] │   └── html
[12:09:05] ├── html
[12:09:05] ├── css
[12:09:05] └── watch

▼ ローカル環境で確認

Browsersync を使う。
https://www.browsersync.io/

1. インストール

npm install -g browser-sync

2. 起動

distをルートディレクトリにし、配下のファイルを watch するオプションをつけて Browsersync を起動する。

browser-sync start --server "./dist/" --files "./dist/*"

こんな感じでサーバーが起動する。

$  browser-sync start --server "./dist/" --files "./dist/*"
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.2.51:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------

gulp watchタスクを並行して起動させておくと変更が随時反映されるはず。
起動コマンドやオプションは下記を参考にされたし。
https://www.browsersync.io/docs/command-line

おまけ

Netlify で公開してみた。
簡単にできるのでおすすめ
https://sample-pug-sass-gulp.netlify.com/