Good practices for gulp 関西フロントエンドUG主催「FRONTEND CONFERENCE 2016」での発表資料です。 http://kfug.jp/frontconf2016/ https://github.com/jmblog/gulp-the-good-parts
![gulp: The Good Parts](https://cdn-ak-scissors.b.st-hatena.com/image/square/33ece15dd671065898d07193ead2859e3f460934/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F4a0fbc09ed2a49d68e0867a65c3bcd80%2Fslide_0.jpg%3F5952155)
最近JSを利用するときは、依存モジュールはnpmを利用し、ES6やTypeScriptの仕様を開発には使った上で、ブラウザ用にコンパイルして配信するようになってきている。また同時にネットワークの負荷を下げるためにminifyを行う場合もある。 minifyはライセンスが絡むと少し難しい。例えばコメントを全て削除してしまうとライセンスコメントまで消えてしまう。この問題にはみんながそれぞれの手法で対処しているみたい。1年ほど前の記事でクライアントサイドJavaScriptのライセンス管理 | エンジニアブログ | GREE Engineering というものがあり、いろんなJSのコンパイルのためのライブラリが独自でライセンスの形式を決めていて、それにマッチしないものは消えてしまう、みたいな辛いことが起きてそうだった。 そこで今回は自分の勉強も兼ねて、npmのモジュールを含めてブラウザ用にコンパ
背景 ひと昔前までフロント側build toolと言えば grunt が主流でしたが、今は gulp が主流になりました。 gulpは現在のところ3.9が最新ですが、水面下では4.0が準備中です。 4.0は久しぶりの major version release だけあって、結構な breaking changes が含まれる予定です。 4.0がいつリリースされるかは分かりませんが、 4.0 branch は用意されていて、そのほとんどの機能はもう動かすことができます。 本エントリではchangelogを見ながら、その機能を実際に試していって、どういったものか説明していこうと思います。 今回書いたコードはgithubにあげたので、もし試したい方がいればどうぞ。 資料 changelog API document バージョン $ ./node_modules/gulp/node_modules
gulpの3.9.0からES6でタスクを記述できるようになったので使っていたけど、 Babelの6系にアップデートしたら動かなくなった。 ※ぼーっとしてたら最近いろいろアップデートされてていろいろ動かなくなっているので下の方に追記(2016/01/26) 現象 gulp: 3.9.0 babel-core: 6.0.14 以下のようにgulpコマンドでdefaultタスクを実行しようとしたところ importなんてしらない!と怒られる。。 [sawapi: ~/dev/git/sawapi/mw]$ gulp [17:11:48] Requiring external module babel-core/register /home/sawapi/dev/git/sawapi/mw/gulpfile.babel.js:3 import requireDir from 'require-di
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で使うプラグインやnpmモジュールをピックアップ 更新履歴 2016-03-11 更新 2014-07-25 gulp-bower-files がdeprecateされていた。代替は main-bower-files 2014-07-24 gulp-connect がdeprecateされた。代替は後継の gulp-webserver 2014-06-29 gulp-clean の箇所を修正(shinnn様にご指摘いただきました。感謝!m(_ _)m) 今は使わない方が良いプラグインリスト - gulpjs/plugins - github ↑要チェック。この記事には未反映 Webサーバー、ユーティリティ browser-sync Webサーバー/ライブリロード gulp-webserver Webサーバー/ライブリロード ※browser-syncに乗り換えた gulp-conn
はじめに そろそろ、使っていないと後ろ指をさされそうな雰囲気になってきた、ビルドツール各種ですが、業界(?)の全体像をなんとなく眺めてみたいと思います。動きとしてはRuby界隈が早く、Guardが2010年あたりから、それを参考にする形でGruntが出てくるのが2011年、gulpについてはまだ1年未満という状況ですが、特にJavaScript周りは活況です。 下記、主にGitHubの各種数値を並べています。コミュニティの盛り上がりや成熟度の判断の参考として。 名称 環境 設定ファイル 可読性 GitHub プラグイン Issues 初コミット
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く