この書籍について · JavaScript Plugin Architecture
JavaScript Plugin Architecture この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていくことを目的としたものです。 次の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 この書籍のソースコードは、次のGitHubリポジトリに公開されています。 azu/JavaScript-Plugin-Architecture: JavaScriptプラグインアーキテクチャの本 Twitterのハッシュタグは#js_plugin_book 更新情報はRSSやリリースノートから見ることができます。 はじめに JavaScriptの世界では1つの大きなライブラリよりも小さなライブラリを組み合わせていくようなスタイルが多く見られます。小さなものを組み合わせて作るためには、プラグインと呼ばれる拡張の仕組みが必要とな
JavaScriptを劇的に教えやすくするWebサーバ作りました - Qiita
近年、JavaScriptでコードを書こうとすると、お膳立て7割、コード書き3割みたいな事態がざらにあります。「お膳立て」の例としては、Gulp, Babel, Sass, PostCSS, WebPack, Rollup, Browserifyほか数限りなく。 たしかに、一旦フロントエンド開発に慣れてしまえば、お膳立てにかける時間は短縮することが可能です。でも、これを初学者に強いるのはツラすぎる...! 覚える方はともかく、 教える側がツライ。 今回、未来なJavaScriptやCSSの文法で書いても、よしなにとりなしてくれるWebサーバ「Felt」を作ったので、ご査収ください。 (2016/7/19 関連ツールとの比較を追記しました) GitHub: https://github.com/cognitom/felt npm: https://www.npmjs.com/package/
チーム展開と保守性を考慮したクロスプラットフォームHTML5ビルドシステムの考察 - Qiita
概要 本稿は、HTML5を効率的に開発する環境をマルチプラットフォームで素早く展開する方法について考えて試作したものの備忘録です。後述するツール達は、執筆時点で選定した技術ですが、既に古くなったものもあると思います。Web開発の技術は非常に早いペースで世代交代しているため実際に利用する際には、選定技術の見直しやバージョンアップを行ってください。なお本稿は、所属会社の自習課題として書き進めたものですが発表するアテが無くなってしまった為、こちらに投稿します。 構築方針 現在私の所属している会社の開発プラットフォームは、Windowsのみという状況になっています。一方ターゲットとなるプラットフォームは、モバイルアプリケーションやWebへ移りつつあります。ターゲットとなるプラットフォームがWindowsから移りつつあるため開発環境もクロスプラットフォームな方が良いと考えました。また、個人的にメイン
HTML ファイルにビルド時の Git のコミットハッシュを入れるには - Qiita
index.html などの HTMLファイルにビルド時の Git のコミットハッシュ情報があれば、ブラウザJSアプリでのリリース後のトラブル対応時に便利かと思い、入れる方法を考えました。Window.app.gitCommitHash などでも同等かと思います。 git rev-parse HEAD でコミットハッシュが得られます。これを package.json の scripts 欄から環境変数 GIT_COMMIT_HASH に格納して、gulp タスクを実行して、gulp-replace で HTML ファイルの適当なところを置き換えました。 ▼ package.json "scripts": { "build": "GIT_COMMIT_HASH=$(git rev-parse HEAD) gulp hoge" }, var replace = require('gulp-re
Vagrant+Centos+Apache+Gulpで静的Webサイトの開発環境 - Qiita
概要 Vagrant上に、CentOS7+Apache+Gulpで静的Webサイトのローカル開発環境を構築し、Node.jsのBrowserSyncを使用して、修正がリアルタイムにブラウザに同期されるようにします。 ついでにWi-Fiにつないだスマホでも確認できるようにします。 MacOSX Yosemite 10.10.3 Vagrant 1.7.2 VitualBox 4.3.28 CentOS 7.1 Apache 2.4.6 Node.js 6.6.0 Gulp 3.9.0 CentOS7環境の構築 Mac上に任意のディレクトリを作成し、その中にVagrantのSynced Folderで、かつApacheのドキュメントルートと同期するディレクトリを作成します。 cd ~ mkdir vm mkdir vm/sample cd vm/sample # synced_folder用の
gulp問題ひきずり：ウォッチがまたおバカ過ぎる - 檜山正幸のキマイラ飼育記 (はてなBlog)
「最近のビルドツールって何なの？」において、gulpは「腕力はあるが知性を持たない」、ゴレライ的というかゴライアス的というか…、そんなツールだと述べました。二、三、後から思ったことがあるので追加します。 内容： プロジェクトは肥大しちゃうことがある ウォッチをいちいち手で書くのかよー OMakeと比較してみる ウォッチはこうでなきゃ じゃ、OMakeがいいのか？ プロジェクトは肥大しちゃうことがある 「そもそも大した事はしないのでシンプルなツールgulpでも十分」ということなら、「そうですよね」と同意して話はオシマイです。でもね、gulpを使うプロジェクトが、ほんとに小さくて簡単なものなんでしょうか。 目の前に、10種のプログラミング言語が混じった2000ファイルのソースコード群がいきなり与えられたとき、「よしっ、gulpを使おう」とはならないと思うのですが、小さなプロジェクトが（良くも悪
「チーム開発に役立つstubcell」ってタイトルでCodeGrid 2周年パーティでLTしてきた。 - from scratch
CodeGrid 2周年パーティでLTしてきました。 2周年おめでとうございます！！ TL;DR stubcellというjsonを返すことに特化したstubサーバーを作りました 内部的にjson5を使うことで定義ファイルにコメントを書くことができ、開発者間のコミュニケーションの補助になる grunt, gulpからstubサーバーを使うことができるため、フロントエンドタスクランナーと相性が良い 発表資料 stubcell 概要 いわゆるJSONを返すことに特化したstubサーバーです。 チームで開発する時に、APIサーバー、クライアントサイド、websocketサーバーといった感じに複数の役割を複数の人数で請け負って同時並行開発することが多く、APIのエンドポイントがなくてもクライアントサイドやwebsocketでも開発できるようにするためにstubcellを作りました*1。 また複数人で
最近のビルドツールって何なの？ - 檜山正幸のキマイラ飼育記 (はてなBlog)
TypeScriptでは、コンパイルが必要です。プログラムをブラウザーとNode.jsの両方で使おうとすると、さらに加工が必要です。ミニファイだの文書も作るだのすると、ちょっとしたビルドプロセスとなるので手作業では辛くなります。 今更Makeでもないよなー、と思い、最近のビルドツールを試してみました。 内容： 流行りすたりが激しすぎる gulpを使ってみる：こんなサンプル gulpのビルドスクリプト タスクランナーってのはビルドツールとは違うのか？ ビルドツールは進化したのか 参考資料： 例題のファイルとコマンドの一覧 ソースファイル 追加の話： gulp問題ひきずり：ウォッチがまたおバカ過ぎる 流行りすたりが激しすぎる 「確かGruntってツールがあったよな」と、インストールと使い方を調べていると、やたらにgulpって単語が目立つんですよね。Gruntのライバルの新興勢力らしいです。 「
React TDD Example: Unit Testing and Building a React Component with Jest, Gulp and React Test Utils
ReactJs has attained lot of momentum since its initial release in 2013, and became the best JavaScript library for developing rich UI interface. React also popularized different concepts like Virtual DOM, Uni-directional data flow and Componentization in the front-end community. As of today, React has more than 20,000 stars in Github repo, and actively maintained by the Facebook team. Update Feb 9
Browserify + Reactify + watchify + gulpでReactの開発をする - Qiita
目的 Scalaのweb frameworkであるxitrumでReactを使いたい。Reactで利用できるライブラリはnpmのmoduleが殆んどなので、moduleをNode.jsを使わずに使いたい(var foo = require('foo');を使いたい)。 Browserifyの導入 Browserifyのmoduleを使うことでNode.jsを使わすにrequireが使える。 Browserifyはrequireしているnpm moduleを1つのjsファイルにまとめてくれる。つまり、requireがmoduleのjsに置き換わる。 BrowserifyだけだとJSXを変換できないので、Reactify moduleを使用する。Reactifyはbrowserifyコマンドの-tオプションで reactify を指定することでJSXの変換とreact moduleの追加をやっ
webpack で始めるイマドキのフロントエンド開発 - Qiita
webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。 webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。 以下では基本的な使い方を見ていきます。 ※もちろん Grunt/G
タスク自動化ツール「gulp」 を使って制作時間を短縮しよう
2014年12月24日 Webサイト制作, 便利ツール みなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違
これからはじめるGulp #1：bundler, rbenv, nodebrewでGulp環境を作ってみる | DevelopersIO
はじめに 今までGruntばかり使って来て、そろそろGulpも使っておこうということで、Wordpressテーマを作るついでに勉強したことをメモしていきます。12月ということで、アドベントカレンダーの季節ですが、他の方が主催しているアドベントカレンダーに参加できるほど知識も経験もないので、一人アドベントカレンダーをやることにしました。良いテクニックの紹介というよりは完全に個人的に勉強した内容をアウトプットしているだけなので、すでに使いこなしている方はトップページから他の記事を読んだ方が有意義だと思います。 今回はとりあえずbundler, rbenv, nodebrewが用意されている環境でgulpが実行できるところまで進めます。bundler, rbenv, nodebrewが出る時点でデザイナーの方には敷居が高いけどフロントエンジニアにとってはいたって普通な内容。私がどっちつかずな人間
pecoで各プロジェクトのルートディレクトリを検索して、簡単に動作させるやつ - Qiita
管理の面倒臭さと散らばってゆくファイルたち Git Vagrant Docker Gulp Grunt Chef Guard . . . DevOpsやタスクランナーなどがフロントエンドやバックエンドエンジニアの中で流行っている昨今、いろんな場所にいろんなプロジェクトディレクトリが散らばってて管理に困ってませんか？ ぼくもそのひとりです。 いちいちそれぞれのプロジェクトのパスを覚えるのも面倒。。。 なので、この辺を参考にさせていただき、特定のファイルを検索して、各アプリの動作に簡単にアクセスするpeco。 http://d.hatena.ne.jp/syohex/20140729/1406648636 http://qiita.com/yungsang/items/e10ca283a1ceeaa845db peco, peco, peco... セットアップ @yungsangさんのpec
npm + gulp + bower でビルド自動化 - GeekFactory
(追記) この記事は公開から時間が経っており、内容が古くなっています。2016年時点ではWebpackが圧倒的におすすめです。 JavaScriptやCSSのビルドを自動化することで、手作業による無駄な時間やミスを削減できます。また、誰でもビルドできるようになるため、リリースのボトルネックを解消できます。 改善したいこと JavaScriptフレームワークやCSSフレームワークの依存関係を自動的に管理したい。ダウンロードして配置を手作業でやりたくない。 CoffeeScriptやLESSのコンパイルを自動的に実行したい。手順書を見ながらコマンドを叩くとかやりたくない。 ダウンロードしたライブラリをリポジトリに入れたくない。 出荷対象のリソースを明確にしたい。ゴミファイルをリリースしたくない。 どうやって実現する？ bowerでライブラリの依存関係を管理する。 gulpでビルドを自動化する。
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Jenkinsでgulpタスクを動かすためのセットアップ(所要時間30分) - Qiita
イマドキのコーダー環境構築2016
RequireJSとか - JavaScript Advent Calendar 2014
GitHub - sable-virt/source-review-tool: LIGでかつてソースコードをリアルタイムに共有してレビューするために使っていたツール