Bower入門(応用編) - from scratch
Bower入門(応用編) さて、応用編を書いていきます。 基礎編ではBowerのインストールとライブラリ管理する上での基本的なコマンドを紹介しました。 応用編ではBowerのライブラリを管理する上で利用するべきツールやライブラリを公開する上で心がけるべきことについて書いていきます。 少し長いのでサマリ Bowerを管理する上で利用すると良いツール：grunt-bower-taskがオススメです ライブラリを公開する上で心がけること、その1：mainとignoreをちゃんと書きましょう ライブラリを公開する上で心がけること、その2：ちゃんとgit tagを使ってバージョン管理しましょう Bowerからインストールしたライブラリを利用する場合 前回の基礎編で少し書きましたが、おさらいすると、Bowerはあくまでパッケージマネージャなので、インストールしてもフォルダ構造までは変えてくれません。
grunt-bower-task で Bower を扱いやすくレイアウトする | DriftwoodJP
% bower install jquery#1 --save-dev % bower install normalize-css#1 --save-dev % bower install html5shiv#3 --save-dev % bower install respond#1 --save-dev /bower_components ├── html5shiv │ ├── dist │ │ ├── html5shiv-printshiv.js │ │ └── html5shiv.js │ └── readme.md ├── jquery │ ├── README.md │ ├── bower.json │ ├── component.json │ ├── composer.json │ ├── jquery-migrate.js │
Maintainable Gruntfile.js - from scratch
さてさて、前回の続きです。 オレはgruntのエコシステムに乗って楽をしたい、でもGruntfile.jsが長くなりすぎて辛い、grunt taskが時間がかかりすぎて辛い、という話は話で分かります。また、それに対する色んな解決策もあります。 最近出た、HTML5Rocksで紹介されてたやり方もあるし、いくつか先人の知恵もあるので、解決していきましょう。 Gruntfile.jsが長くなりすぎて辛い時 https://github.com/firstandthird/load-grunt-configを使いましょう。 いろんなtipsを見てきましたが、このライブラリが一番分かりやすく、かつGruntfile.jsをメンテナブルに保つことができます。 load-grunt-configには3つの機能があります。 grunt pluginの自動ロード機能 grunt configのファイル分割
grunt-releaseでversionを上げられる男になろう - Qiita
弊社の大先輩、mashさんがpull-req送っていたのを偶然見て、 grunt-releaseというプラグインの存在を知りました。 dry run support by mash · Pull Request #29 · geddski/grunt-release これが、npmやbowerにがんがんライブラリを置いている自分には、 めちゃくちゃべんりでした! bowerでライブラリ公開するハードルを下げることにもなる、 と思うのでちょっと紹介してみます。 grunt-releaseとは geddski/grunt-release grunt-releaseは、git管理しているライブラリの versionアップ時の作業を自動化してくれる gruntプラグインです。 具体的には、 設定ファイルから、現在のversionを取得 次に使うべきversionを計算 (semver形式) そのv
grunt-init を使えば色々なプロジェクトのひな形の生成が簡単に
ここでいう色々なプロジェクトとは 次の項目を開発する際のパッケージのことです。(grunt公式から引用) grunt-init-commonjs Create a commonjs module, including Nodeunit unit tests. grunt-init-gruntfile Create a basic Gruntfile. grunt-init-gruntplugin Create a Grunt plugin, including Nodeunit unit tests. grunt-init-jquery Create a jQuery plugin, including QUnit unit tests. grunt-init-node Create a Node.js module, including Nodeunit unit tests. 例えば
JSTとか、プリコンパイラとか、プリコンパイルとか - Qiita
最近はJSでもテンプレート・エンジンが多く使われています。 そしてGruntのモジュールでもJSTのプリコンパイラというものが多く登場しています。 テンプレート・エンジンにはコンパイル・メソッド(または同様の機能)が実装されていますが、プリコンパイラとの違いとか使い分けの話です。 テンプレート・エンジンのコンパイル・メソッド まずは、underscore互換のlodash、jQueryで使えるJsRender、mustache互換のテンプレート・エンジンHandlebarsの、それぞれの挙動を見てみます。 lodash まずはlodashです。 _.templateメソッドにテンプレート文字列を入れて実行します。
[Grunt]grunt-contrib-jstでjsテンプレートを管理する。 | DevelopersIO
今回はCUIツールのGruntのプラグインgrunt-contrib-jstを使ったjsテンプレートを管理する機会があたので一連の流れをご紹介します。 アジェンダ JavaScript Templates(JST)とは? Grunt-contrib-jstを使ってみる JavaScript Templates(JST)とは? テンプレート部分とデータ部分を関連づけて表示するイメージです。以下の記事がイメージしやすくとても参考になりました。 参考記事:JavaScriptテンプレートエンジンJsRender 基本のキ それではJSTを用いて実際に表示してみたいと思います。今回はサンプルとして、Underscore.jsのテンプレートAPIを使って表示してみます。 使用したライブラリ jquery.js underscore.js backbone.js bootstrap.js bootst
![[Grunt]grunt-contrib-jstでjsテンプレートを管理する。 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/6b914c60b41b5cbac7441b87079e338e9114cdee/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F10%2Fgrunt.png)
Web Design Tips To Help You Succeed - Web Design
Understanding 해운대고구려 Facebook Marketing Works Having a really good해운대고구려 item may certainly not be actually a guarantee for excellent purchases. It’s achievable for you to possess wonderful service or products,… [더 보기] Just howCrucial 해운대룸싸롱 The Right Diabetes Mellitus Diet? There is actually해운대룸싸롱nothing more important than the best diabetes diet regimen. Diabetic issues is actually a major disea
Gruntfileの見本 | Grunt 日本語リファレンス | js STUDIO
下記の5つのプラグインを使用して、Gruntfileの見本を確認していきましょう。 grunt-contrib-uglify grunt-contrib-qunit grunt-contrib-concat grunt-contrib-jshint grunt-contrib-watch Gruntfileの全容はこのページの最下部にありますが、順を踏んで読み進めてください。 まずは、Gruntの設定を包み込む"wrapper"関数についてです。 module.exports = function(grunt) { } この中で、設定オブジェクトを初期化します。 grunt.initConfig({ }); 次に、プロジェクトの設定を、package.jsonファイルからpkgプロパティを通して参照できるようにします。 これによって、package.jsonファイルのプロパティ値をすぐに参
grunt-cliでgrunt-contrib-concatを使用して、全体を無名関数で囲ったファイルを出力する。
最近gruntを少しづつ使い出しています。 そこで、自動化の代表的なものである結合にチャレンジします。 ただ、JavaScriptは通常全体が無名関数で囲われている場合が多いと思います。jQueryを使っているのなら尚更。 例： ;(function($, undefined) { //code )(jQuery)); この形で結合してみたいと思います。 intro.jsとoutro.js頭が固いので、すぐには方法が思いつかずGoogle先生に質問。すると、そのままの質問がstack overflowに上がってました。 javascript - I’m trying out Grunt and need a simple way to concatenate my modules - Stack Overflow 要は、 {{intro.js}} ;(function( window, u
続Grunt + phantomjs + jasmineで自動テスト環境
目標はgrunt + phantomjs + jasmineの自動テスト環境 先日の大なごやJS Vol.3で、@_tk84さんが発表なさっていた、PhantomJSで自動テストにインスパイアされて、Gruntでそのあたりをコントロールできるようにしました。 今回のポイントは下記。 .coffeeを保存したら、.jsに自動でコンパイル .jsの更新を検知して、SpecRunner.htmlを自動生成 このとき更新された.jsと、対になるテストコードを含んだSpecRunner.htmlが生成される phantomjsで、SpecRunner.htmlを実行した結果を標準出力 出力をgrowlnotifyに渡してデスクトップ通知 @_tk84さんの元ネタのほうでは、EmacsとRubyな環境でしたが、自分はエディタには依存せず、nodeの実行環境だけで何とかできるように構成しました。 aho
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
