2021-06

web制作ではコーディング以外にたくさんの面倒な作業があります。gulpを導入すればその面倒な作業を全て自動化させることができるかもしれません。gulpのインストールから導入までまとめています。どういったプラグインを導入したらいいか分からないといった方にもおすすめのプラグインを紹介しています。

2021年度時点でgulpのおすすめプラグインについてまとましたので紹介していきます。gulpを扱えるようになるとweb制作でのできる幅が広がるのでぜひ導入を検討してみてください。今回紹介するプラグイン以外にも便利なプラグインがたくさんありますのでご自身に合ったものを使用してください。

今回はgulpfile.jsのテンプレートサンプルを紹介していきます。久しぶりにgulpを触ったのでまとめておこうと思います。gulpを導入したけどどういうプラグインを導入すればいいか分からない、どのように構築していけばいいか分からないといった方に見ていただけるとうれしいです。web制作をしている方はgulpを使えるようになるとできる幅が広がるのでぜひ参考にしてください。

gulp-pleeeaseを使ってcssの圧縮やベンダープレフィックスの付与、メディアクエリをまとめる処理を実行する方法について説明していきます。gulp-pleeeaseを使えば複数のプラグインを使って処理していたことが1つのプラグインだけで実現できるようになります。複数のプラグインを使ってcssの処理している方はgulp-pleeeaseの導入をぜひ検討してみてください。

gulp-sassを使ってDart Sassでコンパイルできるようにする方法について説明していきます。これからはDart Sassの環境でweb制作を進めていく必要があります。早いうちにDart Sassを導入して書き方に慣れるようにしましょう。gulp-sass-glob-use-forwardでglob機能を使ってファイルの読み込みする方法についても紹介しています。

sassを使ってweb制作を進めていると面倒な作業がたくさんあります。gulpでsassをコンパイルできるようになると、ファイルの一括読み込みやベンダープレフィックスの自動付与など面倒な作業を楽にしてくれるようになるので気になる方はぜひ参考にしてください。

今回はgulp-load-pluginsでモジュール読み込みを省略する方法について説明します。gulpのプラグインをたくさん導入するようになってくるとモジュール読み込みの宣言が大量になってしまいます。そのような場合にgulp-load-pluginsを使用すると、モジュール読み込みの宣言を省略することができてコードの見通しが良くなります。gulpのプラグインをたくさん導入している方はgulp-load-pluginsを導入するとコードの見通しがスッキリするのでぜひ導入してみてください。

browser-syncを使ってローカルのWordPress環境でブラウザを自動リロードする方法について説明していきます。ローカルのWordPress環境でブラウザを自動リロードできるようになると非常に作業が楽になります。手動で更新するのが面倒に感じている方はぜひ導入してみてください。

browser-syncを使って自動でブラウザを更新する方法について説明していきます。web制作ではhtmlやcssでコーディングした後手動でブラウザで表示の確認をします。一見単純な作業ですが毎回手動で確認するのも面倒ですよね。browser-syncを使えば自動でブラウザをリロードしてくれるようになるので手動で更新するのが面倒に感じている方はぜひ導入してみてください。