14:00「gulp.js」は、フロントエンドの開発や製作で便利なタスクランナーです。最初のコミットから、まだ1年ほどの若いプロダクトですが、ここのところ耳にする機会が増えてきました。この連載では、インストールからその使いこなしまで、数回に渡って紹介していきたいと思います。JavaScriptプログラマだけでなく、HTML・CSSを扱う人、PhotoshopやIllustrator使いにもユーザが広まっています。本稿も、プログラマに限らず、広いユーザ層に読んでもらえたら幸いです。Browserify、BrowserSyncなどgulp.jsのWebサイトgulp.jsって何?最近ではWeb制作でも、LESSやCoffeeSriptなどの利用増加で「コンパイル」が必要なケースが増えています。coffee......などなどこれらのコマンドを使えば一つ一つのコンパイルはできるのですが、コマンドを覚え、毎回オプションを指定するのは面倒です。ファイル生成のこんなケースを考えてみます。CoffeeScriptをコンパイル複数ファイルをひとつに結合JavaScriptをミニファイ(uglify)このように複数の処理を連続して行いたい場合、1つのコマンドでは明らかに役不足です。そこで、gulp.jsの出番です。設定例を見てみましょう。実際に試したい場合は、こちらからダウンロードできます。distフォルダに保存});gulp.jsを使ったことがなくても、なんとなく何をしているか「読めた」と思います。次のgulpコマンドで、このタスクが実行されます(※事前に環境構築が必要です。coffeeこのように、gulp.jsは複数の処理をまとめて「レシピ」にします。実行の際はgulpコマンドだけ覚えておけばOKです。この「レシピ」を制作チームで共有しておけば、環境による違いを気にすることなく、面倒なタスクを自動化できます。今回は連載初回ということで、gulp.jsのインストールから、実際に使ってみるところまで説明を進めます。gulp.jsのシンプルさと便利さを体感してみてください。10.9を前提に進めます。gulp.jsとNode.jsgulp.jsは、最近のフロントエンド系のツールと同じく、Node.jsを実行環境としています。gulp.jsの「レシピ」は、gulpfile.jsというファイルに書きますが、この中ではgulp.jsのプラグインだけでなく、Node.jsのモジュールを直接組み合わせることも可能です。図にあるように、BrowserifyやBrowserSyncなどの人気のツールとgulp.jsと組み合わせるケースが増えています。ツトム)プログラマ、兼デザイナ。オープンソース活動に関わる中で「下北沢オープンソースCafe」を2011年オープン。以後、子供向けのプログラミング道場「CoderDojo」をアジアで初めて開くなど、カフェを拠点とした活動多数。ソーシャル図書館サービスの「リブライズ」共同設立者、コワーキング協同組合理事ほか。圧縮・解凍UNIX基本講座@CodeZine『CodeZine(コードジン)』の公式アカウントです。【NEW】デブスト2019デブサミ2019福岡・関西デブサミ2019夏デブスト関西デブサミ2019×ログインEメールパスワード※旧SEメンバーシップ会員の方は、同じ登録情報(Eメール&パスワード)でログインいただけます。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。