gulpその0001 gulp.watchでディレクトリ監視をしながら、そのevent.typeとevent.pathを取得して、watchの第二引数に指定して同期的に実行しているタスクの中でeventを使用する - Motomichi Works Blog
参考にさせて頂いたページ gulp.watchによる監視と、.on()によるevent取得、イベントリスナーの利用など。 これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する | Webデザイン、フロントエンド系の技術に関する備忘録 - whiskers gulp 3.5でgulp.runがdeprecatedになったそうです gulp 3.5でgulp.runがdeprecatedになりました | Web Scratch 同期的にタスクを実行する方法(指定した順番に処理完了を待ってから次のタスクを実行する方法) JavaScript - gulpのタスクを同期的に実行する方法 - Qiita 簡単に同期・非同期でタスクを実行するためのプラグイン gulp-run-sequence CoffeeScript - Gulp でタスクを並列/直列処理する
gulpの基本的な使い方（gulp.jsの基礎をしっかり理解する） | mae's blog
ここのところのgulpの勢いに負けて、自分もついにGruntからgulpに移行しました。gulpはGruntと同様フロントエンド開発用のタスクランナーです。最初はGruntとそれほど変わらないだろうと思っていましたが、タスクを書いてみるとその違いがすぐにわかりました。シンプルに書けるだけでもgulpはかなり良いです。今回、自分の理解を深めるついでに基本的なタスクの書き方をまとめてみました。 gulpの特徴まずgulpの特徴を簡単に書いていきます。 ストリーム: gulpは、「the streaming build system」と言われているようにNode.jsのストリーム（ファイルのパスとファイルの中身の情報を持ったオブジェクト）を使って処理を行っていきます。そのため中間ファイルを生成することなくタスクが実行されていくため高速に処理がなされます。並列処理: さらにgulpは、処理が一つ一
[フロントエンド] Gulpの並列実行挙動ではなく、タスクを順次実行する - YoheiM .NET
こんにちは、@yoheiMuneです。 今日はGulpにおいて複数のタスクを指定した場合に、デフォルトの並行実行ではなく順次実行する方法をブログに書きたいと思います。 目次 Gulpでタスクをあえて順実行したい場合がある Gulpの実行が高速な理由の一つに、「複数のタスクを並列的に実行する」挙動がありますが、これをあえて無効化して行いたい場合があります。最近だと以下のように、 // gulpfile.js // 01. BrowserifyでJavaScriptファイルを1つに結合して、 // 02. 他にも必要なJavaScriptファイルをコピーして、 // 03. そして本番リリースするJSすべてにおいて、ホスト名を「localhost→本番用ホスト名」に変換する gulp.task('production', ['browserify', 'copyClientJs', 'repl
![[フロントエンド] Gulpの並列実行挙動ではなく、タスクを順次実行する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa86fe1f21c960376c918a36b29f43eb766ba639/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F399.jpg)
Gulp for Beginners | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Gulp is a tool that helps you out with several tasks when it comes to web development. It’s often used to do front end tasks like: Spinning up a web server Reloading the browser automatically whenever a file is saved Using preprocessors like Sass or LESS Optimizing assets li
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
minimatch（node.js で path match するライブラリ）のチートシートを作った - 詩と創作・思索のひろば
minimatch っていうのは Grunt や gulp.js その他あちこちで（npm もらしい）使われてるグロブマッチライブラリです。最近よく gulp を使ってるんだけど、毎回 gulp.src() の書き方で迷ってしまう。調べた結果 minimatch に行き当たったんだけど各種 glob 実装のドキュメント読んで把握しろ、という感じでよく分からなかったので早見表を作った次第です。 https://github.com/motemen/minimatch-cheat-sheet 確認用にテストを書いていて、そのテストケースからドキュメントを生成してるので間違いはないはずです。説明が間違ってる、この例も乗せた方が見やすいだろ、とかあればプルリクください。 折角なので日本語版を書いておきますね。 基本 * はパスセパレータを含まない任意の文字列にマッチ ** はパスセパレータを含む任
gulpを使ってsassの@importを解決しつつ差分ビルドをする - Qiita
小さいアプリケーションなら、styleは変更がある度に毎回フルビルドしてしまっても1sもかからないかもしれない。 しかし大きくなって、5s以上かかると非常に苦痛だ。 というわけで差分ビルドしたい。 Sassの差分ビルドで問題になること 差分ビルド自体は簡単で、gulp-cachedとかを使えば、前回と差分があるものだけをビルドできる。 なんだけど、その場合に問題になるのがsassの依存関係(@import)の解決だ。 単純に差分のあったファイルをビルドするだけだと、@import元を辿れない。 そうすると@import元のファイルが変更についてこない。 いや、でもnode-sassのwatchオプションって@import元辿ってるよな、あれってどうなってるんだ？？ と思って実装を見てみたら、sass-graphというnpmを使って辿っていた。 お、これ使えば差分ビルド時に依存関係の解決もで
gulp-combine-media-queriesがこける
sassのコンパイル時にどうにもgulp-combine-media-queriesがエラーを起こしてしまって、けっこうハマってしまった。 環境 node: v4.2.2 npm: 2.14.7 gulp: CLI version 3.9.0 gulp: Local version 3.9.0 gulp-combine-media-queries: 3.1.0 エラー内容 内容は以下のような感じ。 buffer.js:167 throw new TypeError('must start with number, buffer, array or string'); ^ TypeError: must start with number, buffer, array or string at fromObject (buffer.js:167:9) at new Buffer (buffe
gulpのpipeで独自のファンクションを実行する
gulpのpipeの中で独自に定義したファンクションを実行し、srcで指定した各ファイルの内容を変更したい場合、through2というモジュールを使用すれば実現できます。 highlight.jsをローカルで実行してハイライトされたファイルを出力で紹介したような処理を、pipeの処理の中に組み込むための実装例を紹介します。 through2through2を使用すれば、pipeの処理の中で、独自のファンクションを組み込むすることができます。 var through = require('through2'); var path = require('path'); gulp.task('highlight', function(){ return gulp.src('対象のファイル') .pipe(through.obj(function (file, enc, cb) { //このファン
gulpでよく使うパッケージのメモ - Qiita
gulpで使うプラグインは毎回大体同じなので、よく使うもののメモを残しておく。カテゴリ分けはだいぶ適当。サンプルでは断りなくgulp-load-pluginsを使っているので$.ではじまるものはgulp-のパッケージを読み込んだものになっています。 基本的にgulpのプラグインを作ったりしたことがあるわけではないので、vinylの説明なんかはちょっと怪しいかもしれない。 ファイル path: パスの取得など slash: Windowsのパスの\を/に変換する path-exists: パスの存在チェック require-dir del gulp-rename gulp-concat: ファイルの結合 gulp-useref: HTMLで指定されたファイルを結合 require-dir ディレクトリ内のファイルを読み込むヘルパー。何に使うのかというとgulpfile.jsを分割して管理され
Gulp node.js 実行時に変数を渡して処理を分岐させたい - かもメモ
以前 Gulpでタスクを指定して実行することで無理やり処理を分岐させる方法を書いていました。 今回同じような需要が合って調べているとgulp実行時コマンドに直接キーと引数を渡せる素晴らしい方法があったのでメモ。 minimistを使ってコマンドラインから変数を渡す minimistというコマンドラインの引数をパースできるモジュールがあるようです。 var parseArgs = require('minimist') var argv = parseArgs(args, opts={}) EX: コマンドラインの引数 // example.js const options = require('minimist')(process.argv.slice(2)); console.log(options); 例えば上記のようなjsがあり、コンソールから次のようにコマンドを実行してみます。 $
gulp：特定のディレクトリやファイルを対象から除外する方法 - NxWorld
gulpを使っていると基本的には指定した全てのファイルで処理を実行してほしいけれど、一部ファイルに関しては実行してほしくないというときがあります。 そんなときに使える特定のディレクトリやファイルを対象から除外する方法で、簡易的なものであれば特にプラグイン等も必要なく実装できます。 !（エクスクラメーションマーク）を使う 結論から書くと、除外したいディレクトリやファイルのパス指定前に**!（エクスクラメーションマーク）**を記述すれば除外指定することができます。 何らかの理由でこのファイルはLintさせないとか開発時にしか使用しないディレクトリ・ファイルを公開用にgulp.dest()するのに含めないとかいろいろ使う場面はありますが、そのような時にgulp.src()などで指定するパス前に!を記述すれば特定のディレクトリ・ファイルを除外指定できます。 実際の使用例 「!（エクスクラメーション
gulpは、destの後にもアクションを繋げられる - Qiita
gulpのAPIマニュアルにも書かれていますが、gulpでは、gulp.destを書いたからと言って、そこで終わりにする必要はありません。 注: 下記、CoffeeScriptで書いてますが、gulpの標準はJavaScriptです。適宜読み替えてください。 例: 複数ディレクトリに出力する 例えば、こんな風に書けば、3つのディレクトリにテキストファイルをコピーできます。 gulp = require 'gulp' gulp.task 'multi-dist', -> gulp.src ['./src/*.txt'] .pipe gulp.dest './dist1/' # 1つ目のdest .pipe gulp.dest './dist2/' # 2つ目のdest .pipe gulp.dest './dist3/' # 3つ目のdest gulp = require 'gulp' co
[performance][Gulp]これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
これからはじめる Gulp シリーズこれからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化でNode.js向け画像処理ライブラリを使ったレスポンシブイメージ作成の自動化を行いました。今回はより手軽に使えるgulp-image-resizeプラグインを使いサムネイル画像を作ってみたいと思います。 gulp-image-resizeについて gulp-image-resizeは画像のリサイズや切り抜きができるプラグインです。gulp-image-resizeを使うにはImageMagickかGraphicsMagi
![[performance][Gulp]これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
gulpパッケージの一括ロード - Qiita
gulpで定形処理をタスク化していくと、スクリプトファイルには大量のrequireが並ぶことになります. これを解消するのがgulp-load-plugins. 公式サイト package.jsonに書かれたgulp-xxxパッケージを、一括ロードすることができます. 別記事のgulpタスクの分割と併用すれば、グッとスクリプトファイルの見通しが良くなります. 記事を書くにあたり、動作するスクリプトファイルを編集して紹介しています. 万が一動作しない場合は、こちらのソースコードを参照してください. インストール var gulp = require('gulp'); var gulp_if = require('gulp-if'); var gulp_uglify = require('gulp-uglify'); var gulp_minify_css = require('gulp-mi
gulp-autoprefixerを使ってCSSのベンダープレフィックス付与を自動化する - $shibayu36->blog;
今回はgulp-autoprefixerを使ってCSSのベンダープレフィックス付与を自動化する話です。サンプルは https://github.com/shibayu36/javascript-playground/tree/master/try-autoprefixer においてあります。 解決したい課題 サポート状況を見ながらちまちまCSSのベンダープレフィックスを付けるのは面倒 面倒なだけならいいが、つけ忘れによるバグも発生する可能性がある こういう課題は自動化で解決したい。 解決策 autoprefixerというツールを使えばベンダープレフィックスを自動で付けたCSSを作成できる gulpとautoprefixerを連携させるにはgulp-autoprefixerを使う これらを利用して、自分がサポートしたいブラウザを指定し、必要なベンダープレフィックスを自動で付けるようにする g
gulp：とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル - NxWorld
主にこれからgulpを使い始めよう（使い始めた）という人向けに、とりあえず覚えておきたいよく利用するタスクの基本的な記述例やプラグイン・モジュールを使った使用例をいくつかまとめてみました。 実際に使用する時はここで紹介しているような簡易的なものでなく、もっと複雑なタスクだったり様々なプラグイン・モジュールを組み合わせたりすることがほとんどですが、ファイルの移動や削除をはじめ、リネーム・結合・圧縮・監視など基本となるような処理の記述方法や動きを知りたい人は参考にしてみてください。 gulpの基本的な使用方法（環境準備やインストールなど）については割愛しています。 また、以下はいずれもgulpfile.jsに記載した例になり、ファイル指定のディレクトリは/src、出力先のディレクトリは/publicという想定になります。 ここで紹介している内容は、gulp Ver 3.9.1を使用した場合にな
gulp.js を今一度キチンと！gulp.js 導入基礎
フロントエンドのお仕事として、HTMLやCSS、JavaScript のコーディング回りを行っていると、以前に比べてやらなければならないことが増えてきていました。そのため、細々した作業でも、自動化して効率よく開発をすすめないと、時間がかかってしまうことが多いです。 そんなときに活用できるのが、今回使い方を紹介する gulp です。 gulp.js このエントリーでは、gulp が使えるように、gulp とはどういうものなのかの簡単な説明から、導入の基礎部分までを書いておきます。コピペでしか使ったことがない！という人や、誰かのコピペに頼って使っていたような人も、今後の活用していくための参考に利用してもらえたら嬉しいです。 gulp とは？ gulp.js は Node.js 製の毎回行うような作業を自動化してくれるツールです。よく様々なサイトでタスクランナーとして紹介されていますが、正確には
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gulpタスクの分割 - Qiita
GitHub - HAKASHUN/gulp-watermark: Apply watermark to images