イマドキのコーダー環境構築2016CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。Read less
なんちゃってフロントエンド開発者が、Bourbon, Neat, Bitters, Refills, Proteus – Gulp を触ってみた | unlimited text works, the 3rd.
はじめに 自分は Twitter Bootstrap にさほど疑問を感じていない…例えば、（クソ）マークアップ問題やデザインが同じ様になる 1 …その辺は後述…程度には、フロントエンド開発に疎い事だけは。 つまりは「お前は何を言ってんだ」だろうなぁこの投稿…中途半端な知識を振りかざしてる感満載じゃないかと。 さて。 何で知ったか覚えてないけど、 Refills を試してみたいと。 しかし前提条件として、 Bourbon と Neat が必要との事で、これらが意味する事は何となく分かるけど、これらを踏まえた上でどうやって使うのかがピンと来なかった。 日本語情報を漁っても、Bourbon、Neat、更には Bitters までは情報として得る事ができても、フロントエンド開発に疎い自分には、Refills本家サイトにコピペ用コードがあるとはいえ、具体的にどの様に手を動かしていけば良いのかがさ
gulp-sass から gulp-ruby-sass へ - Qiita
『これからはじめるGulp #9：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え』 こんな記事があったので、gulp-ruby-sass に変更してみる。 そして、gulp-ruby-sass 1.0.0 からタスク自体の書式が変更になったようだ。 旧書式で記述されている記事が多いので注意。 ⇒ gulp-ruby-sass 1.0.0 から記述方法が変わるらしい ⇒ Gulp TypeError: Arguments to path.join must be strings タスクの書式 gulp.src ⇒ sass に変更。 それに伴いオプションの設定書式も変更。 ↓ 旧書式 gulp.task('sass', function() { return gulp.src('scss/*.scss') .pipe(sass({ style: 'expanded' })
gulp でサクッとアイコンフォントをSVGで * prasm
シェフの気まぐれサラダ〜ジェノバ風ソースで〜 みたいなタイトルになったけども。 もういいかげんというか、Font Awesomeがあまりにも便利すぎてアイコンフォントはどれもこれもかぶりに被っている！みたいな状況がどうなん？ と思えるようになったので、gulp+SVGで自サイト用のアイコンフォントをさくっとやろうかと。 実装するには svgファイル css吐き出すときのテンプレート が別途必要かなと。 処理の流れとしては svgからフォント作成 svgのファイル名からメインのCSSに組み込むフォント用のCSSを吐きだし という流れで、1と２がちゃんと終わらないとSVGからフォントが出来ても使うのが難しいですね。 吐き出すCSSのテンプレートはfontawesome-style.cssを使わせてもらいました。 gulp fileは以下。 var iconfont = require('gul
Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境
Gulp とは Gulp は Web 制作に関するいろいろな作業を自動化するためのツールです。Sass のコンパイルや Gulp の使用には node.js や Sass などのインストールが必要なので、ちょっと古い記事ですが下記を参考に適当にインストールしてみてください。 browserify とは そんなに詳しくないのですが、browserify はざっくりと言えば js で requireを使えるようにするためのツールです。今までであれば複数の js ファイルが必要な場合、例えば、a.js と、a.js がないと動かないb.js を読み込む場合だと、HTML ファイルに下記のような記述が必要でした。 // index.html <script src=".js/a.js"></script> <script src=".js/b.js"></script> browserify を使
もうgulpで憔悴しない - 低依存gulpfileのレシピ - Qiita
【追記150805】さらに憔悴しないための有用な記事『アカベコマイリ | gulp なしの Web フロントエンド開発』が掲載されましたので、こちらもお勧めします。 こんにちは、@armorik83です。皆さん、Grunt / gulp使ってますか。おなじみなので、ここでは説明はしません。 この記事の要点 なぜGrunt / gulpは憔悴に至るのか、経緯と問題点 npm run-scriptの仕組みについて package.jsonにscriptを羅列することに対する是非 シンプルなgulpfileについての提言 経緯 さて、先日このような記事が界隈で広まっていました。 Grunt/Gulpで憔悴したおっさんの話 この記事については同意できるところと、そうでもないところと、両方有りました。ただ、Grunt / gulpを使っていて色々歯がゆさを感じている方は昨今増えているだろうと感じます
gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】 - yutaponのブログ
この記事はIwate Developers Advent Calendar 2014の6日目の記事です。 Iwate Developers Advent Calendar 2014 - Qiita 記事の内容はというと、岩手にまったく関係ありません。 学生の頃はフロントエンドを軽視してクソコードを量産していたので、今の学生の方にこんな風に作り始めるといいよって紹介する感じで書きたいと思います。 はじめに 昨今のフロントエンド開発はとにかく複雑になってきていて、学習コストが半端なくなってきてます。 angularとかbackbone.jsとか、最近ではreact+fluxなど、トレンドの移り変わりが激しいです。 またGruntやgulp.jsなどのタスクランナーの活用がフロントエンドでは欠かせなくなっていて、使ってないなら今すぐ導入すべき、とも言えます。 最近gulp.jsを使っていて、gu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
