Hexoをgulp 4に組み込んで効率的にブログ開発する
Hexoブログ開発もgulpで済ませたい。HexoプラグインだとSass globやアイコンフォント制作ができないし。ただ、両方使ってそれぞれを毎回立ち上げたり停止させるような開発は辛すぎる。 できれば、gulpのタスクとしてHexoを登録し npx gulp を入力するだけですべて済むようにしたい。面倒を回避したい一心でなんとか動かせるようになったのでメモしておく。 gulp v4 をインストールまず、gulpのバージョン4以降をインストールする。バージョン3までのgulpはタスクを並列処理するのがデフォルトで、直列処理するにはnpmライブラリの run-sequence などが必要だった。 2018年3月10日時点だと、gulp 4は元旦にプレリリースされたばかりでドキュメント制作後の正式リリース待ちとなっている。機能はできあがっているのでプレ版を以下のコマンドでインストールする。 $
テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか？ EJSっていうのはですね、なんかもう、こう、すんごいツールでして！ とにかく、使うとコーディングがめっちゃ早くなるんですよ！！ 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは？ EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます
gulp、おまえのことがすきだ - Qiita
この記事は J2complexed Advent Calendar 2016 の9日目の記事です。 何書こう、とおもってどしよっておもって、はやくも二回目にして個人情報を晒していきます。 gulp好きですか。好きですね。 シンプルに直感的に書けるし、やりたいことは大抵受け止めてくれる寛大さとか愛せるもんね。 gulp不要論とかあるけど、まだ私、gulpと一緒にいたい。 gulp、お前のこんなとこがすきだ 非同期処理だ アイコンが凶暴じゃない タスクの記述がシンプルだ かゆいところに大体手が届く かゆいところに手を届かせてくれるプラグインのこともあいしてる。 こんなgulpプラグインがすきだ gulp-combine-media-queries 複数のsassファイル内にばらばらに書いたメディアクエリーの記述を、コンパイル時にまとめてくれる。 例。 _button.scss .button
gulpで使っているモジュールまとめ(GitHubにてサンプル公開) - ユーティリティ編 - Qiita
gulpで普段使っている(使っていた)モジュールをまとめてみました。 本当はHTML/CSS/JSや関連ツールのモジュールも載せたかったのですが、長くなりそうなのでユーティリティとして使っているものだけを先に記事にしました。 一応、ここで紹介するgulpプラグインに関してはブラックリストに入っていない事を確認済みです。 ちなみに、Qiita内だと下記の記事がまとまっていて大変参考になると思います。 gulp.js その4 プラグイン一覧 - Qiita 僕がGulpで使っているプラグインとnode.jsモジュール一覧 - Qiita サンプルのGitHub https://github.com/yuichiroharai/gulp-sample ここで使用しているサンプルは全てGitHubにて公開しています。 実際に実行してみるとイメージが掴みやすいかと思います。 gulp-plumber
gulp ありの Web フロントエンド開発 - アカベコマイリ
gulp なしの Web フロントエンド開発 の追補編として gulp を利用するケースもまとめておく。元記事と同じプロジェクトと機能を gulp で実装した。記事の構成は「gulp なしの〜」を踏襲。各項の説明は package.json の scripts に代わって gulp タスクとしている。 設計方針 はじめに設計方針を決めておく。 AltJS から JavaScript へのコンパイルに対応する AltCSS から CSS へのコンパイルに対応する ファイル監視による AltJS/AltCSS の自動コンパイルに対応する ユニット テストに対応する コードド キュメント生成に対応する Windows 環境を考慮する 単体 gulpfile.js のみで実装する 方針 1 〜 6 までは「gulp なしの〜」と一緒。方針 7 は環境に関する設定を package.json と g
gulp-ejsでhtmlファイルを楽に管理しよう
コーディング時に便利なタスクランナー「gulp」 何かと便利なプラグインがありますがその中でも、 最近注目されている「gulp-ejs」を使ってより制作を楽にしたいと思います！ 「gulp-ejs」についてはググっても、英語サイトばかりがヒットして あまり日本語での説明がないのが現状です。 なので、まだまだ勉強中ですが少しでも役に立てればと思います。 1.はじめに gulpがインストールされていることを前提に始めます。 インストール方法が分からない場合は、 http://ics-web.jp/lab/archives/3290 http://www.unionnet.jp/develop/gulp/ 上記URLに詳しく書かれているので参考にして下さい。 2.「gulp-ejs」のインストール windows版で説明します。 こちらはコマンドプロンプトで下記を入力します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
