Gruntを使ってSass(SCSS) / Compassをコンパイルしてみる | MONSTER DIVE
今回は、Gruntを使ってSassをコンパイルしてみます。Gruntのインストールについては、こちらの記事で紹介してくれてるのこちらをご覧ください。Sassの記法には、SCSS記法とSASS記法の2種類がありますが、今回はSCSS記法のみ対応になります。 ※Sass・Compassはインストールされているものとします。 Gruntで処理したいこと Gruntには、SassとCompassをコンパイルする以外にも様々な便利機能があります。 今回、下記の機能も使ってみたいと思います。 Sassファイルをコンパイルする livereloadでSassファイルが更新されたらブラウザをリロードさせる バラバラに記述されたメディアクエリをまとめる CSSのプロパティの順番を揃える フォルダ構成 フォルダ構成については下記の通りです。 project ├css (CSSの出力先) ├sass │└sty
GruntでSass/Compassのコンパイル+ブラウザ自動リロード
なんか最近みんなGrunt使い出してて便利便利言ってるので僕も使ってみた。 なにやりたいかCompassのコンパイルファイル更新時にブラウザの自動リロード他にもやりたいけど、今日使い始めたのでまずは上記だけ出来るようにする。 インストールとかkojikaさんのこの記事見ると一発で分かる。ありがとうございます!!! ブラウザに拡張機能インストールする LiveReload用の拡張機能をインストールする。とりあえずChrome用はこれ。 ファイル階層ファイル階層、以下のような感じを想定する。ブラケットで囲ってるのはフォルダ。 [project] ├[files] │ ├[_scss] │ │ ├_*.scss │ │ └style.scss │ ├[js] │ ├index.html │ └style.css ├[node_modules] ├config.rb ├Gruntfile.js └
コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順
なんだか、Web制作の際に起こる様々な面倒くさいタスクを自動化してくれるGruntというツールがあるらしく、私の周りのWebデザイナーさんやコーダーさんがこぞって導入されておりました。 はじめは「へぇ…あちきは別に興味ないからいいでありんすよ」と指をくわえて傍観していたのですが、便利便利の声を聞くにつれやっぱり羨ましくなってきました。だから導入した。使った。良かった。 そんな訳で今回は、Grunt.jsの導入から簡単な使い方までを紹介したいと思います。私のような黒い画面に抵抗を持っている初心者の方でも導入できるよう、コピペさえ出来ればGruntが使えるようになる記事にしてあるつもりです。 なお、今回導入した私のPC環境はOS X 10.9.1です。Windowsでの導入手順は今更だけどやるgrunt入門編・インストールから基本的な使い方｜WEB Drawerをご覧下さい。 Gruntで何が
Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
