[B! gulp] poyoのブックマーク

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 では動作しな

poyo 2017/05/27

css
gulp

リンク

タスクランナーgulp.js最速入門 - id:anatooのブログ

相変わらず仕事ではデザインやりつつJavaScript書いている。タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu

poyo 2016/01/04

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

poyo 2016/01/04

リンク

Browserify + gulp-uglify で JS ファイルを連結 & minify - Gulp で作る Web フロントエンド開発環境 #3 | PSYENCE:MEDIA

Browserify + gulp-uglify で JS ファイルを連結 & minify - Gulp で作る Web フロントエンド開発環境 #3 wakamsha 2015.04.20 68 692231 Ruby on Railsや Middleman における開発では、 sprockets によって複数ある JS ファイルを一つに連結して依存関係を解決するのが一般的かと思います。今回は Gulp での開発環境を作るということで、それ以外の方法で依存関係を解決することになります。そんな訳で、Gulp で依存関係を実現するモジュールである Browserify を試してみるとします。 Browserify サンプルコードはこちらからどうぞ。 wakamsha/try_gulp そもそも依存関係って何？ Browserify とはJSファイル間の依存関係を管理することが出来るライブラ