gulpのタスクは基本的に非同期で実行されます。例えば以下のコードでは、ファイルコピーが完了する前に "done" と表示される可能性があります。 gulp.task('copy', function() { // ファイルをコピー gulp.src('src/file').pipe(gulp.dest('dest')); }); // copyに依存するタスク gulp.task('done', ['copy'], function() { // ファイルコピー完了「前」に実行される！！ console.log("copy done"); }); gulpが高速に動作する理由の一つはこの非同期性ですが、どうしても同期的に処理したい場合（すなわち特定のタスクの完了を待ってから別なタスクを実行したい場合）もあると思います。 この記事では同期的にタスクを実行する方法として、gulp API d
gulpプラグインでは、エラー時の処理として emit('error') した後に callback() を実行しているものをよく見かける（例えばこれとか）。 このような場合、プラグイン呼び出し側で発生するイベントは'error'イベントなのか'end'イベントなのか、理解が曖昧だったので調査してみる。 調査の概要 'error'イベントおよび'end'イベントの発生条件を調べる。組み合わせる条件は以下の通り。 a. プラグイン内で emit('error') を実行するか b. プラグイン内で callback を実行するか c. プラグイン内で callback を実行する場合、callback に引数与えるか 調査用に使ったソースは以下のとおり。コマンドライン引数で実行条件を指定できるようになっている。 var gulp = require('gulp'); var gutil =
要約 rimrafかdelを使用しましょう。 はじめに gulp.jsにおいて、かつてはファイル削除のためのプラグインとしてgulp-rimrafやgulp-cleanが存在しましたが、どちらもdeprecateされました。gulp.srcを用いない、ファイル削除以外の余分な処理を行わない手段を用いれば、これらのプラグインを使用する必要はありません。 単一のファイル／ディレクトリを削除する rimrafを使用します。従来より、gulp-rimrafの作者が推奨している方法です。 var rimraf = require('rimraf'); gulp.task('clean', function (cb) { rimraf('./dir', cb); }); gulp.task('build', ['clean'], function() { // Something });
まだ、まとめるには早いかなと思いつつ、そろそろ動きがありそうなので、今後もこのページをアップデートしていくつもりで書いてみます。 gulp-app (まだα版) 最初に本命から。さきほど、リポジトリが公開されたばかりで、まだすぐ使えるという段階ではないものの、Finderで対象ディレクトリを開いておくと、gulpfile.jsを読み取って、タスクをメニューバーに表示してくれる「これが欲しかったんだ!」的なアプリ。node-webkitで実装されています。 対応環境: Mac URL: https://github.com/sindresorhus/gulp-app エディタから利用するタイプ Sublime向け: sublime-gulp Atom向け: gulp-helper そのほか、統合環境での利用について、いくつかアナウンスが出ているみたい。 Webstorm は 次のバージョンで
gulp-slimやgulp-jadeでhtmlを書いてコンパイルして、ふと日本語を混ぜた時に困った。Macなら問題ないんだけど、Windowsでは文字コードがSJISになってしまう… エンコードをコンパイル後に直してくれるものがあると…ってありました。gulp-convert-encodingです！ 使い方 では、gulp-slimでコンパイルして、その後エンコードをUTF-8にするという例を書きましょう。 var gulp = require('gulp'), plumber = require('gulp-plumber'), slim = require('gulp-slim'), convertEncoding = require('gulp-convert-encoding'); gulp.task('slim', function () { gulp.src(["src/**
In my gulp.js file I'm streaming all HTML files from the examples folder into the build folder. To create the gulp task is not difficult: var gulp = require('gulp'); gulp.task('examples', function() { return gulp.src('./examples/*.html') .pipe(gulp.dest('./build')); }); But I can't figure out how retrieve the file names found (and processed) in the task, or I can't find the right plugin.
プラグイン開発に関する詳細な情報はgulpの公式ドキュメントを参照のこと。また、開発したプラグインを公開する場合はgulp公式によるプラグイン開発ガイドラインは必読（MUST readと書かれている）。README規約も見ておくとよい。 （2014/2/9追記：プラグイン開発ガイドラインの日本語訳を公開） なお、gulpプラグインはnode.jsパッケージの一種なので、公開する際の手順やpackage.jsonの記述方法などはnode.jsのドキュメントを参照のこと。 gulpプラグインの実態（i.e. pipeに渡すもの）はnode.jsのStream.Transformのサブクラス Stream.Transformとは、ストリームからの入力を受け取り、加工し、ストリームに出力するもの Stream.Transformのサブクラスを直接作って実装しても良いが、gulpプラグインではStr
browserify の API が変わったので、この記事のコードのままでは動きません！ gulp で browserify しようとしたんだけど、 色々ハマったので、 ひとまずまとめておきたい。 登場人物 gulp ちゃん フロントエンドのビルドエンジン。 grunt を馬鹿にしてる。 browserify ちゃん CommonJS スタイルの require をフロントエンドでも使えるようにする npm モジュール。 調子に乗ってるけど webpack がきになる。 vinyl ちゃん npm 全般で使うオブジェクトの名前。モナドを感じる。 俺がさっき知った。 gulp の仕組み そもそも gulp って、確かに grunt より短く書けるけど、 具体的になにしてるのかよくわかんねーよ！ って思ったので、 まず、この短いコードから考えていきたい。 var gulp = require(
はじめに gulpとBrowserifyを組み合わせてフロントエンドJSをビルドする機会があったので、一通りやってみたことをまとめてみた。 gulpについて Node.jsのstreamを活用したビルドシステム、ということらしい。 Streamのおかげでビルドフローをとても直感的に記述できると感じた。 他のWebフロントエンドのビルドシステムは使ったことがないので比較はできないけど…。 Browserifyについて node.jsと同じように (npm、requireなどを使って) モジュール化されたフロントエンドJSが書けるツール。便利。 JSのモジュール化というと、最近はwebpackというのもあるらしい。 基本 gulp = require 'gulp' source = require 'vinyl-source-stream' browserify = require 'brow
JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで
タスク管理 package.json にはパッケージの依存を書いて npm install するのが基本だけど、 タスクの管理をどうするかというのは、別途また考えないといけない。 自分は gulp が良いと思っているが、 grunt や jake や make を使う人もいる。 また、たくさんオプションをつければほぼ一つのタスクが実行できてしまう browserify, jsh/eslint, mocha などのコマンドを提供するツールもある。 そして、 npm にも一部それらをサポートする npm run 機能があるので、そこに Unix ワンライナーを書くこともできる。 今回は、「どのタスクツールが最良か」みたいな話ではなく、それらをどうやって実行するか、または npm との棲み分けとか構成の流儀について、最近良いと思っているやり方について書いておく。 各方針で問題点を書いていくが、
hoge.js を minify したファイルを hoge.min.js として 出力する方法です. gulp-rename ってやつを使います. 拡張子を .js から .min.js に変換する gulp-rename というタスクを使います. 下記コマンドでインストールできます. $npm install --save-dev gulp-rename ついでに uglify も $npm install --save-dev gulp-uglify あとは gulpfile.js に下記のようなタスクを 書けばOK♪ var gulp = require("gulp"); var rename = require("gulp-rename"); var uglify = require("gulp-uglify"); gulp.task("build", function()
gulpのGetting Startedにもあるように、gulpを使うにはグローバルインストールとローカルインストールが必要になる。なんで同じものを2つインストールするのか、不思議に思ってソース読んで「へー」と思ったのでまとめてみる。 Gruntの場合 Gruntの場合はgrunt-cliをグローバルにインストールしてgruntはローカルにインストールする。grunt-cliはローカルにインストールしたgruntを呼び出すためだけのモジュールだ。タスクを走らすgruntと、そのgruntを実行するgrunt-cli、2つのモジュールは明確に役割が切り離されている。 Gruntがこうなってる理由は、異なるプロジェクトで使ってるgruntのバージョンが違うと、グローバルにインストールされてるgruntのバージョン次第で、そのタスク（Gruntfile）が動かせない可能性が出てくるから。 （参考
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
