GulpでSVGスプライトを自動生成する | UNORTHODOX WORKBOOK | Blog
前回のエントリーでSVGスプライトを非同期で読み込む方法を紹介しましたが、今回はSVGスプライトをGulpで自動生成する方法を紹介します。 ここで生成するSVGスプライトは、HTMLにuseタグを使ってインラインで表示させるもので、CSSのbackgroundでは表示させることができませんのでご了承ください。 なお、インライン用のSVGスプライトの場合、（色情報等を削除するため）目視で確認することが難しくなってしまうので、SVGスプライトの生成と同時に一覧表示させるためのHTMLも自動で生成できるようにしています。 Githubリポジトリにすべてのコードをあげていますので、以下のリンクからダウンロードすることができます（構成やディレクトリ等、ここで記載しているものとは若干異なります）。 https://github.com/42EG4M1/svg-sprite-generator gulp
gulpを使ってlessをscssに変換してみた | js | Horic Design
今回はgulpというストリーミングビルドシステムを使ってlessをscssに変換してみました。どうせそういったプラグインがあるんだろうなと思って、ググっても見つからなかったので、下のページを参考にして自分で変換するコードを書いてみました。 Anyone know of a good way to convert from LESS to Sass? It definitely looks like LESS has all the momentum at the moment, but we're seeing some annoying issues with LESS's in-browser compiler (which we like using during development b... そのためにgulp-replaceというプラグインを使って、正規表現を駆使してless
スタイルガイドジェネレータのsc5-styleguideがいい感じそうだったので試してみた - Qiita
var gulp = require('gulp'); var styleguide = require('sc5-styleguide'); var sass = require('gulp-sass'); var outputPath = 'output'; gulp.task('styleguide:generate', function() { return gulp.src('test/**/*.scss') .pipe(styleguide.generate({ title: 'My Styleguide', server: true, rootPath: outputPath, overviewPath: 'test/overview.md' })) .pipe(gulp.dest(outputPath)); }); gulp.task('styleguide:applyst
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
gulp、SassでBootstrapをセットアップしたときのメモ - Qiita
レスポンシブなデザインのサイトがすぐ作れちゃうと噂のBootstrapをなんとなくいじってみよう、思ったのですが、ふつうに公式のチュートリアル通りにやるとLESSとGruntを使うことを強いられてしまうので、 ・Sassがいいな ・ついでにGruntの代わりにgulpを使ってみたいな と思っていたらこんなどんぴしゃな記事を見つけました。ないすでーす。 http://ericlbarnes.com/setting-gulp-bower-bootstrap-sass-fontawesome/ 基本これ通りにやればおkだったのですが、gulp-ruby-sassを実行するところでちょっと詰まったので以下はそのメモ。 Error: Missing the Sass executable… のエラー gulp-ruby-sassを使うのにsassをインストールする必要があったので以下を実行。 sud
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
gulp.spritesmith
var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); gulp.task('sprite', function () { var spriteData = gulp.src('images/*.png').pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })); return spriteData.pipe(gulp.dest('path/to/output/')); }); var gulp = require('gulp'); var buffer = require('vinyl-buffer'); var csso = require('gulp-csso'); var imagemin = require(
gulp.spritesmithを便利にカスタマイズ
gulp.spritesmithを便利にカスタマイズ 「gulp.spritesmith」はCSSスプライトを生成するためのgulpプラグインです。 spritesmithの利用方法は『CSSスプライトを生成する「grunt-spritesmith」』を参照していいただくとしてgulpで行なったカスタマイズを紹介します。 gulpの使い方は「タスクランナーgulp入門」を参照してください。 gulp.spritesmithでちょっと面倒くさいなと感じていたのは1タスクで書き出されるスプライト画像のスプライト用のCSSが１つだということ。たとえば下記のように指定をすると「sprite」というディレクトリにスプライト用の画像を突っ込んでおくとsprite.pngとsprite.scsssというファイルが出力されます。 var spriteData = gulp.src('sprite/*.pn
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
svg-spriteで無駄の無いSVGスプライトを生成する - DeNA Design
gulp-svg-sprites
http://blog.e-riverstyle.com/2014/02/gulpspritesmithcss-spritegulp.html