gulp v4.0.0がプレリリース！ 移行方法と変更点まとめ
gulp v4.0.0がプレリリース！ 移行方法と変更点まとめ 2018年1月8日 ※この記事は2018年1月8日に公開しましたが、2020年9月14日に内容をメンテナンスしています。 gulp 2018年1月1日に、gulp v4.0.0がプレリリースされました。この記事では、gulp v4への移行方法と、主な変更点をいくつか紹介します。 gulp v4への移行方法 まず、gulp v3からv4への移行方法について説明します。 gulpのグローバルインストール グローバルインストールされているgulp v3を削除して、gulp v4をグローバルインストールします。 $ npm rm -g gulp $ npm install -g gulp-cli 参照：Quick Start | gulp.js gulpのローカルインストール ローカルインストールされているgulp v3を削除して、g
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境
Gulp とは Gulp は Web 制作に関するいろいろな作業を自動化するためのツールです。Sass のコンパイルや Gulp の使用には node.js や Sass などのインストールが必要なので、ちょっと古い記事ですが下記を参考に適当にインストールしてみてください。 browserify とは そんなに詳しくないのですが、browserify はざっくりと言えば js で requireを使えるようにするためのツールです。今までであれば複数の js ファイルが必要な場合、例えば、a.js と、a.js がないと動かないb.js を読み込む場合だと、HTML ファイルに下記のような記述が必要でした。 // index.html <script src=".js/a.js"></script> <script src=".js/b.js"></script> browserify を使
Foundation の使い方: Media Queries 編 | WP-E (仮)
Foundation 割と好きめのハマチです。 多機能過ぎて取っ付きにくい印象の Foundation でしたが、その全てを使いきらなくても十分便利でしたので数回に分けてかじっていこうと思います。 Foundation の準備 Foundation があればなんでもいいですが、今回は私がいつも開発用に使っている gulp-web-starter を使ったサンプルで紹介します。このサンプルは Shell Script が動く環境 sass > 3.4 sass-globbing node.js > 0.12.0 npm > 2.7.3 bower > 1.3.12 があれば上手く行くと思います。また、この記事が書かれた時点での Foundation のバージョンは5.5.1です。 Foundation の利用方法はいくつかありますが、この例では Bower を使った方法になります。 まずは
なぜ僕は(2015年のフロントエンドで、makeではなく)gulpを選ぶのか - mizchi's blog
http://d.hatena.ne.jp/m-hiyama/20150511/1431306678 の件 最初に 僕もgulpが今後生き残るかというと、かなり懐疑的です。開発パラダイムに合わせて変わっていくで、来年の段階で自分はgulp使えないなといっている可能性は十二分にあります。そのタイミングの一つはES6 import がHTTP2で並列ロードのオーバーヘッド無しで解決されるようになるタイミングでしょう。 根本的な問題として、Web周りは標準化の関係で動きが遅いです。最新の仕様ではままならず、ブラウザ間の実装がまちまちで、また開発上の要求が多様なのでプリプロセッサで解決する文化が根付きました。プリプロセッサがいらなくなるぐらい個々の標準が洗練されればプリプロセッサも不要になりますが、そのような未来は、今の動きをみるに、あと15年は来ないように思えます。 とはいえ、ただひとつ言えるの
Gulp+Browserifyでsrc/**/*.jsをdist/**/*.jsにする | 高橋文樹.com | プログラミング
この投稿は 9年半 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 どうでもいい話ですが、けっこうはまったので。 最近のWebフロントエンド開発ではタスクランナー系の話題がわりと多く、僕もgruntからgulpに乗り換えて数ヶ月という感じなのですが、Browserifyを触っておいた方がいいのかなと思い、直近の趣味プロジェクトで採用してみました。 Browserifyってなに？ そもそもなのですが、Browserifyというのはnodeのrequire('hogehoe')っていう依存関係解決機能をブラウザにも持ち込もうという試みですね。 たとえばjQueryなんかでいうと、こんな感じになります。 $ = require('jquery'); $(document).ready(function(){ // 何かする }); requireを
Browserify を使ってみる - アカベコマイリ
Web ブラウザ向けの JavaScript でも node.js や node-webkit みたいに require で依存モジュールを読み込めるという Browserify を試してみる。 2014/12/23: 追記 この記事で書いた gulpfile.js には問題があるので続く Browserify を使ってみる 2 - Source Map で修正 この記事のサンプルと同じものが対象なので GitHub リポジトリへのリンクはタグで分けている Browserify と require HTML から参照する JavaScript 間に依存がある場合、通常は HTML 側の script タグの記述順で調整する。例えば jQuery を利用するスクリプトがあるならそれより先に jQuery を読み込む必要がある。そのため依存が増えるたびに HTML 側を修正する必要があり面倒。
watchify を試す - アカベコマイリ
Browserify による JavaScript コンパイルは便利だがファイルが増えてくると処理時間の長さがネックになる。3 秒を超えたあたりから gulp.watch で監視するにはきつくなる感じ。 スクリプト間の依存を解決しつつ *fy 系の処理もこなすのだから仕方ないともいえる。とはいえ、ひとつファイルを変更しただけで構成ファイル全体がコンパイルされるのは防ぎたい。そのためには差分コンパイルが必要だ。というわけで watchify を試してみる。 2015/5/20 補足 本記事と関連する記事として「gulp-watchify を試す」を書いた。こちらは gulp プラグインで Browserify/watchify を処理している。 watchify は Browserify をファイル監視つきで実行するためのモジュールである。コマンドライン ツール、Node モジュールとして利
gulp と browserify と vinyl の話 - <body>
browserify の API が変わったので、この記事のコードのままでは動きません！ gulp で browserify しようとしたんだけど、 色々ハマったので、 ひとまずまとめておきたい。 登場人物 gulp ちゃん フロントエンドのビルドエンジン。 grunt を馬鹿にしてる。 browserify ちゃん CommonJS スタイルの require をフロントエンドでも使えるようにする npm モジュール。 調子に乗ってるけど webpack がきになる。 vinyl ちゃん npm 全般で使うオブジェクトの名前。モナドを感じる。 俺がさっき知った。 gulp の仕組み そもそも gulp って、確かに grunt より短く書けるけど、 具体的になにしてるのかよくわかんねーよ！ って思ったので、 まず、この短いコードから考えていきたい。 var gulp = require(
JTF2014「フロントエンドで普及が進むビルドツールたち — Grunt、gulp ほか」の聴講メモ #techfesta - べにやまぶろぐ
Swift のセッションに並んでこちらもフロント寄りのお話ということで、最近 Grunt あんまり活かせていないもやもやが解消するかなと思って こちらのセッション に参加してきました。そしたら時代は今や Gulp ですよという話に… 個人的に響いたこと Grunt から今や時代は Gulp に傾きつつある (Google も Gulp を担いだらしい、Yeoman はどうなった？？) デザイナーさんがタスクランナー活用して開発する時代 古典的アプローチでマルチデバイスのレスポンシブ対応とか無理 WF だと手戻り多すぎてクリエイターも CI する時代 フロント開発に node というか npm 必須になりつつあってそれはそれで悩ましい感じ 相変わらずフロントのトレンド（やツールが）すぐ変わってこれも辛い 聴講メモ 下北沢 オープンソース Cafe では毎週日曜日に小中学生向けにプログラミング
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gulpでbrowserify使ってcoffee-scriptの監視とコンパイル - Qiita