gulpfileをES6に置き換える必要があり、何気にgulpの情報追っていると、 そろそろv4.0がリリースされそうなのでざっくりと眺めてみた。 gulpfileをES6で書くまず、本来の目的だったこの件、v3.9ですでに対応されていた。 以下の条件であれば利用可能のようだった。 gulp v3.9以上 gulpfile.jsをgulpfile.babel.jsとする babel-core をインストールすること 内部的にはbabelで変換しているようだ。 続いて、v4.0のCAHNGELOGも眺めてみた。 gulp4.0をインストール cliの変更点--tasks-json と --verify オプションが追加されてる。 –task-json はタスクをjson形式で出力する。 –verify はpluginsがpackage.jsonを参照しているかチェックする。 APIの変更点大

ここ最近CSSを扱うことが多かったので、その際にPostprocessorを検討時にcssnextについてまとめた備忘録。 JavaScriptの最近の事情javascriptではES6でコードを書き、BabelでTransplieするという流れが定着しつつある。 これは、これまで必要だったライブラリが不要になり、コードが依存するライブラリを減らすことができ、altJSに頼らないで開発できるという利点からである。 同じことがCSSでも起きている。まずこれまでCSSを牽引してきたSassについて。 Sassの問題点最近のCSSの開発にはaltCSSとしてSass,Less,StylusなどのPreprocessorが使用されている。 特にSassはJavaScriptで言う所のjQueryに近い存在になり、APIもやや複雑になっている感じがある。 Sassを使っていても実際はそのほんの一部の

ApacheやPHPはhomebrewのFormulaでは管理されてないのですが、Homebrewに新たに追加されたtapコマンド使うことで任意のFormulaを追加できるらしい。 ちなみにtapが使えないときはbrewのupdateが必要。 続いてhttpd.confの設定 /usr/local/Cellar/httpd/2.2.22/etc/apache2/httpd.conf の 155行目付近 # ServerName gives the name and port that the server uses to identify itself. # This can often be determined automatically, but we recommend you specify # it explicitly to prevent problems during s

npmモジュールのアップデートにnpm-check-updatesを使うと便利だったのでメモ。 インストール アップデートのチェック プロジェクトのpackage.jsonに依存したモジュールをアップデート グローバルのモジュールをアップデート おまけに、package.jsonについても “0.4.x” => “0.5.x” のようなセマンティックバージョンや 0.3.0 => > 0.4.0 のようにバージョン追従規則なども保持したままいい感じに自動的に更新してくれる。 CIなどで定期実行してやると良さそう。

CSON(CoffeeScript-Object-Notation)やJSON5(JSON for ES5)を使うと、コメントなど使えて便利そうだった。 CoffeeScript形式のjsonであるCSONやECMAScript5の拡張機能をもつJSONのJSON5を使うと、JSON内にコメントなどがつかえて便利そう。 READMEにあるとおり、 CSONの場合は次のようなcsonファイルについて jsまたはcoffeeで以下のような処理をすると のようにパースできる。 ちなみにcsonからjsonやjsonからcsonへのコンバートもできる JSON5については 次のようなjson5ファイルについて jsで以下のような処理をすると のようにパースできる。 両方ともサーバー側でjsonにparseして配信するほか、Browserifyを使ってクライアント側でparseすることもできる。 p

JavaScriptやJSONでCSSを書ける、というよりもCSS Preprocessorに近い感じのJSライブラリ AbsurdJS を試してみた。 AbsurdJSはサーバー、クライアントの両方で使用できる。 ビルドツールとしてGrunt-absurdが提供されているのでこれを使って試してみる。 Gruntの設定する。以下のようにした。 最終的に１つのファイルにまとめるためにコンパイルが必要とのことなので、import.jsというファイルをmanifestにした。 インポートの順序はcssと同じく、overwriteされるので重要。 ノーマル 疑似要素 ネストネスト記述もほかのpreprocessorと同じく利用可能 変数・関数 mixin pluginmixinににているけど、property - value のペアを定義 media-query rawデータ json、cssファ

Sass3.3 がそろそろリリースっぽいので、追加機能・変更点についてうまくまとまった記事があったので、学んでみた。 ちなみに、変更点はこちら 実際に動作を確認するにはpreバージョンのsassをインストールします。 [shell] gem install sass –pre sass –watch source_dir:output_dir [/shell] で確認できます。 ＆セレクタに関連する構文の改善たとえば、以下のようにした場合 [ruby] $module: ".module"; #{$module}–element { #{$module}__child { //valid color:orange; } & #{$module}__child { // valid color:orange; } #{$module}__parent & { // valid

スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon