技術情報gulp-footerを使ってcssファイルの最後の行にコメントを入れる gulp-footer gulpでscssのファイルなどを結合している場合、統合先のcssファイルの最後の行にコメントを記述していても、さらにその下に出力されてしまう場合があります。 そんなときにgulp-footerを使ってcssファイル...2017.11.02技術情報
技術情報GulpとFLOCSSで始めるモバイルファースト的なCSS設計 hiloki/flocss: CSS organization methodology. WebでフロントをされているみなさんはCSSを書いていて命名規則が面倒、何かまんじりとしない、そんなことはありませんでしょうか。私はあります。 CSS...2017.05.24技術情報
技術情報テンプレートエンジンのPugで使うクラス名をページ、ディレクトリなどで任意に変える 以前、テンプレートエンジンのPugをご紹介いたしました。 今回はインクルードしているファイル内で記述しているクラス名を任意に変える方法をご紹介いたします。 変数を使ってクラス名を変える pug 下記のように「include ../commo...2017.05.18技術情報
技術情報GulpでテンプレートエンジンのPugを使ってみた Getting Started – Pug 前回はGulpで利用するテンプレートエンジンのEJSをご紹介いたしました。 EJSの他に、Gulpで利用できるテンプレートエンジンにはPugというものが有名なようなので、試しに使ってみました。 P...2017.04.30技術情報
技術情報GulpでテンプレートエンジンのEJSを使ってみた EJS - JavaScript Templates 最近、静的なテンプレートを生成する方法としていろいろ試行錯誤していたのですが、JavaScriptで静的なhtmlを生成できるEJSというものを知り、使ってみることにしました。 EJSと...2017.04.24技術情報
技術情報Local by Flywheelで構築したWordPressにGulpを適用する 先日はWordPressをローカルに手軽に構築できるLocal by Flywheelをご紹介いたしました。 今回はそのLocal by Flywheelで構築したWordPressに、Gulpを適用する方法をご紹介いたします。 開発するテ...2017.03.04技術情報
技術情報XAMPPのuserdirで設定したサイトの作業更新をGulpのBrowsersyncで自動で確認する 以前、XAMPPのuserdirによるローカルでの開発環境の構築、ローカルにあるCMSへのGulpの導入などをご紹介いたしました。 今回はXAMPPのuserdirで設定したサイトの作業更新を、GulpのBrowsersyncによって自動で...2017.02.26技術情報
パソコンAtomエディタで「Gulp」を操作するなら「gulp-control」パッケージが便利 gulp-control 前回「Gulp」でCSSをMinify化する方法をご紹介いたしました。 「Gulp」は便利なのですが、実行する際のコマンドがなかなか面倒で、どうしたものかと考えていると、愛用しているAtomエディタに「gulp-c...2017.01.20パソコン
技術情報Windowsに「Node.js」 と「Gulp.js」をインストールして、WordPressテーマのSimplicityの子テーマにあるCSSをMinify化して読み込んでみた 「Gulp」というタスクランナーが以前から気になっていたので、当サイトで採用しているWordPressテーマのSimplicityで適用してみることにしました。 今回は「Gulp」でCSSのMinify化(圧縮)を行ってみたのでご紹介いたし...2017.01.19技術情報