タグ

cssとnode.jsに関するluccafortのブックマーク (3)

  • Gruntを使ってプロジェクトを自動化する、Myタスクメモ | tipsBear

    Gruntで出来ることはたくさんありますが、今回ご紹介するのは私がよく使うGruntの設定のメモになります。 ちなみに、Gruntの導入方法や基的な解説は下記の記事がとてもわかりやすく紹介してくれていますので、これから導入したいという方がいましたら是非参考にどうぞ。 Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 – Web Design KOJIKA17 コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順 – OZPAの表4 今更だけどやるgrunt入門編・インストールから基的な使い方 – WEB Drawer Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 – WWW WATCH また、この記事はSass/Compass、ブラウザのliveReloadを使用することを前提に書いてい

    Gruntを使ってプロジェクトを自動化する、Myタスクメモ | tipsBear
    luccafort
    luccafort 2014/03/12
    さらっと見た感じわかりやすそうだったので後で読む。
  • ブラックなWeb開発現場の救世主、Gruntのインストールと使い方

    連載目次 一昔前であれば、HTMLJavaScriptCSSを使用してWebアプリを作成する場合、(筆者の経験では)所定の位置にファイルを置くだけでした。最近はHTMLJavaScriptCSS関連の技術も複雑化/多様化し、いろいろなことを考慮しなければなりません。 例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。 minify(圧縮)や結合 単体テストの実行 JSLint(構文チェック)の実行 さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル(JavaScript変換)を行う必要もあります。 また、SCSS(Sass)やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル(CSS変換)作業が必要です。 ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう

    ブラックなWeb開発現場の救世主、Gruntのインストールと使い方
  • CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞

    CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために

  • 1