各項目を選択・入力するだけでgulpで使用するソースを出力してくれるジェネレータ「gulp generator」 - NxWorld
「gulp generator」はgulpで使用するgulpfile.jsとpackage.jsonに記述するソースを出力してくれるジェネレータで、用意されている各項目を選択したりファイルの読み込み・出力箇所を入力していくだけで簡単に必要なソースを出力してくれます。 サイトにアクセスすると上のイメージのような見栄えになっており、ページ左側で実行したいタスクを選択したりファイルの読み込み・出力箇所を入力して、その結果としてページ右側にgulpfile.jsとpackage.jsonに記述するためのソースが出力されるようになっています。 タスクの選択部分は大きく分けて「css」「js」「html」「その他」の4つに分類されており、上のイメージ（イメージは「css」を選択時）のようにそれぞれファイルのパス指定をする部分と各タスクを選択する項目が用意されています。 よく利用されると思うようなものは
gulp：とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル - NxWorld
主にこれからgulpを使い始めよう（使い始めた）という人向けに、とりあえず覚えておきたいよく利用するタスクの基本的な記述例やプラグイン・モジュールを使った使用例をいくつかまとめてみました。 実際に使用する時はここで紹介しているような簡易的なものでなく、もっと複雑なタスクだったり様々なプラグイン・モジュールを組み合わせたりすることがほとんどですが、ファイルの移動や削除をはじめ、リネーム・結合・圧縮・監視など基本となるような処理の記述方法や動きを知りたい人は参考にしてみてください。 gulpの基本的な使用方法（環境準備やインストールなど）については割愛しています。 また、以下はいずれもgulpfile.jsに記載した例になり、ファイル指定のディレクトリは/src、出力先のディレクトリは/publicという想定になります。 ここで紹介している内容は、gulp Ver 3.9.1を使用した場合にな
ぼく（たち）のかんがえた最新のJS開発環境 #scripty04
ぼく（たち）のかんがえた最新のJS開発環境 光野達朗, ヤフー株式会社 2015.12.15 SCRIPTY#04 http://scripty.connpass.com/event/22663/Read less
gulp v4.0を眺めてみた
gulpfileをES6に置き換える必要があり、何気にgulpの情報追っていると、 そろそろv4.0がリリースされそうなのでざっくりと眺めてみた。 gulpfileをES6で書くまず、本来の目的だったこの件、v3.9ですでに対応されていた。 以下の条件であれば利用可能のようだった。 gulp v3.9以上 gulpfile.jsをgulpfile.babel.jsとする babel-core をインストールすること 内部的にはbabelで変換しているようだ。 続いて、v4.0のCAHNGELOGも眺めてみた。 gulp4.0をインストール cliの変更点--tasks-json と --verify オプションが追加されてる。 –task-json はタスクをjson形式で出力する。 –verify はpluginsがpackage.jsonを参照しているかチェックする。 APIの変更点大
gulp ありの Web フロントエンド開発 - アカベコマイリ
gulp なしの Web フロントエンド開発 の追補編として gulp を利用するケースもまとめておく。元記事と同じプロジェクトと機能を gulp で実装した。記事の構成は「gulp なしの〜」を踏襲。各項の説明は package.json の scripts に代わって gulp タスクとしている。 設計方針 はじめに設計方針を決めておく。 AltJS から JavaScript へのコンパイルに対応する AltCSS から CSS へのコンパイルに対応する ファイル監視による AltJS/AltCSS の自動コンパイルに対応する ユニット テストに対応する コードド キュメント生成に対応する Windows 環境を考慮する 単体 gulpfile.js のみで実装する 方針 1 〜 6 までは「gulp なしの〜」と一緒。方針 7 は環境に関する設定を package.json と g
gulp なしの Web フロントエンド開発 - アカベコマイリ
Web フロントエンド開発において gulp は非常に便利だ。しかしあまりにも gulp に依存しすぎており、これなしで開発できるだろうか？という不安もある。というわけで gulp を利用せず package.json と npm だけで同等の機能を実現する方法を検討してみた。 2015/11/4 追記 babelify v7.2 を試すで babelyfy 7.2 ( とその中の Babel 6.x ) について調べ、npm-scripts の変更が必要なことを確認したので追記。また Windows 環境の動作検証をおこなったところ、最新の watchify なら -o オプションが通ることを確認できた。よって本記事の最後の課題が解決したことになる。 2015/9/23 追記 cpx と rimraf を試すの内容をファイル処理に反映して簡略化。 2015/9/15 修正 Stylus
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 #11：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync | DevelopersIO
はじめに 前回のこれからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換えるでgulp-webserverへの乗り換えを試しました。今回はブラウザ間のスクロールやクリックも同期できるBrowserSyncを試してみます。 Browser-Syncについて BrowserSyncはレシポンシブなWebサイトを開発する際、表示や動作に関するテストを効率化できるツールです。複数のデバイス・ブラウザ間でリロード、スクロール、クリックなどを同期することができます。BrowserSyncはGrunt/Gulpまたはコマンドラインから使うことができます。 BrowserSyncのインストール 最早説明するまでもないですがBrowserSyncをインストールします。なにやらエラー> (node-gyp rebuild 2> buil
これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化 | 何者にもなれないWebデベロッパーのメモ - whiskers
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSyncでBrowserSyncを試しました。今回から画像最適化に関するプラグインを色々と試してみたいと思います。今回は画像を軽量化するためにgulp-imageminプラグインを試してみます。 gulp-imageminプラグインとは gulp-imageminはGIF,JPEG,PNG,SVGをロスレスで軽量化できるプラグインです。Gruntを使っていた方はgrunt-contrib-imageminが思い浮かぶと思いますがほぼ同等の機能を持ったプラグインです。 gulp-imageminにバンドルされているエンコード・デコードライブラリ gulp-imageminには以下のエンコード・デコード
これからはじめるGulp #13：gulp-changedプラグインで変更されたファイルだけを処理させる | DevelopersIO
はじめに 前回のこれからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化でgulp-imageminプラグインを試しました。今回は前回のimageminタスクに更新されたファイルのみ処理できるようgulp-changedプラグインを使って改良してみます。 gulp-changedプラグインについて gulp-changedプラグインはsrcとdestをチェックして変更されたファイルだけをStreamに流します。gulp-changedプラグイン以外にもgulp-cached, gulp-remember, gulp-newerなどのプラグインがありそれぞれの特徴に合わせて活用することで無駄な処理を減らし待機時間を減らすことができます。 gulp-changedをインストールする $ sudo npm install gulp-c
これからはじめるGulp #7：require-dirモジュールを使ったタスク単位のファイル分割 | DevelopersIO
はじめに 前回のこれからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知でgulp-plumberとgulp-notifyを使ったエラー等のデスクトップ通知を試しました。今回はタスクに含まれるパスを整理しつつrequire-dirモジュールを使ったタスク単位のファイル分割を試します。 パスの整理 まずはパスの指定を整理しておきます。必須ではありませんが、何かと便利なPathモジュールも読み込んでおきます。Pathモジュールはファイルパスを扱うユーティリティが用意されており、パスの正規化やパスの中からディレクトリ部分・ファイル名の部分だけ取得するといったメソッドが用意されている便利なモジュールです。 Pathモジュールを読み込む Pathモジュールはnode.jsのCoreモジュールなのでインストール不要です。require()で読み込むだけで
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gulp: The Good Parts