GitHub - cognitom/symbols-for-sketch: Symbol font templates for Sketch.appYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Gulpでpugのコンパイルを100倍早くするちょっとしたテク | 丸ノ内テックブログ
フロントエンド front end バックエンド back end アプリ開発 app インフラ infra その他 other データドリブン data driven タグ一覧 Ajax（1） Android（20） Apache（2） AR（2） benchmark（1） BigQuery（2） browsersync（1） C4（1） CakePHP（1） CentOS7（1） CI（1） CMS（3） CoreNFC（1） CraftAR（1） CSS（1） DeepLab（2） Dmitry Stogov（1） ECMAScript（1） ECMAScript6（1） ElePHPant（1） Facebook（3） FFmpeg（1） firebase（1） fluentd（1） Framework（1） GD（2） gif（2） Git（1） GLSL（5） Google A
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
gulp-jade で JSON ファイルを変数に読み込む方法（gulp-pug v2 対応追記） - Qiita
//- パースしたJSONデータを格納するグローバル変数 - var data = {} //- JSON 構文をパースしてグローバル変数の data にデータを格納する mixin mixin json(name) - var oldbuf = buf - buf = [] block - data[name] = JSON.parse(buf.join('')) - buf = oldbuf //- 外部 JSON 情報の読み込み +json('site') include site.json //- 呼び出し h1: a(href=data.site.root) #{data.site.name} 解説 jade 標準出力を横取りして JSON をパースしてます。 最後に読み込んだ JSON が標準出力されないよう、バックアップしていた buf を書き戻してます。 buf は jad
EJSとJSONファイルを使って大量のデータを一括管理してHTMLに書き出す ｜ Tips Note by TAM
大量の商品データをHTMLに挿入する際、JSONファイルとEJSを使用して楽にHTMLに書き出すことができました！ EJSとJSONを使用してよかったこと EJSの見た目がHTMLだからすぐ使えた JSのfor文でHTMLの繰り返しの記述を書かなくなって楽＆見た目すっきり 商品データ（名前・商品詳細・画像パス・URLなど）1ファイルで管理できて修正が楽 というわけでめっちゃラクチンですわ≡≡≡≡(┐「ε:) EJSとは 前回Jade(Jadeのテンプレートをextends&blockで継承したら便利に開発できた)を紹介したのですが、EJSもテンプレートエンジンの1つです Embedded JavaScriptの略で見た目はHTMLなのですが、JavaScriptのような書き方もできて、最終的にはHTMLになって生成してくれます Jadeと同じくheader/footerをモジュールに分けて
Pug(Jade)でgulpを使って複数のjsonファイルをいい感じに読み込みたい - Retired Colourman
目的 Pug(Jade)にJSONオブジェクトを渡して楽したいことがあると思う。 { "title":"最高のWebページ", "description":"最高のWebページです", "author":"最高の作者" } html(lang="ja") head title=title meta(name='description',content=description) meta(name='author',content=author) pugファイル内でオブジェクトを変数宣言しようとしても複数行に渡る変数宣言はエラーになってしまうので、オブジェクトを書きづらいという問題がある。 なので「jsonでオブジェクトを書いてそれをどうにかしてpug内でincludeしてよしなにやりたい」となるんだけど、jsonファイルをpugの中でincludeして使うことはできないので、それをどうやる
gulp-data ＋ json で title, description, keyword を一括管理する - Qiita
gulp-data ＋ json で title, description, keyword を一括管理するgulp ディレクトリ構造は以下の前提での設定。 gulpfile.js package.json /dist /src └ /_jade └ /_data └ setting.json └ /aaa └ index.html └ /bbb └ index.html var data = require('gulp-data'); var DEST = './dist'; var SRC = './src'; var SRC_HTML = ['./src/**/*.jade', '!./src/**/_jade/*.jade', '!./src/**/_*.jade']; gulp.task('jade', function() { return gulp.src(SRC_HTML)
現場で使えるgulp入門 | 第1回 gulpとは何か
現場で使えるgulp入門 第1回 gulpとは何か さまざまな作業を自動化するビルドシステムgulpの基礎を解説します。第1回目は、gulpとは何か？ 自動化のメリットはどこにあるのか概観。インストールから簡単なタスクを走らせてみます。 はじめに このシリーズでは、JavaScriptで書かれたビルドシステムであるgulp（ガルプ）について、導入から使い方など、基本的な部分を解説します。 なお、記事執筆時点のgulpのバージョンは3.8.7です。 第1回目では、まず、なぜgulpのようなツールが必要なのか、ツールの背景に触れます。さらにgulpの概要と、環境設定を中心に解説します。 gulpとは gulpはNode.jsをベースとしたビルドシステムヘルパーです。以前CodeGridでも紹介したGruntと似た目的を持って作られたツールで、gulpを使えばさまざまな作業を自動化することができ
なんちゃってフロントエンド開発者が、Bourbon, Neat, Bitters, Refills, Proteus – Gulp を触ってみた | unlimited text works, the 3rd.
はじめに 自分は Twitter Bootstrap にさほど疑問を感じていない…例えば、（クソ）マークアップ問題やデザインが同じ様になる 1 …その辺は後述…程度には、フロントエンド開発に疎い事だけは。 つまりは「お前は何を言ってんだ」だろうなぁこの投稿…中途半端な知識を振りかざしてる感満載じゃないかと。 さて。 何で知ったか覚えてないけど、 Refills を試してみたいと。 しかし前提条件として、 Bourbon と Neat が必要との事で、これらが意味する事は何となく分かるけど、これらを踏まえた上でどうやって使うのかがピンと来なかった。 日本語情報を漁っても、Bourbon、Neat、更には Bitters までは情報として得る事ができても、フロントエンド開発に疎い自分には、Refills本家サイトにコピペ用コードがあるとはいえ、具体的にどの様に手を動かしていけば良いのかがさ
gulp.watchはパスを./で始めると新規ファイルを処理しない - Qiita
以下のようなbrowserifyするだけのgulpfile.jsは、よくある感じに見えるが、新しく.jsファイルが増えてもbrowserifyしてくれない。 var gulp = require('gulp'); var gutil = require('gulp-util'); var browserify = require('browserify'); var source = require("vinyl-source-stream"); gulp.task('browserify', function(){ return browserify('./js/main.js') .bundle() .on('error', function(err) { gutil.log(err); this.emit('end'); }) .pipe(source("app.js")) .pip
gulp.js を今一度キチンと！gulp.js 導入基礎
フロントエンドのお仕事として、HTMLやCSS、JavaScript のコーディング回りを行っていると、以前に比べてやらなければならないことが増えてきていました。そのため、細々した作業でも、自動化して効率よく開発をすすめないと、時間がかかってしまうことが多いです。 そんなときに活用できるのが、今回使い方を紹介する gulp です。 gulp.js このエントリーでは、gulp が使えるように、gulp とはどういうものなのかの簡単な説明から、導入の基礎部分までを書いておきます。コピペでしか使ったことがない！という人や、誰かのコピペに頼って使っていたような人も、今後の活用していくための参考に利用してもらえたら嬉しいです。 gulp とは？ gulp.js は Node.js 製の毎回行うような作業を自動化してくれるツールです。よく様々なサイトでタスクランナーとして紹介されていますが、正確には
gulp タスクをファイル分割する - アカベコマイリ
gulpfile.js の分割方法について。 gulp タスクが増えてくると gulpfile.js が長くなってメンテナンスしづらい。また、タスク間で共通したい設定があるとして、それを gulpfile.js 内で定義しはじめると更にファイルは伸びてゆく。この問題を解決するため、以下のプロジェクトを参考にタスクを個別ファイルとして定義してみる。 greypants/gulp-starter ディレクトリ構成 プロジェクトのディレクトリ構成は以下のようになる。 / ├ package.json ├ gulpfile.js ├ gulp/ │ ├ config.js │ ├ tasks/ │ │ └ gulp タスクごとのファイル │ └ util/ │ └ gulp タスクで利用する便利モジュール ├ bower_components │ └ アプリから利用する Bower モジュール ├
gulpfile.jsをES6で書いてみよう - tacamy--blog
なぜgulpfile.jsをES6で書くの？ ES6にとりあえず触れて慣れてみたいという場合に、まずはgulpfile.jsで試してみるとよさそうという風潮があるみたい。理由はたぶん次のような感じかなと思ってる。 他への影響が少ない コードの分量が少ない 実装にあまり頭を使わないで書ける 環境によってはbabel等のトランスパイラをインストールせずにES6がそのまま使える 環境を準備する gulpfile.jsでES6を使えるようにするには、gulp側で対応するか、Node.js側で対応するかどちらかになります。 gulp側でES6に対応する gulpはv3.9.0からbabelを標準サポートするようになったので、babelを介してES6構文を利用できるようになりました。 ただし、ES6構文を使う場合は、ファイル名をgulpfile.babel.jsにする必要があります gulpのバージョ
webpack + babel-loaderでES6デビューしつつ、gulpもES6で書く - Qiita
こんにちは！ギャザリーで開発を担当している手塚＠inureoです。 今回はタイトル通りwebpack + babel-loaderでES6デビューしつつ、gulpもES6で書く、というところをやってみたいと思います。 gulpfile.jsをES6で書こうと思った理由 「ES6やりたいなー、しかも業務に直結するところで。」と考えていた時に、こちらの記事のgulpfile.js をES6で書く理由を拝見して「たしかにgulpfileなら実装に頭使わないし慣れるのにはピッタリだ！」と思ったからです。 早速ES6でgulpfileを書いていく gulpfileをES6で書くには、gulp側でES6対応をするか、node.js側でES6対応をするかの2択になります。 gulp側での対応 gulpの3.9.0からbabelを標準サポートするようになりました。ファイル名をgulpfile.babel.
main-bower-files と gulp-inject と gulp-usemin を組み合わせる - Gulp で作る Web フロントエンド開発環境 #6 | PSYENCE:MEDIA
main-bower-files と gulp-inject と gulp-usemin を組み合わせる - Gulp で作る Web フロントエンド開発環境 #6 wakamsha 2015.06.29 92 19122635 フロントエンド開発環境を用意するのに npm を利用するのはわりと一般的になっているかと思います。Grunt しかり Gulp しかり。Browserify をはじめとした依存関係解決や結合・圧縮といった開発そのものを補助するライブラリの多くは npm から取得することが出来ます。 では、jQuery や AngularJS といった開発時だけでなくブラウザから読み込んで使うライブラリに関してはどのように用意してますか？それらの類の幾つかは npm 経由でも取得できますが、全てではありません。そういったものに関しては別の方法で取得する必要があります。人によって方法
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Gulp][SketchTool][Sketch 3]これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
gulp のエラー処理について - Qiita
イマドキのコーダー環境構築2016
gulpタスクの分割 - Qiita
gulp: The Good Parts
