その他

Gulpで複数ディレクトリのSCSSを自動コンパイルする方法!

投稿日:2018年12月19日 更新日:

Gulpは様々なタスクを実行するためのNode.jsで開発されているアプリケーションです。今回はGulpを利用して、SCSSを自動コンパイルする方法をご紹介したいと思います。

準備

プロジェクトのルートディレクトリで以下のコマンドを打ちます。

次のコマンドを順番に実行してください。

ちなみにパーミッション関連のエラーが発生する場合は、sudoを利用するか、ディレクトリの権限を設定する事で解決されるはずです。

gulpfile.jsを作成する

プロジェクトのルートディレクトリにgulpfile.jsを作成してください。ディレクトリパス等は各々の環境に合わせて、変更をしてください。ちなみにアスタリスク(*)はワイルドカードとなっており、どのファイル名にも当てはまるという意味になります。まずは1つのディレクトリを監視する方法ですが、以下のようになります。

ちなみに特定のディレクトリ直下にある全てのファイルとディレクトリを扱いたい場合は、アスタリスク2つとスラッシュ、その後ろにアスタリスク1つをつけて指定します。逆にアスタリスクを文字列に置き換えれば、そのファイルだけが監視されるという設定にも出来ます。実際には、以下のような記述となります。

npm run gulpを実行してみよう

以下のコマンドをプロジェクトのルートディレクトリで実行すると、scssファイルの監視が始まります。変更があれば、自動的にcssファイルを生成してくれるため、scssの編集中は実行しておくとリアルタイムで変更を確認する事が可能です。

複数のディレクトリを監視する方法

やり方はシンプルです。例えば、PC専用のディレクトリとスマホ専用のディレクトリをそれぞれ監視したい場合、以下のように書き換えてみましょう。

このようにコードを追加する事で新たに監視する範囲を広げる事が可能です。

-その他
-, ,

執筆者:


comment

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

関連記事

【WordPress】使いにくい新エディタをプラグインで旧式に戻そう!

2018年12月にWordpressのバージョンが5.0へアップデートされましたが、とにかく使いづらいの一言です。久しぶりにブログ投稿でもしようかと思った時、新バージョンにアップグレードしておくかと思 …

【Node.js】npmでグローバルインストールをしない方が良い理由

npmでインストールする場合、オプションが複数存在しています。技術ブログ等でnpmを利用したパッケージのインストール方法を提示されている際、オプション付きのコマンドが用意されている場合がありますが、皆 …

【Mac】npmでpermission deniedが発生した場合の対処方法

“npm install”や”npm install -g”で何かをインストールしようとした際に”permission denied&#82 …

MacにHomebrewをインストールする方法!

今回はHomebrewのインストール手順をご紹介したいと思います。プログラマやエンジニアの方であれば、技術ブログ等を読む事があると思いますが、Macで何らかの環境を用意する際にHomebrewを利用す …

【レビュー】Softbank Airの速度は速いのか?それとも遅い?

最近、引っ越しをする機会があったのですが、インターネット回線をどうしようと悩んでいたところ、ソフトバンク光と契約する事になりました。ソフトバンク光にしたきっかけとしては、Softbank Airが開通 …