この記事は 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
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
HTMLのコーディングをするとき、メタ情報やヘッダーのような共通部分を効率的に管理するためにPugというテンプレートエンジンをよく使っています。最初は「導入コストが高い」と考えていましたが、それ以上のメリットがあると感じるようになりました。 今回はPugのテンプレートを作ったので、その使い方を紹介します。 今回はPugの記法については細かく説明できませんので、詳しい仕様は公式サイトを確認してください。 Getting Started – Pug テンプレートエンジンとPugについて テンプレートエンジンというのは、特定の処理をおこなうテンプレートに表示させたいデータ（文字列やタグなど）を渡すことで、無駄なくHTMLを作成していく仕組みのことです。CSSにおけるSassのようなものと考えてもいいと思います。 今回使用するテンプレートエンジンのPugには以下のような特徴があります。 閉じタグ（
gulpを使っていると基本的には指定した全てのファイルで処理を実行してほしいけれど、一部ファイルに関しては実行してほしくないというときがあります。 そんなときに使える特定のディレクトリやファイルを対象から除外する方法で、簡易的なものであれば特にプラグイン等も必要なく実装できます。 !（エクスクラメーションマーク）を使う 結論から書くと、除外したいディレクトリやファイルのパス指定前に**!（エクスクラメーションマーク）**を記述すれば除外指定することができます。 何らかの理由でこのファイルはLintさせないとか開発時にしか使用しないディレクトリ・ファイルを公開用にgulp.dest()するのに含めないとかいろいろ使う場面はありますが、そのような時にgulp.src()などで指定するパス前に!を記述すれば特定のディレクトリ・ファイルを除外指定できます。 実際の使用例 「!（エクスクラメーション
いつもの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
久しぶりに Sinatra をさわった。テンプレートには Haml を使った。 Haml を書いていて、外部ファイル (別のHamlファイル) の読み込みはどうやるんだろうと思った。 検索してみたが、これだと思うような記事は見つからなかった。 じゃあ、ということで適当に書いたものが、思い通りの動きをしてくれたのでちょっと嬉しかったり。 テンプレート中に以下のように書けば、haml_file.haml を読み込んで展開してくれる。 = haml :haml_file ...こんな単純なことだから、多分どこかで読んでるんだろうな。というか、書くまでもない？
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書けると思
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか？ EJSっていうのはですね、なんかもう、こう、すんごいツールでして！ とにかく、使うとコーディングがめっちゃ早くなるんですよ！！ 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは？ EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます
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とは Slimは、HTMLを効率的に書けるようにするテンプレートエンジンです。 テンプレートエンジンとはテンプレートに入力したデータを合成して、文字列を出力する仕組みのことをいいます。 最終的にはHTMLとして出力されます。 今回は導入から「Gulp.js」のプラグイン「gulp-slim」を使用したビルドまでを紹介します。 まずインストール Slimはまず「Ruby」が入っていないと動きません。Macユーザーの方はそのままで問題無いですが、Winユーザーで入っていない方は、インストールが必要です。今回は省略します。 それではSlimをインストールしていきます。 なお、下記のコマンドはMac用です。 sudo gem install slim Slimを使ってみる Slimは通常のHTMLとは記法が異なります。 拡張子も「.slim」となります。 大まかな違いは下記かと思います。
JavaScript コンパイルとファイル監視 JavaScript ビルドは Browserify、ES6 から ES5 へのコンパイルは babelify を利用する。Source Maps ファイルは exorcist が生成。ファイル監視は watchify が担当。コマンド定義は以下。 { "scripts": { "build:js": "browserify -t babelify ./src/js/App.js -d | exorcist ./src/bundle.js.map > ./src/bundle.js", "watch:js": "watchify -v -t babelify ./src/js/App.js -o \"exorcist ./src/bundle.js.map > ./src/bundle.js\" -d", "release:js": "bro
【追記150805】さらに憔悴しないための有用な記事『アカベコマイリ | gulp なしの Web フロントエンド開発』が掲載されましたので、こちらもお勧めします。 こんにちは、@armorik83です。皆さん、Grunt / gulp使ってますか。おなじみなので、ここでは説明はしません。 この記事の要点 なぜGrunt / gulpは憔悴に至るのか、経緯と問題点 npm run-scriptの仕組みについて package.jsonにscriptを羅列することに対する是非 シンプルなgulpfileについての提言 経緯 さて、先日このような記事が界隈で広まっていました。 Grunt/Gulpで憔悴したおっさんの話 この記事については同意できるところと、そうでもないところと、両方有りました。ただ、Grunt / gulpを使っていて色々歯がゆさを感じている方は昨今増えているだろうと感じます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
