webpack
Home Getting Started Motivation What is webpack? Installation Usage Require Modules Vendor Modules Using Loaders Using Plugins Dev Tools Troubleshooting Tutorials and examples Getting started List of tutorials examples Guides CommonJs AMD webpack for browserify users Code Splitting Stylesheets Optimization Long-term Caching How to write a loader How to write a plugin Multiple entry points Library
npm で依存もタスクも一元化する - Qiita
タスク管理 package.json にはパッケージの依存を書いて npm install するのが基本だけど、 タスクの管理をどうするかというのは、別途また考えないといけない。 自分は gulp が良いと思っているが、 grunt や jake や make を使う人もいる。 また、たくさんオプションをつければほぼ一つのタスクが実行できてしまう browserify, jsh/eslint, mocha などのコマンドを提供するツールもある。 そして、 npm にも一部それらをサポートする npm run 機能があるので、そこに Unix ワンライナーを書くこともできる。 今回は、「どのタスクツールが最良か」みたいな話ではなく、それらをどうやって実行するか、または npm との棲み分けとか構成の流儀について、最近良いと思っているやり方について書いておく。 各方針で問題点を書いていくが、
モダンJavaScriptアプリケーション開発 in Salesforce - Qiita
はじめに HTML5でのアプリケーション開発は、エンタープライズ向けアプリケーションでも当たり前のようになってきました。これはSalesforceにおけるアプリケーション開発でも同じです。 Salesforceでのアプリケーション開発はVisualforce/Apexで行うというのが数年ほど続いてきたので、HTML5つまりJavaScriptを主体とするアプリケーション開発にはなれていないベンダーも多数あるかと思います。自分は創業当時からJavaScriptでのSPA(Single Page Application)をメインプロダクトに据えた会社を運営しており、Salesforceのパートナーとしても長いことやっていますので、このあたりのノウハウは比較的多い方です。そのためこのエントリはそれなりに説得力を持ってお届けできるとは思います。 真っ先に行うべきこと もしあなたがSalesforc
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
Browserifyでrequireを使ってjavascriptの依存関係をすっきりにしてみる - undefined
ブラウザ上もでrequire使いたい 現状Coffeeのclassを異なるファイルから参照するにはwindow.HogeClassとか@HogeClassとかでグローバル変数をってたんだけどBrowserifyを使えばNode.js のモジュールのようにrequireで読み込みことができるっぽい。参考記事を見ながら簡単なサンプルを実際に作ってみた。 grunt-cli のインストール npm install -g grunt-cli package.jsonを作成 npm init 対話形式でpackage.jsonを作成。 必要な情報を入力してください。 プロジェクトに必要な情報を記述するjsonファイルが生成されます。 browserify grunt grunt-browserifyのインストール npm install browserify grunt grunt-browseri
A Year with Browserify - ÆFLASH
NOTE: this guide is out of date. It is only vaild for grunt-browserify@~1.3.0 and its included versions of browserify and browserify-shim. An updated guide is here. It's been a year since I wrote the long Javascript Module Systems article, in which I concluded that CommonJS and Browserify was the best way to write modular javascript for the browser. Over the last year, I've had a chance to test th
Getting Started with Browserify — SitePoint
JavaScript implementations have been getting more and more complex as the beautiful beast we call the web evolves each year. Many of us now work with JavaScript modules – independently functioning components that come together to work as a cohesive whole, yet can happily have any component replaced without causing armageddon. Many of us have been using the AMD module pattern and RequireJS to accom
sinatra ですぐにアプリケーションの実装に入れるようにするための準備 - Studio3104::BLOG.new
背景 自分が仕事で書く WEB アプリケーションは多くの場合が小粒で、何か書く場合には sinatra を使っています。 さらにテンプレートエンジンは slim で、ビューが必要な場合は twitter bootstrap を使って書きます。 で、新規で何か書き始める時に、それっぽいディレクトリ構成を作って、twitter bootstrap とか jquery とかをダウンロードして解凍してそれっぽいところに設置してー(もしくは既存プロジェクトをディレクトリごとコピーしてきて要らないファイル消してネームスペース変更してー)、とかっていうローテクな感じのことを毎回手動で行っていて、すっと実装に入れない！めんどくせー！ってなることが多いので、いったん整備してみました。 studio3104/ore-no-sinatra-skelton · GitHub 構成 javascript/css ラ
この1年の優れたIT系書籍はどれか？ 「Jolt Awards: The Best Books」2014年版が発表される
この1年の優れたIT系書籍はどれか？ 「Jolt Awards: The Best Books」2014年版が発表される デベロッパー向けに情報発信をしている米国の「Dr. Dobb's Journal」が毎年優れた書籍を選出する「Jolt Jolt Awards: The Best Books」の2014年度版（2013年7月1日から2014年6月30日までの書籍）が発表されました。 今年選出されたラインナップを見てみると、JavaScriptのビルドシステムのGruntの解説本、Internet of Things関連、セキュリティを設計段階から組み込むための本、シングルページWebアプリケーションの解説、C++言語入門、そしてPythonの解説本の6冊。GruntやIoT、シングルWebページなどが並ぶところが、最近のトレンドを反映しているように思います。 ちなみに、2冊目の「Ret
[vagrant][Wordpress][VCCW][chef]Vagrant + Chef ベースのWordpress Theme / Plugin 開発環境「VCCW」
はじめに VCCWはVagrant + Chef ベースのWordpressのプラグイン / テーマ開発環境です。VagrantとVirtualBoxをインストールすればコマンド数回で仮想マシンが立ち上がり便利なWordpress開発環境ができあがります。ローカルのXAMPPやLAMPを卒業したい、そんな方にお勧めです。 動作環境 VCCWはVagrant 1.5以上、VirtualBox 4.3以上が必要です。コマンドラインで操作することになるので、あまりコマンドラインを使った経験のないデザイナーさんには敷居が高いかもしれません。 VCCWでできること 公式サイトの箇条書きを抜き出してきただけですが、下記のようなことができます。設定ファイル（Vagrantfile）を書き換えるだけで変更もできます。 コンフィグファイルによる設定変更（Vagrantfile） マルチサイト 管理画面のSS
![[vagrant][Wordpress][VCCW][chef]Vagrant + Chef ベースのWordpress Theme / Plugin 開発環境「VCCW」](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
Grunt.jsでCSSの整形を行うgrunt-cssprettyを公開
一昨日実験を行ったCSSプリプロセッサやポストプロセッサで出力されたCSSの整形をGrunt.jsで実行できるプラグイン、grunt-cssprettyを作成しましたので本日公開いたします。 使用方法 npm install --save-dev grunt-cssprettyを実行し、プラグインをインストールします。その後、gruntfile.jsやgruntfile.coffeeにて設定を行います。 オプション解説 以下のオプションが設定可能です。変更が必要なオプションのみ記載して下さい。記述がないオプションは、srcで指定されたCSSファイルのフォーマットでそのまま出力されます（そのため、ほぼ全てのプロパティに初期値を指定していません）。 なお、''は改行も空白も入れないことを意味しますので注意して下さい。 decl.before 型 String 初期値 なし CSSプロパティ名の
フロントエンド自動化ツールをまとめて理解する - ワザノバ | wazanova
http://www.youtube.com/watch?v=1OAfGm_cI6Y 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 GoogleのAddy OsmaniによるFuture of Web Appのキーノートスピーチです。 49分間 [Video]で下記の話題を全てまとめてます。フロント関連の便利ツールが一通り網羅されてます。おかげで、Yeoman (Yo/Grunt/Bower) の概要もすっきり理解できました。スライド（236枚）で確認されたい方はこちら。 Codekit Hammer Prepros Koala Mixture compass.app scout-app Yeoman / Grunt grunt-image: JPG/PNG/Gifを最適化して軽量化 grunt-
クライアントJavaScriptのテストにはmocha-phantomjsを使え - mizchi's blog
mocha-phantomjsは、その名前の通りmochaとphantomjsを使ってクライアントJSのテストができるヘッドレステストランナー。長く使ってるけど特に不満はないので使えばいいと思う。 metaskills/mocha-phantomjs https://github.com/metaskills/mocha-phantomjs スケルトンを作った クライアントJSのテスト書かれない理由として、環境構築の難しさがあると思う。 そこで怠惰な人たちの為にGruntでプロジェクト用スケルトンを作った。ごじゆうにおつかいください 使い方 git clone git@github.com:mizchi/client-app-skeleton.git cd client-app-skeleton npm install bower install grunt test 結果 Running
YEOMANを使ってMEAN（MongoDB + Express.js + Angular.js + Node.js）のWebアプリケーションを作る - @ledsun blog
MEANとは MongoDB + Express.js + Angular.js + Node.js を組み合わせてWebアプリケーションを作成することです。 手順 Windows上で簡単なユーザ登録アプリケーションを作ってみましょう。 次の手順で進めていきます。 アプリケーションの雛形を作成 ユーザページを追加 htmlを修正してユーザ一覧を追加 クライアントのJavaScript（Angular.js）を修正 サーバのJavaScript（Express.js）を修正 MongoDBを参照 ユーザの登録機能を追加 完成したものはGitHubにおいてあります。 Chocolatey本体のインストール以外はMinGW Bash*1で実行可能です。 事前準備 ChocolateyでMongoDBとNode.jsをインストールします。Chocolateyをインストールしていなかったら次のコマン
今どきのGruntを使ったフロントエンド開発（HTML/CSS編） - MOL
SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 ども、Front-end Developerをしております@t32kです。今日はがんばります。 Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。 Agenda 今日の話す内容は以下のとおりです。 なぜGruntを使うの？ Gruntの使
grunt bower yeoman入門記事 - lxyuma BLOG
※これは、社内の勉強会の資料の下書きです。 ここ数年で、js環境が整理されてきた。 js開発するなら、これらの知識は必須。無いとめっちゃ不便。 という事で、今日は、gruntとbowerとyeomanの話。 各ツール概説 Yeoman applicationのひな形を作る アプリ構築に必要な様々な作業を任せられる Grunt build / preview / testに使う Bower 依存性の管理を行う 手動でDLやscript管理する必要無 rails開発者のために ぶっちゃけ、どれも、railsの環境にそっくり。rails知ってる人は、要するに、以下の事。 grunt => rails server実行時に勝手にやってくれる作業を切り離してカスタマイズできるようにしたもの(coffeeのコンパイルとか) bower => ruby gem管理をjsのclient側で実現した物。 y
ディレクトリの変更を監視して、任意のコマンドを再起動する話 - kazuhoのメモ置き場
plackup -R とか grunt-contrib-watch とか、ウェブアプリケーションの処理系とかビルドツールには、割とこの手のものが組み込まれているんだけど、Windows を無視できるなら、*1外部ツールを使えばいいわけで。 具体的には App-watcher-0.11 - watch the file updates - metacpan.org をインストールして % watcher --dir src -- cmd args...みたいな感じで起動すれば、src ディレクトリに変更があると cmd を SIGTERM で終了して再起動してくれるから捗ると #soozy で聞きました。 参考文献: Plack::Loader::RestarterとPlack::Loader::Shotgun - すぎゃーんメモ grunt-contrib-watch が重いので grun
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ギークアカデミー：先端を走る技を、ギークに学ぶ
GitHub - dancryer/PHPCI: PHPCI is a free and open source continuous integration tool specifically designed for PHP.
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
