Pugと仲良くする方法 - Qiita
この記事は J2complexed Advent Calendar 2016 の14日目の記事です。 みなさんはパグと仲良くできていますか？ パグはかわいいですね。なによりもマークアップの効率が良くなります！ Pugは以前までJadeと名乗っていましたが、Pugの方がいいですね。いいセンスをしてます。 詳しくは公式を見ていただいたほうが、いいと思います！ Getting Started - Pug Pugの簡単な紹介 PugはJST (JavaScript Templates)って言われてるJavaScriptで動くテンプレートエンジンです。 Expressでも動かすことができます。（動かしたことはありませんが） Express でのテンプレート・エンジンの使用 Githubに載っている例を見てみると、書き方がわかると思います。 doctype html html(lang="en") h
古くなったgulpのdevDependenciesを一気に更新する方法
1年前に作ったgulpのタスクを久々に触ったら、package.jsonにあるdevDependenciesがかなり古くなっていました。そこで、これらを一気にアップデートする方法を探していたら、やっぱりありました。 npm-check-updates というツールが。 このツールを使うと、package.jsonにあるdevDependenciesのバージョンと最新のものを比較して見せてくれます。そして、コマンドを叩くだけで、古くなったすべてのdevDependenciesをアップデートしてくれます。 やり方は簡単で、まずはnpm-check-updatesをインストール： % npm install npm-check-updates -g npm-check-updatesを走らせる： % ncu すると以下のように古くなっているものを教えてくれます： % ncu gulp-newer
開発しやすい環境の作り方~Web系~ - Qiita
はじめに 何か記述等にミスやこうした方がいいとのことがあればコメントで教えてくださると幸いです。 目的 開発を円滑するために行ったら良いと思われることについての紹介 概要 タスクランナーのGulpを用いて開発の効率化を図る。 内容は、SassやPugで書いた内容を変換し、ファイルの内容が変更された場合は自動的にブラウザのリロードを行う流れを作成する。 Windows 8.1 npm 2.15.1 node 4.4.3 gulp 3.9.1 環境構築 フォルダ構成 まず初めに、フォルダ構成を作成します。今回の場合私はポートフォリオサイト作ろうと思っていたので以下のようにしました。 今回はこのフォルダ構成で説明していきます。 root/ ├ js/ | └ index.js ├ css/ | └ style.css ├ img/ | └ hoge.png ├ sass/ | └ style.s
Pug(Jade)で効率的なマークアップ環境を作る ｜ Tips Note by TAM
HTMLのコーディングをするとき、メタ情報やヘッダーのような共通部分を効率的に管理するためにPugというテンプレートエンジンをよく使っています。最初は「導入コストが高い」と考えていましたが、それ以上のメリットがあると感じるようになりました。 今回はPugのテンプレートを作ったので、その使い方を紹介します。 今回はPugの記法については細かく説明できませんので、詳しい仕様は公式サイトを確認してください。 Getting Started – Pug テンプレートエンジンとPugについて テンプレートエンジンというのは、特定の処理をおこなうテンプレートに表示させたいデータ（文字列やタグなど）を渡すことで、無駄なくHTMLを作成していく仕組みのことです。CSSにおけるSassのようなものと考えてもいいと思います。 今回使用するテンプレートエンジンのPugには以下のような特徴があります。 閉じタグ（
gulp：特定のディレクトリやファイルを対象から除外する方法 - NxWorld
gulpを使っていると基本的には指定した全てのファイルで処理を実行してほしいけれど、一部ファイルに関しては実行してほしくないというときがあります。 そんなときに使える特定のディレクトリやファイルを対象から除外する方法で、簡易的なものであれば特にプラグイン等も必要なく実装できます。 !（エクスクラメーションマーク）を使う 結論から書くと、除外したいディレクトリやファイルのパス指定前に**!（エクスクラメーションマーク）**を記述すれば除外指定することができます。 何らかの理由でこのファイルはLintさせないとか開発時にしか使用しないディレクトリ・ファイルを公開用にgulp.dest()するのに含めないとかいろいろ使う場面はありますが、そのような時にgulp.src()などで指定するパス前に!を記述すれば特定のディレクトリ・ファイルを除外指定できます。 実際の使用例 「!（エクスクラメーション
俺だけのGulp（ガルプ） | ツクメモ - ウェブやアプリをツクるヒトのメモ
いつものNode.jsのインストール Windowsは、公式サイトから実行ファイルをダウンロードしてインストールしましょう。 Macも同じようにインストールできますが、Homebrewというパッケージ管理ツールを使用しても良いです。 node.js Homebrew Gulpをインストール Node.jsが用意できたらGulpをインストールしましょう。 WindowsならDOSコマンドプロンプト、Macならターミナルからコマンドを実行していきます。 > npm install -g gulp Gulpを使うディレクトリを作成しましょう。 > mkdir project > cd project package.jsonを作成します。基本的には、全てEnterで大丈夫です。 > npm init This utility will walk you through creating a pa
Hamlの書き方 - Qiita
htmlを記述するとき、簡単かつ簡易的に記述できるHamlについての書き方を記します。 Ruby On Rails などを扱うとき、Hamlで記述する人も多いでしょう。 ちなみに私はSlimなども好きです。 Hamlの基本 （例） ＜コード解説＞ 1. !!! <!DOCTYPE html>を表す 2. % タグの前に%を付けると< 開始タグ >と< 終了タグ >を表す。 3. インデントを必ず入れる 入れ子構造にする時は字下げを必ず同じスペース分入れる。 ちなみに私の場合はRubyが主ですがその他プログラムでも記述するときは字下げ（タブ幅）を2にしています。だいたい4つスペースか2つスペースなんかが一般的でしょうか。 4. 属性を入れる場合 Ruby風に{}とシンボルで書ける。 尚、HTML風に書くなら「%html(lang="ja")」 コメント記法 HTML的に記述 「/ コメントだ
Include haml - 酔いどれコード
久しぶりに Sinatra をさわった。テンプレートには Haml を使った。 Haml を書いていて、外部ファイル (別のHamlファイル) の読み込みはどうやるんだろうと思った。 検索してみたが、これだと思うような記事は見つからなかった。 じゃあ、ということで適当に書いたものが、思い通りの動きをしてくれたのでちょっと嬉しかったり。 テンプレート中に以下のように書けば、haml_file.haml を読み込んで展開してくれる。 = haml :haml_file ...こんな単純なことだから、多分どこかで読んでるんだろうな。というか、書くまでもない？
gulpでSlimのビルド環境作る - 無気力生活 (ノ ´ω｀)ノ ~゜
2015/07/28追記 続編書いた。 最新の構築方法は以下を参照ください gdgd-shinoyu.hatenablog.com 本当はいろいろやるつもりだったんですが、nodeの更新でミスってnpmが行方不明になったりして時間食われてしまったので、実際のコード書くには至らなかった(´・ω・｀) とりあえず、gulpでSlimビルドできるようにしたのでメモ Slimとは 最近Railsでerbの代替として使われ始めている、HTMLテンプレートエンジン。短い記述で書けるので大変ラク。 Hamlから%抜いたやつだと思えばよいです。gem install slimとかやれば入る。 Slim - A Fast, Lightweight Template Engine for Ruby すばらしい。 Railsなくても、単にマークアップツールとしての使用は可能なので、これで爆速でHTML書けると思
テンプレートエンジン「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上で使えます
gulpfileをTypeScriptで書いて安心を得よう - Qiita
Gruntと比較するとgulpのgulpfile（設定ファイル）はコードの記述が多くを占めるので、TypeScriptで記述したくなります。幸い、gulpはinterpretというモジュールでgulpfileを読み込むので、altJSで記述するのは比較的簡単にできます。 gulpfileをTypeScriptで記述するためには、typescript-requireというモジュールをinstallしておく必要があります。
Documentation - Gulp
This quick start guide will teach you how to build TypeScript with gulp and then add Browserify, terser, or Watchify to the gulp pipeline. This guide also shows how to add Babel functionality using Babelify. We assume that you’re already using Node.js with npm. Minimal project Let’s start out with a new directory. We’ll name it proj for now, but you can change it to whatever you want.
Slimの導入と「gulp-slim」を使ったビルドまで | ブログ - Blog | 佐藤純平 - Jumpei Sato
Slimとは Slimは、HTMLを効率的に書けるようにするテンプレートエンジンです。 テンプレートエンジンとはテンプレートに入力したデータを合成して、文字列を出力する仕組みのことをいいます。 最終的にはHTMLとして出力されます。 今回は導入から「Gulp.js」のプラグイン「gulp-slim」を使用したビルドまでを紹介します。 まずインストール Slimはまず「Ruby」が入っていないと動きません。Macユーザーの方はそのままで問題無いですが、Winユーザーで入っていない方は、インストールが必要です。今回は省略します。 それではSlimをインストールしていきます。 なお、下記のコマンドはMac用です。 sudo gem install slim Slimを使ってみる Slimは通常のHTMLとは記法が異なります。 拡張子も「.slim」となります。 大まかな違いは下記かと思います。
開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました ｜https://wp.yat-net.com/name
2015年 09月 10日 開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました カテゴリ： gulp タグ：gulpタスクランナー タスクランナーの一つであるgulp（ガルプ）。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみたかったという方に役立てばいいなと思います。 1.タスクランナーとは？ gulpで何ができるのか？ 2.gulpに必要な環境を整える – Node.jsのインストール 3.gulpに必要な環境を整える – package.jsonの作成 4.gulpに必要な環境を整える – gulpfile.jsの作成 5.gulp-ejsを使った開発環境 6.
gulp なしの Web フロントエンド開発 - アカベコマイリ
Web フロントエンド開発において gulp は非常に便利だ。しかしあまりにも gulp に依存しすぎており、これなしで開発できるだろうか？という不安もある。というわけで gulp を利用せず package.json と npm だけで同等の機能を実現する方法を検討してみた。 2015/11/4 追記 babelify v7.2 を試すで babelyfy 7.2 ( とその中の Babel 6.x ) について調べ、npm-scripts の変更が必要なことを確認したので追記。また Windows 環境の動作検証をおこなったところ、最新の watchify なら -o オプションが通ることを確認できた。よって本記事の最後の課題が解決したことになる。 2015/9/23 追記 cpx と rimraf を試すの内容をファイル処理に反映して簡略化。 2015/9/15 修正 Stylus
もうgulpで憔悴しない - 低依存gulpfileのレシピ - Qiita
【追記150805】さらに憔悴しないための有用な記事『アカベコマイリ | gulp なしの Web フロントエンド開発』が掲載されましたので、こちらもお勧めします。 こんにちは、@armorik83です。皆さん、Grunt / gulp使ってますか。おなじみなので、ここでは説明はしません。 この記事の要点 なぜGrunt / gulpは憔悴に至るのか、経緯と問題点 npm run-scriptの仕組みについて package.jsonにscriptを羅列することに対する是非 シンプルなgulpfileについての提言 経緯 さて、先日このような記事が界隈で広まっていました。 Grunt/Gulpで憔悴したおっさんの話 この記事については同意できるところと、そうでもないところと、両方有りました。ただ、Grunt / gulpを使っていて色々歯がゆさを感じている方は昨今増えているだろうと感じます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/20160326pugbegin
Gulp Sips: New Command Line Interface
Compile HTML partials with gulp.js
gulp-slim
