gulpとリポジトリを使ってSassとPugの同時開発環境を構築をしよう!

どうもおぎ(@atk420t)です。

先日Pug(旧Jade)とSass(SCSS)を勉強し始めるにあたり、開発環境構築に手こずってしまったので僕的に一番便利で速く開発環境を構築する方法をご紹介したいと思います。開発環境の構築にあたり、今回はgulpを使用したリポジトリを使用していきたいと思います。

環境

macOS 10.13 (High Sierra)

VisualStudioCode(September 2018 (version 1.28))

Node.js(10.13.00)

npm(6.4.1)

Pug(Jade)

Sass(Scss)

今回はmacを利用した開発環境構築ですが、以下で紹介する方法はWindowsでも可能です。その際の注意点をまとめておきます。

要確認環境

VisualStudioCodeバージョン

Node.jsバージョン

npmバージョン

Pug(旧Jade)バージョン

Sass(Scss)バージョン

必要なものをインストールしよう!

Node.jsインストール

以下の公式サイトから自分の環境に合ったNode.jsをインストールしてください。

ターミナル(コマンドプロンプト)で以下のコマンドを打ってバージョンが表示されればインストール成功です。

Node.jsバージョン確認
node --version

今回紹介するリポジトリ

今回紹介するのはPug(Jade),Sass(Scss),Jsをすばやく使えるためのリポジトリです。他にも画像圧縮ができるなどができるのでかなり実用性が高いです。

このリポジトリでできること
・記述エラーの通知
・変更時の自動リロード
・gulpでキャッシュ、差分や変更ファイルのみをコンパイル
・圧縮(pugを除く)
・ローカルサーバーの立ち上げ
・各ファイルの圧縮
・pug→html コンパイル
・CSS/JSのインライン化
・sass(scss)のコンパイル
・ベンダープレフィックスの自動付与、記述の仕方を自動変換,追記
・sassソースマップの書き出し
・sassをgulpでキャッシュ、更新したファイルのみコンパイル
・複数のJSファイルの統合化
・jpg,png,gif,svgの圧縮
・jpeg,jpgはプログレッシブjpgに変換
(READMEから一部引用)

環境を作っていこう!

Node.jsがインストールされ、npmが使えるようになったのでここから先はターミナル(コマンドプロンプト)を使ってインストール作業をしていきます。

ファイルのバージョンを新しくするためにも、インストールしたパッケージを保存する以下のファイルを2つ削除しておいてください。

ここからはターミナルでの作業になります。

まず、開発するファイルがまとめられたフォルダまで移動してください。この際、VisualStudioCodeから開発フォルダを開いた状態でVisualStudioCode内のターミナルを起動するとフォルダ内のターミナルになりますので便利です。

ここでは上記で紹介したリポジトリにあわせてパッケージをインストールしていきますので、上記のパッケージを利用しない場合にはスルーしても大丈夫です。

パッケージのインストールコマンド
npm i -s gulp gulp-pug gulp-sass gulp- pleeease gulp-sass-glob gulp-sass-sourcemaps gulp-sass-variables gulp-uglify gulp-concat gulp-imagemin imagemin-pngquant imagemin-mozjpeg browser-sync gulp-plumber gulp-notify gulp-cached gulp-changed gulp-ifgulp-file-include yargs gulp-watch

他のファイルでも同様のリポジトリを使用するには以下のコマンドを打ちます。

パッケージのインストールコマンド(他フォルダ含)
npm i -s -g gulp gulp-pug gulp-sass gulp- pleeease gulp-sass-glob gulp-sass-sourcemaps gulp-sass-variables gulp-uglify gulp-concat gulp-imagemin imagemin-pngquant imagemin-mozjpeg browser-sync gulp-plumber gulp-notify gulp-cached gulp-changed gulp-ifgulp-file-include yargs gulp-watch

macの場合は以上で動かなかった場合にコマンドの先頭に”sudo”を付け足し、パスワードを打つ必要があります。

さて、これで大幅な準備は整いました。

開発していこう!

今回利用していくのはVisualStudioCodeです。

参考までに僕がSass、Pug開発において利用している拡張機能をご紹介したいと思います。

おすすめ拡張機能

・Sass(Robin Bentley)
・Pug (Jade) snippets(mrmlnc)
・SVG Viewer(cssho)
・HTML Snippets(Mohamed Abusaid)

主にいじっていくファイルはsrc以下のファイルとなっており、dist以下はgulpを実行した際に削除、上書きされてしまうのでご注意ください。pugはphp同様に共通部分をpug/includeすることが可能なため、include以下に共通部分のファイルがありますので編集することができます。
固定ページ、投稿ページはpug/pagesいかのファイルを複製、していくことでページを増やしていくことができます。

  1. src/pug/pages以下に増やしたい分のpugファイルを作成。pugの記述の仕方はサンプルファイルを参照。
  2. 同じくsrc/pug/data.pugに増やした分のファイルの設定をvar settings内に例を見ながら記述。

Sassは主にbase.sassを編集していくことを推奨します。

また、大きな疑問点として「jsのファイルはどこにスクリプトを書くべきか」が気になるところですが、src/js直下に必要jsファイルをおいておくだけで勝手に読み込まれ、コンパイル後にscript.jsにまとめられます。

コンパイル時は以下のコマンドを打つことでできます。

コマンド
npx gulp

最後に

開発においてスピードを求めるにはSassやPugが必要になってくるケースもあるかもしれません、新しい言語というよりも開発環境という面で抵抗が出てきた際にぜひ参考にしてみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です