現場で使えるgulp入門 第1回 gulpとは何か さまざまな作業を自動化するビルドシステムgulpの基礎を解説します。第1回目は、gulpとは何か？ 自動化のメリットはどこにあるのか概観。インストールから簡単なタスクを走らせてみます。 はじめに このシリーズでは、JavaScriptで書かれたビルドシステムであるgulp（ガルプ）について、導入から使い方など、基本的な部分を解説します。 なお、記事執筆時点のgulpのバージョンは3.8.7です。 第1回目では、まず、なぜgulpのようなツールが必要なのか、ツールの背景に触れます。さらにgulpの概要と、環境設定を中心に解説します。 gulpとは gulpはNode.jsをベースとしたビルドシステムヘルパーです。以前CodeGridでも紹介したGruntと似た目的を持って作られたツールで、gulpを使えばさまざまな作業を自動化することができ
HTMLをより少ない記述量で書くことができる「テンプレートエンジン」。Haml, Slim, Pagなどをよく見聞きしますね。 これらの形式をブラウザで表示するためにはHTMLにコンパイル（変換）する必要があります。その環境構築が第一難関です。 が！CodePenを使えば環境構築なしにテンプレートエンジンを体験することができます！！早速やってみました。 目次： CodePenのSetting（設定）変更 Emmet Haml HAMLの主な記法 コンパイル後のコード表示 Markdown Markdownの主な記法 Slim Slimの主な記法 Pug Pugの主な記法 おまけ：EJSもオススメ（追記） まとめ ※参考：HTMLの基本についてはこちら 【HTMLの基本】書ける前に読む！HTML、CSS、JSの書式-2 ※2019/10/20：この記事上にソースコードがありませんでしたが、追
【追記（2020/09/20）】 テンプレート更新しました はじめに gulp v4 がだいぶ前にリリースされたけど、当方ずっとgulp v3のままだった gulp v4 は新しい機能が増えたり書き方が変わったりとすごい変わってしまわれてる 今まで自分の作ったものが化石になるのを恐れたのでgulp v4に適用させた ついでにテンプレ作って今後楽しようと思った どんどん改善していきたいからみんなに使ってもらいたい、ここで宣伝だ 概要 この記事の概要は以下になります🐶 gulpとpug の説明（すごいざっくり） Pug × SCSS × TypeScript テンプレの紹介 このテンプレでできること このテンプレの使い方 このテンプレ内のディレクトリ構成のお話 🎍🐭🎍🐮🐯🐰🐲🐍🐴🐑🐵🐔🐶🐗 gulp gulp公式サイト https://gulpjs.com/ Ja
A toolkit to automate & enhance your workflowLeverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines. TypeScriptDevelop in any languagePNGCreate assets with any toolMarkdownWrite using any formatJavaScriptGet compiled codeWebPGet optimized imagesHTMLGet rendered content
EJS - JavaScript Templates最近、静的なテンプレートを生成する方法としていろいろ試行錯誤していたのですが、JavaScriptで静的なhtmlを生成できるEJSというものを知り、使ってみることにしました。EJSとはE... Pugとは Pug(旧Jade)はHTMLを書くためのテンプレートエンジンで、JST (JavaScript Templates) の一つです。Pugは「.pug」という拡張子のファイル内でHTMLのようにタグで囲まず、改行やインデントによってページを作っていきます。Pugを利用するには「Node.js」が必要になります。PugにはGulp用のPugがあり、Gulpで使うことができます。 Pugで何ができるか ループや条件分岐。 共通ファイルの読み込み(インクルード)やパラメータの引き渡し。 JavaScriptと同様に、数、文字列、配列、オブジ
asciidocでスライドを作成する 目的 プレゼン資料にパワポを使いたくない（細部にこだわりたくなって時間が掛かる..!） 繰り返し修正して使用するプレゼン資料はバージョン管理したいのでテキスト形式にしたい 前置き asciidoc形式で作成したテキストファイルを、自端末上のasciidoctorでスライド風HTMLに変換するまでを 簡単に記載します。 Windows 10 インストールするもの Ruby asciidoctor tilt haml deckjs 環境構築手順 Rubyをインストール ダウンロード Downloads-RubyInstaller インストール確認 ruby -v asciidoctor,tilt,hamlのインストール インストール gem install asciidoctor tilt haml インストール確認 gem list --local ご参
とつぜんですがみなさま．大急ぎでスライドを作る必要に迫られたときどうしておられるでしょうか． 先日，わたしもそんなような感じになったので，どうやってやり過ごしたのかを紹介します． 環境 基本的にはUbuntu 18.04で作業しますが，発表はmacOSあるいはWindowsで行わなければならないかもしれません． 時間がないのでちょちょっと書かないといけません． 高価なソフトウェア（およびそのライセンス）は所持していません． 現代人として版管理はしますよね？ 要望 ようするに，まずはクロスプラットホームを望みます．というより，プレーンなテキストとして書く→なにがしかの処理をする，という感じであれば，動作する環境は限定的であるとしても，スライドの作成自体はいつでもどこでもできそうだなぁという感じでしょうか． テキスト自体はやはりAsciidocで書きたいというか書くべきというかそう思います．M
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
