技術情報 gulp-footerを使ってcssファイルの最後の行にコメントを入れる
gulp-footer gulpでscssのファイルなどを結合している場合、統合先のcssファイルの最後の行にコメントを記述していても、さらにその下に出力されてしまう場合があります。 そんなときにgulp-footerを使ってcssファイル...
gulp
技術情報 
技術情報 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化(圧縮)を行ってみたのでご紹介いたし...