gulp

gulp-footerを使ってcssファイルの最後の行にコメントを入れる

gulp-footer gulpでscssのファイルなどを結合している場合、統合先のcssファイルの最後の行にコメントを記述していても、さらにその下に出力されてしまう場合があります。そんなときにgulp-footerを使ってcssファイル...

GulpとFLOCSSで始めるモバイルファースト的なCSS設計

hiloki/flocss: CSS organization methodology. WebでフロントをされているみなさんはCSSを書いていて命名規則が面倒、何かまんじりとしない、そんなことはありませんでしょうか。私はあります。 CSS...

テンプレートエンジンのPugで使うクラス名をページ、ディレクトリなどで任意に変える

以前、テンプレートエンジンのPugをご紹介いたしました。今回はインクルードしているファイル内で記述しているクラス名を任意に変える方法をご紹介いたします。変数を使ってクラス名を変える pug 下記のように「include ../commo...

GulpでテンプレートエンジンのPugを使ってみた

Getting Started – Pug 前回はGulpで利用するテンプレートエンジンのEJSをご紹介いたしました。 EJSの他に、Gulpで利用できるテンプレートエンジンにはPugというものが有名なようなので、試しに使ってみました。 P...

GulpでテンプレートエンジンのEJSを使ってみた

EJS - JavaScript Templates 最近、静的なテンプレートを生成する方法としていろいろ試行錯誤していたのですが、JavaScriptで静的なhtmlを生成できるEJSというものを知り、使ってみることにしました。 EJSと...

Local by Flywheelで構築したWordPressにGulpを適用する

先日はWordPressをローカルに手軽に構築できるLocal by Flywheelをご紹介いたしました。今回はそのLocal by Flywheelで構築したWordPressに、Gulpを適用する方法をご紹介いたします。開発するテ...

XAMPPのuserdirで設定したサイトの作業更新をGulpのBrowsersyncで自動で確認する

以前、XAMPPのuserdirによるローカルでの開発環境の構築、ローカルにあるCMSへのGulpの導入などをご紹介いたしました。今回はXAMPPのuserdirで設定したサイトの作業更新を、GulpのBrowsersyncによって自動で...

Atomエディタで「Gulp」を操作するなら「gulp-control」パッケージが便利

gulp-control 前回「Gulp」でCSSをMinify化する方法をご紹介いたしました。「Gulp」は便利なのですが、実行する際のコマンドがなかなか面倒で、どうしたものかと考えていると、愛用しているAtomエディタに「gulp-c...

Windowsに「Node.js」と「Gulp.js」をインストールして、WordPressテーマのSimplicityの子テーマにあるCSSをMinify化して読み込んでみた

「Gulp」というタスクランナーが以前から気になっていたので、当サイトで採用しているWordPressテーマのSimplicityで適用してみることにしました。今回は「Gulp」でCSSのMinify化(圧縮)を行ってみたのでご紹介いたし...