CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
CSSプロパティをソートしてくれるgrunt-csscombについて紹介するよ - Qiita
csscomb/grunt-csscomb 今回紹介するgrunt-csscombはcsscomb.jsを使ってCSSのプロパティをソートしてくれるgrunt-pluginである。 ソートだって？CSSを並べ替えたからといってパースが速くなったりしないだろうに、なぜ並べ替えるんだ？そう思う方も多いはずだ。並べ替える理由は2つである。 コードの可読性 margin系のプロパティがセレクタブロック内であちらこちらに散在していたら多分発狂する。marginやpadding、borderはborder、背景関連は背景と似たようなプロパティは最低限まとめるべきだ。またプロパティの出てくる順番、例えばdisplya系やbox系プロパティは最初に書くといった具合に、各々ポリシーがあると思う。これらもcsscombで任意のルールで並べることで、統一することができ、複数人で開発したときも発狂することがない。
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 2013-03-14 / 2014-03-12 Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。 Grunt.jsとは？ Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。 コマンドプロンプトやターミナルなど、いわゆる「黒い画面」を使います。 Grunt.jsの現在のバージョンは0.4.1です。 バージョンが0.3から0.4になったことで、大きく仕様が変わりました。 Grunt.js v0.4ではgrunt-cliをインストールしてプロジェクトごとにGruntやプラグインをインストールして使用します。 プラグイ
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-contrib-watchでlivereload - Qiita
最近 grunt-contrib-watchにlivereload機能が追加されたっぽいのでそちらに切り替えてみた。 今までlivereloadするにはgrunt-regardeを使わなきゃいけないっぽかったけど grunt-regardeはcoffee scriptとかjshintとかでエラー起こすと監視自体がストップして しまっていたので微妙だと思っていたので非常にちょうど良かった。 （コマンド叩くときにオプションで--forceつければ解決できるけどね。。。） コード var path = require('path'); var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet; var folderMount = function folderMount(connect, poi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/hail2u/items/7bf2b830f2536c71666d
