Grunt × SCSS × Compass × StyleDocco（開発環境構築メモ） - Qiita
$ mkdir -p ~/develop/grunt $ cd ~/develop/grunt # compassプロジェクトを作成します。 $ compass create grunt-test # stylesheetsというディレクトリーが生成されますが、今回は不要なので削除します。 $ rm -R grunt-test/stylesheets # sassというディレクトリーが生成されますが、今回はscssなのでリネームします。 $ mv grunt-test/sass grunt-test/scss http_path = "/" # SCSS(Sass)ファイルの置き場所 sass_dir = "scss" # コンパイルのCSSファイルの置き場所 css_dir = (environment == :production) ? "assets/css" : "docs/css
自分用のgruntタスクメモ
前にgruntの使い方を書きましたが、それからいろいろ試してみて自分なりのタスクを作成しました。 まだあまり使い倒してないのでまだまだ変更するところがあると思いますが、これを元に変えていきます。 2種類用意しました がっつり機能を使いたい時もあれば、ちょこっとだけ使えればいいかなっていうことが個人的にあったので2種類用意してみました。 制作フォルダで制作後、最終的にJSやCSSを圧縮し、確認・納品フォルダへ必要ファイルを全コピーする 制作フォルダにはscssファイルのみ置き、HTMLやJSは確認・納品フォルダにのみ置いておく 1.がっつりタイプ こちらは先程も書いたように、「制作フォルダで制作後、最終的にJSやCSSを圧縮し、確認・納品フォルダへ必要ファイルを全コピーする」ということをやります。 使用gruntプラグイン grunt-contrib-watch grunt-contrib-
Grunt & Compass: Environment の指定を Grunt 側に持たせてみる :: log.chocolateboard
Grunt & Compass: Environment の指定を Grunt 側に持たせてみる Compass の出力設定を納品版と開発版で振り分けてコンパイルしてきたのですが、『コメントなし 1行 CSS』と『コメント付き CSS』を別場所に同時にコンパイルしたくなったので Environment の指定を Grunt 側に持たせてみることにしました。 IndexCompass で納品版と開発版の出力設定を振り分けるGrunt で Sass & Compass をコンパイルする準備Environment の指定を Grunt 側に持たせるGrunt で納品版と開発版を別場所に同時にコンパイルいつもの config.rbCompass の出力設定を納品版と開発版で振り分けるCompass を使う時に config.rb 内で納品版と開発版の出力設定を振り分ける記述をすることがあります。例
【個人メモ】bespoke.jsを使ってプレゼン資料を作成する - Qiita
なんだこのプレゼンは？ と思ったプレゼンをネット上で見かけた。 Build Warsへのリンク JavaScriptのプロダクトをうまい具合にビルドするためのツール、 Gruntとglupを比較したプレゼンだ。 gifアニメが多用されてるし、オサレでカッコイイ。 何使ってこのプレゼン作ってるんだ！？と思って調べてみたら、 このプレゼンの作者が自分で作っていた。 bespoke.jsというアプリだった。 bespoke.jsというプレゼンアプリを早速使ってみたい。 セットアップや、プレゼンのスケルトン作成って めんどくさいのかなと思ったんだけど、yeomanを利用して テンプレを作成する形になってて、 プレゼン作成準備に必要な手間は少ししかなかった。 bespoke.jsを使うまで bespoke.jsをセットアップするのに必要なツールは以下の通り。 node.js yeoman Mac O
[Grunt]grunt-ectを使ってらくちんHTML生成 | Clipping!
コーディング中に繰り返す共通部分の修正＆コピペが地味につらかったので、自動でコンパイルしてもらうことにしました。 ECTというテンプレートエンジンを使って、Gruntでコンパイルする体でまとめます。 ちなみに、Grunt自体の導入・設定は下記のサイトでわかりやすく紹介されています。 （導入時に大変お世話になりました） Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 - KOJIKA17 Gruntで快適な環境を整備したい！【インストール編】 - riaxdnp.jp ECTとは？ ECT - Fastest JavaScript template engine with embedded CoffeeScript syntax JavaScriptのテンプレートエンジンです。 下記のようなことができます。 Inheritance（内容の継承） Partials（
![[Grunt]grunt-ectを使ってらくちんHTML生成 | Clipping!](https://cdn-ak-scissors.b.st-hatena.com/image/square/da65d117c475bc4df6bf503cddfcd7f0ed7c92dd/height=288;version=1;width=512/http%3A%2F%2Fnaoi109.github.io%2Fimages%2Fthumb%2F02.png)
Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて
Node.js と grunt をインストールする « shilog
いろんなタスクを自動化させる grunt っていう便利なツールのことを知ったので、その導入まで。 環境はMac OS 10.7.5。 node.js をインストールする grunt を使うためには node.js が必要。 インストールするには node.js のサイト から、トップページにある『INSTALL』をクリックしてインストーラ（パッケージファイル）をダウンロードする。 あとはパッケージファイルをダブルクリックして開いて、画面の指示にしたがってインストールを進めていくだけ。インストールが完了したら terminal.app を起動して node -v と入力してバージョンを確認してみる。うまいことバージョンが表示されたら無事インストール完了。 続いて grunt をインストール。サイト に書いてあるように npm install -g grunt と terminal.app
Gruntfile.js が長すぎてつらい人は gulp を使ってみよう - Qiita
Gruntfile.js は常々長すぎると思っていました。複数ファイルに分割しようが長いものは長いです。 最近、後発の gulp というものを見つけて使ってみていますが、いい感じです。 設定ファイルが短く書ける上に、速いです。 先日 Grunt 入門の記事「Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩」を読んで、例の Gruntfile.js と同等の内容を gulp で書いたらどうなるかなと思って書いてみました。 サンプルファイル含めたプロジェクト全体 gulpfile.js だけ 67 行から 29 行に。約半減です。また、短くなっただけではなく、処理の流れがわかりやすくなっていると思います。 var gulp = require('gulp'); var concat = require('gulp-concat'); var prefix
HTML5 Conference 2013:今どきのGruntを使ったフロントエンド開発（HTML/CSS編）
modern-development-workflow-with-grunt.md 今どきのGruntを使ったフロントエンド開発（HTML/CSS編） — MOL SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 @t32k Why use Grunt? Grunt: The JavaScript Task Runner GUI Apps CodeKit — THE Mac App For Web Develo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
re-dzine.net situs togel online toto 2023 -