CSS Sprite を自動生成する - Gulp で作る Web フロントエンド開発環境 #8 | Recruit Tech Blog
Sass ( SCSS ) や Stylus といった CSS プリプロセッサを使う上で更に効率を高めるために Compass や Bourbon といった Sass ( SCSS ) のフレームワークを導入している方もたくさんいるかと思います。僕自身も SCSS を習得するとほぼ同時に Compass を愛用するようになりました。CSS のミニファイ化やベンダープレフィックス対応してくれる Mixin などとても多機能なのが魅力ですが、一方で動作が重くコンパイルに結構な時間が掛かる、Web ブラウザの CSS サポートが進むにつれて生成される CSS が冗長なものになりつつあるというのが気になるようになってきました。公式ブログを見る限り2014年8月に Ver.1.01 をリリースして以来メンテナンスされている様子もないことから1)Mac OS X - El Capitan では動作しな
[意訳]私がGulpとGruntを手放した理由 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? このポストは、Why I Left Gulp and Grunt for npm Scriptsを筆者の許諾を得て意訳したものです。間違いがありましたら、ご指摘いただけると幸いです。 （以下、訳） 私はGulpとGruntが不要な抽象化レイヤーだと気づきました。npmのscriptsはとても強力で、そっちの方が便利だったりします。 例を挙げましょう 私はかつてはGulpが大好きでした。しかし結局のところ、100行ものgulpfileと大量のgulpプラグインを扱うハメになりました。Gulp上でWebpackやBrowsersync、Mo
![[意訳]私がGulpとGruntを手放した理由 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/0621c3c9d0b907a9995f242e813815fc82f9b5f2/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU2JTg0JThGJUU4JUE4JUIzJTVEJUU3JUE3JTgxJUUzJTgxJThDR3VscCVFMyU4MSVBOEdydW50JUUzJTgyJTkyJUU2JTg5JThCJUU2JTk0JUJFJUUzJTgxJTk3JUUzJTgxJTlGJUU3JTkwJTg2JUU3JTk0JUIxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0wOWExMDJhNzUzNjYwYTQ1ZGRkN2MwYTBlMDAzNzBlZg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0ZW5rZWkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWU0ZDBkYTlmMDFjMGU5NTYwNGZlNTcxYTVjMDEyOWI3%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dc16c188bed223bc3c3cb38615a4aa3c0)
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
gulp でディレクトリ構造を維持したコピー - アカベコマイリ
失敗談 & そこから得られた知見の記録。いままで gulp で複数ディレクトリの構造を維持してコピーするとき以下のようにしていた。 var gulp = require( 'gulp' ); gulp.task( 'copy', function() { gulp.src( 'src/*.html' ).pipe( gulp.dest( 'dest' ) ); gulp.src( 'src/css/**' ).pipe( gulp.dest( 'dest/css' ) ); gulp.src( 'src/js/*.js' ).pipe( gulp.dest( 'dest/js' ) ); } ); この処理だと gulp.dest が冗長なうえ同期実行のためにコールバック関数を呼び出す場合も個別に end/error イベントをハンドリングする必要があり面倒だ。それにもかかわらずこうしてい
» gulp-autoprefixerよりもいい感じ。gulp-pleeeaseを使ってcssを処理しよう | isee ウェブに関するブログ
gulp-autoprefixerよりも高機能なgulp-pleeeaseの紹介。いろいろやってくれるとても良いやつ。gulp-autoprefixerはもう古いかも? css3を使ってスタイルを記述する際にベンダープレフィックスを自動で付けてくれるgulp-autoprefixer。とても便利ですよね。 しかし、gulp-autoprefixerよりも高機能でいい感じなのが、pleeeaseです。pleeeaseはベンダープレフィックスを付けてくれるだけでなく、cssのminifier(圧縮)、mqpacker(メディアクエリをまとめる)、remのpx変換などをいっぺんに処理してくれます。 gulpで簡単に使うことができるので、早速導入してみましょう。 gulpって??という方→GulpでSassのコンパイルとlivereloadをやってみる gulp-pleeeaseのインストール
vendor prefix, minify, 開発/本番用ビルドの切り替え... CSSのあれこれをGulpにさせてみた - Qiita
普段業務ではタスクランナーにGruntを使っているのですが、別件で簡単なアプリケーションを作ることになりました。 小さいプロジェクトにはGruntよりGulpがいいんじゃない？とか 今流行ってるし一回使ってみるかとか そういう気分で試してみたので、メモを兼ねて紹介します。 GruntとGulpの違い Grunt：「設定ファイル」に近い 箇条書きのようにつらつらと設定を書いていくため、タスクの流れを読みづらく、膨大になりやすいという欠点がある。（もちろんとても便利ですが） （今のプロジェクトではcoffeeで書いてるのに700行くらいあって泣いてる） Gulp：処理を「プロセス」として記述 あれをこうしてここに入れる、と処理が一連のプロセスになるので、読みやすい。 あとなんか速いらしい。（曖昧） 大体このくらいの認識です。 バージョンとか node: v0.10.29 下記をpackage.
Introduction to Gulp.js 14: Deploying the Website with Rsync · Web UI Engineer from Hamburg, Germany
Google Web Starter Kitのgulpfileを翻訳してみた - Qiita
Google Web Starter Kit GitHub - google/web-starter-kit javascriptを覚えるために静的開発環境を整えようとして、タスクランナーフレームワークgulpを導入。 ついでにcssフレームワークは話題のGoogle Web Starter Kitを使ってみる。 Google Web Starter Kitの純正gulpfileを読んで注釈をつけてみたので、投稿。 use scrict // Include Gulp & Tools We'll Use var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var del = require('del'); var runSequence = require('run-sequence'); var brow
Gulp + Browserify | Viget
Getting Started One weekend, I decided to really immerse myself in Grunt and RequireJS. Gotta stay up on these things right? Done. Then Monday rolls around, "and just like that Grunt and RequireJS are out, it’s all about Gulp and Browserify now." (╯°□°）╯︵ ┻━┻ When I was done flipping tables, I set aside my newly acquired Grunt + RequireJS skills, and started over again with Gulp and Browserify to
これからはじめるGulp #9：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え | DevelopersIO
はじめに 前回のこれからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除でタスクの同期とディレクトリ・ファイルの削除について勉強しました。今回はgulp-sassからRuby版のSassが使えるgulp-ruby-sassに乗り換えてみます。 gulp-sassとgulp-ruby-sassの違い gulp-sassはnode-sassのwrapperでruby版のSassがなくても動作しコンパイルも早いようです。ただし、.sassだとコンパイルに問題もあるとか（回避策はある）。gulp-ruby-sassはRuby版のSassを使うのでコンパイルがやや遅いという点はありますが安心して利用できます。言うまでのことでもありませんがRuby版のSassを使うためこれからはじめるGulp（1）：bundler, rbenv, nodebrewでGu
gulp-ruby-sass 1.0.0 から記述方法が変わるらしい | BUN:Log
先日、gulp-ruby-sass 1.0.0-alpha にアップデートしたところ、Sass のコンパイルがエラーでコケるようになりました。 半年前に書いたgulp-ruby-sass 0.6 にアップデートしたらコケた話のように、オプションの指定方法が変わったのかな？と思いつつ公式リポジトリを確認したところ、タスク自体の書式が変わるようです。 sindresorhus/gulp-ruby-sass at rw/1.0： https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0 今後 1.0 未満のバージョンはサポートされないようですので、覚えておくとよさそうです。 やったことまず、gulp-ruby-sass 1.0.0-alpha にアップデートします。 $ npm update gulp-ruby-sass自分の場合、個別
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
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.js！MacでCSSファイル、JavaScriptの圧縮を行おう
@おったんです。「gulp.js」はタスクランナーと呼ばれるプログラムで、その他に著名なものとして「Grunt」があります。どちらも聞いたことがあるけれど、難しそうでなかなか手がつけられない…そう思ってはいませんか？「gulp.js」はとっても簡単なんです！今からでも始めましょう。 Homebrewのインストール 「gulp.js」で使用するパッケージ（プラグイン）の管理は、すべて「Node.js」で行います。「Node.js」はHomebrewを使用してインストールできます。まずは、Homebrewをインストールしましょう。 Homebrewのインストール方法は、Homebrew — The missing package manager for macOS に記載されているインストール方法に従うだけです。記事執筆時点のインストール方法は、以下のコマンドを実行するだけです。また、Home
gulpで依存関係を考慮した自動コンパイル - Hatena Developer Blog
こんにちは、シニアアプリケーションエンジニアのid:taraoです。はてなエンジニアアドベントカレンダー2014の21日目として、依存先のファイルが更新されたらコンパイルしなおす処理をgulpで実現する方法について、とくにLessを例にとって紹介します。 はてなでは、JavaScriptやCSSなどの静的ファイルをTypeScriptやLessなどからコンパイルして生成することが増えています。CSS(Less)は主にデザイナが書くため、コンパイル手順はできる限り簡単にする必要があります。多くのチームでは、サーバアプリケーションをローカル環境で実行している最中はファイルの変更に応じて自動的にコンパイルしなおすようになっています。 ファイルの更新監視からコンパイルまでの処理にはGruntなどを使ってきましたが、コンパイル対象のファイルに依存関係がある場合、依存先のファイルの変更に応じて依存元の
2015年はgulpで決まり！開発環境をgruntから乗り換えよう！（コーダー編） | SONICMOOV LAB
もーいーくつねーるーと～、おーしょーうーがーつー♪ という所で、今年も残り 10 営業日を切りましたね・・・・！早いですね！ 皆さまいかがお過ごしでしょうか♪ 世間はクリスマスなムード一色ですが、皆さまお忘れになってはいないでしょうか。 大掃除という名の一大行事を！！終えない限りはクリスマスを迎えられませんよね（鬱 今週こそはきっと・・・ほほほ。。 自分を追い込んでみたところで、本題に入りたいと思います！ こちらは、ソニックムーブ Advent Calendar 2014 12日目の記事になります！ 目次 なぜ gulp なのか 目標 ディレクトリ構成 基本設定 タスク設定 トラブルシューティング 参考URL なぜ gulp なのか 当記事は grunt から gulp に乗り換えを考えているユーザーを対象としているので、Node.js のインストール方法の説明を省かせていただきます・・・
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DATA HK, SGP, SDY 2024 Togelmbah - Berita terbaru tentang hasil togel HK 2024 dan SGP Sidney dari Togelmbah. Dapatkan prediksi akurat dalam dunia togel
http://blog.e-riverstyle.com/2014/02/gulpspritesmithcss-spritegulp.html
IDEA * IDEA
gulpのプロジェクトをつくりました - FICC Workbook