[B! Grunt][grunt] skyriserのブックマーク

Yeoman入門(第一部、yoを使う) - from scratch

※ 追記： id:TokyoIncidents さん"補足"の誤字修正しました、ありがとうございます!! これからYeomanに関して説明していきます。 Yeoman自体が何者なのかよくわかっていない人も多いと思います。また、ある程度Yeomanの概要は知っているので、generatorの作り方が知りたい、という方もいると思います。今回は三部構成で、yeomanを使う話、yeomanのgeneratorを作る話、最後にyeomanのAPIに関して説明していきます。今回は第一部のyeomanを使う話について説明します。 Yeomanとは Google社が作成した総合開発ツール群です、「ヨーマン」と呼びます。公式サイトには MODERN WORKFLOWS FOR MODERN WEBAPPS (モダンWEBアプリケーションのためのモダンワークフロー) と記述されています。 Yeomanを使う

skyriser 2014/08/22

リンク

GruntでSass/Compassのコンパイル+ブラウザ自動リロード+JSの結合&圧縮

前回から多少Grunt分かってきたので、今度はJavaScriptの結合と圧縮も加えてやってみる。前回書いたことは省略するので、よく分からんという方はそっちから見て下さいなにやりたいかSass/Compassのコンパイルファイル更新時にブラウザの自動リロードJavaScriptの結合結合したJavaScriptの圧縮package.json{ "name": "test", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-connect": "*", "grunt-open": "*", "grunt-contrib-watch": "*", "grunt-contrib-compass": "*", "grunt-contrib-concat": "*", "grunt-contrib

skyriser 2014/08/20

リンク

[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（

skyriser 2014/07/01

ECT
Grunt

リンク

Grunt.js :: ECTを使ってHTMLの量産を効率化する | MONSTER DIVE

先週、Grunt.jsについて先日こちらの記事で紹介しました。今回はECTというJavaScriptを使用したテンプレートエンジンを使ってファイルを生成する、CMSのような仕組みの例を紹介します。ウェブ制作していると、「ページレイアウトは似てるんだけど、画像や文言はExcelの原稿をコピペしながら...」と、大量なHTMLを生成しないといけないとき、ありますよね？キャンペーンや短期間のサイト運用では、Movable TypeなどのCMSの導入までは求められなかったり。そんなときに制作サイドで準備出来る、運用効率化の手法です。導入はこちらの記事を参考にさせていただきました。 ECTの別な使い方についても書いておりますので、こちらも参考になればと思います。今回やりたいこと CMSの導入規模ではなく、同じフォーマットのHTMLが大量にページがある。 HTMLを触らなくても、簡単に更新