You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
JavaScript Plugin Architecture この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていくことを目的としたものです。 次の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 この書籍のソースコードは、次のGitHubリポジトリに公開されています。 azu/JavaScript-Plugin-Architecture: JavaScriptプラグインアーキテクチャの本 Twitterのハッシュタグは#js_plugin_book 更新情報はRSSやリリースノートから見ることができます。 はじめに JavaScriptの世界では1つの大きなライブラリよりも小さなライブラリを組み合わせていくようなスタイルが多く見られます。小さなものを組み合わせて作るためには、プラグインと呼ばれる拡張の仕組みが必要とな
webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16（いちろく、ではなくじゅうろく）です。 ▲ webpackの公式サイト webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをimport()やrequire()を使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です。 webpack 4をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。 なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。 環境準備 Gul
最近はJavaScriptをES6で書いたり、cssをsassで書いたりするのが当たり前になってきました。そうなると必然的に必要になるのがビルド。ビルドの仕組みも充実してきていて、単にトランスパイルするだけでなく、構文チェックしたり圧縮したり、CSSスプライトをつくるようなことまでできたりします。 で、このビルド環境、新規Project立ち上げる度に用意するのが面倒くさいので、自分用の雛形をつくりました。よかったら参考にしてみてください。 ビルドの中身 ES6 → ブラウザで動かせるJavaScriptにする scssをcssにする jsとcssはそれぞれ結合して圧縮する(.min.js/.min.cssをつくる) 変更を検知して自動ビルドする 雛形なので特別なことはしません。新しく何かつくりたいと思ったときにすぐに作れるようなビルド環境を用意するだけです。デバッグ用にトランスパイルしただ
this.processing = new Promise(function (resolve, reject) { ^ ReferenceError: Promise is not defined at LazyResult.async (/Users/xxx/app/node_modules/postcss/lib/lazy-result.js:152:31) at LazyResult.then (/Users/xxx/app/node_modules/postcss/lib/lazy-result.js:75:21) at DestroyableTransform._transform (/Users/xxx/app/node_modules/gulp-autoprefixer/index.js:24:6) at DestroyableTransform.Transform._re
イントロ 21世紀になって登場したフロントエンド向けビルドツールであるgrunt, gulpなどは、最近批判を受けているようだ。 【翻訳】Web世代のデベロッパーのためのmake - MOL 最近のビルドツールって何なの？ - 檜山正幸のキマイラ飼育記 gulp問題ひきずり：ウォッチがまたおバカ過ぎる - 檜山正幸のキマイラ飼育記 たしかに、コンパイラ毎にプラグインをインストールしたり、毎年のように新しいビルドツールを覚えるのは無駄だ。古き良きmakeで十分という意見も理解できる。 でも、僕はmakeを使う気にもなれない。タブでインデントするのはまだ我慢できる。 しかし、$(JC) $(JCFLAGS) $< -o $@ といった記号を多用したソースは読みやすいとは言えない（可読性は大事だ！）。 また、機能がシンプルすぎて、標準的な使用方法から外れた時にはシェルスクリプトを苦労して書くこと
コンパイル 圧縮 保存 といった動作を自動でやってくれる賢いGulp。 でも環境構築はいつもひとまかせ。 さすがに覚えようと、うちの会社でちょくちょくやってる勉強会に参加しました。 #準備 ##node.jsのダウンロード Gulpはnode.jsで動いてるのでまずはダウンロードします。 バージョンについては4, 6などの偶数はLTS対応、5などの奇数は挑戦的な新機能を含むものらしい。 私は5でした。 ##gulpをインストール $ npm i -g gulpでgulpをインストール。 ##フォルダつくる gulpfile.jsをつくる $npm init でpackage.jsonをゲットする $npm i gulp node_modulesでnode_modulesもいれる フォルダ名が"gulp"だとうまくいかないので、もしそうしちゃった場合はpackage.jsonの"name"を
Angular2を触り始めているが、YEOMANジェネレータがあまりないので自分で作っています。今Angular2を始めている人達の多くがangular2-seed: github.com を利用していると思いますが（実際はよくわかりません）、Angular2にはangular-cliというのがあり、これを使うとディレクトリ構造とか開発環境とか多分ベストプラクティスが整う。angular-cliはember-cliを元に書かれています。 github.com angular-cliの使い方はgithubを見れば良いのですがemberに慣れていない人は若干戸惑うところもありますので備忘録的に記載します。 インストール npmを使ってインストールします。グローバルインストールするのですが、プロジェクトを作成したときもローカルにangular-cliがインストールされ以降はローカルを使うようです
テストランナーとは、様々なブラウザでテストを実行し、その結果をまとめてレポートするためのツールを指します。Karma は Node.js 上で動作するテストランナーです。元々はTestacular という名称で Google が AngularJS の開発で使うために作ったものですが、2012 年にオープンソース化されたタイミングで業 ( カルマ ) を背負った名称に変わりました。 Karma - Spectacular Test Runner for Javascript 本記事では、Jasmine をベースにしてテストコード ( 実処理 ) を記述し、それらを Karma から実行してレポート ( テスト結果 ) を確認するという流れで進めていきたいと思います。 環境構築 前提条件 Mac OS X Yosemite node.js インストール済み (v5.4.0 ~) npm イン
目的 Grunt と違って Gulp は登録したタスクが並列で実行されていきます。 しかし、Gulp のタスクも自在に直列/並列化したいのです！ 方法 調べたらよいものがありました。run-seqence を使うだけ。 記述例 図のように clean タスクが終わったら並列に jade、sass、coffee タスクを実行。これらのタスクが全て終わったら deploy タスクを実行と言うように、3 段階にタスクを直列、その中で複数のタスクを並列にします。 var runSequence = require('run-sequence'); gulp.task('default', function(callback) { return runSequence( 'clean', ['jade', 'sass', 'coffee'], 'deploy', callback ); });
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く