[B! gulp] glat_designのブックマーク

glat_design id:glat_design

gulpに関するglat_designのブックマーク (8)

Nunjucks + gulp で静的 HTML をモジュール化する
やりたいこと概要静的 HTML を複数ページ作成するときに、共通部分（ヘッダーとかフッターとか）をコピペしたくない。「PHP とか使って include とかすればいいじゃん」ていう意見もあるんだけど、動作確認に web サーバー立てるの面倒だし、単なる HTML で済むなら HTMLで完結させたい。細かい背景 gulp-ect を使って、やりたいことは大体実現出来ていたんだけど、以下の2つの理由により、別の方法に切り替えたいと思った。 ECT も gulp-ect も最終更新日が3年前ファイルのパスを埋め込む（後述）、というののやり方が分からなかったし出来なさそうやったこと（TL;DR）さきに結論だけ書いておくと、 Nunjucks というテンプレートエンジンの記法で、ファイルを作成 gulp-nunjucks-render という gulp のプラグインを使って、HT
glat_design 2017/11/20
pugは使ったけど確かにちょっと慣れなかった。試してみようかなあ /

Web制作

HTML

gulp

テンプレートエンジン

静的サイト

Nunjucks

解説
リンク
Glatch（グラッチ） - 夫婦で活動するフリーランスWeb制作ユニット
横浜市・東京都内を中心に活動するフリーランスのWebデザイナーとフロントエンドエンジニアのWeb制作事務所です。BtoBのLPやコーポレートサイトの制作を得意としています。
glat_design 2016/08/19
とりあえず触ってみるところから /

Web制作

Gulp

EJS

JSON

HowTo

コーディング
リンク
gulp: The Good Parts
Good practices for gulp 関西フロントエンドUG主催「FRONTEND CONFERENCE 2016」での発表資料です。 http://kfug.jp/frontconf2016/ https://github.com/jmblog/gulp-the-good-parts
glat_design 2016/03/08
あとで見る /

Web制作

JavaScript

タスクランナー

gulp

解説

スライド
リンク
【gulp】htmlテンプレート「gulp-jade」についてメモメモ（１）～導入 | バシャログ。
みなさま、こんにちは。昨年は、『ちはやふる』や『めぞん一刻』、そして『孤独のグルメ』などにハマり続け、夫婦で聖地めぐりをしていた kouraku です。とりあえず、『ちはやふる』の聖地巡り（分倍河原：東京、近江神宮：滋賀、芦原温泉：福井）はコンプリートしました。さて、昨年はhtmlテンプレートとして「gulp-html-extend」を紹介してきましたが、簡単で分かりやすい反面、かゆいところに全く手が届かない場面などに多々遭遇します。「あぁ、ここで条件文が使えれば余計なレイアウトなんて作らなくて良いのに・・・」とか、「変数が多くなると見辛いし設定しづらいな・・・」とか。こうした悩みを解決すべく、ここ最近（自分が）あまり使わなくなってしまった「jade」をおさらいしようと思いました。ということで、そのおさらい内容をメモメモ。まずは構成から・・・今回の構成は、下図のとおりです。
glat_design 2016/02/04
参考に /

Web制作

gulp

Jade

解説

コーディング
リンク
https://blogcroc.com/
glat_design 2015/02/19
gulpfileとかpackage.jsonを吐き出すツール。初めて見たときはなんなのかわかんなかったなー /

Web制作

フロントエンド

gulp

Webサービス

JavaScript
リンク
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコデメリット記述がよりNodeに近くなるため、複雑なことは敷居がやや高めプラグイン開発のためのドキュメントが少ない今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！そんな環境を作りたいと思います。 1. Node.jsをインストールまずはNode.jsをインストールしましょう。 Node.js http://nodejs
glat_design 2015/01/06
スライドも合わせて参考にしました /

Web制作

タスクランナー

フロントエンド

チュートリアル

スライド

gulp
リンク
タスクランナーgulp入門
タスクランナーgulp入門 gulpはGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。 node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、JavaScript(node.js)で独自のタスクも簡単に記述することができます。後発ということもありGruntよりプラグイン数は少ないですが、マニアックなタスク以外はそろっているので通常のWeb制作などでは問題なく利用できるでしょう。 node.jsのインストール node.jsが必要ですのでインストールしていない方はインストールしましょう。公式サイトでインスト
glat_design 2015/01/06
参考にしました /

Web制作

タスクランナー

gulp

チュートリアル
リンク
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
glat_design 2014/05/18
がるぷ。まだGruntもままならないけど… /

Web制作

JS

タスクランナー

gulp

基礎
リンク
1