grunt-task-helperというGruntプラグインを使っている。ざっと言うとsrcとdestを比較してフィルターをかけた結果を他のタスクで使えるようになったりするもの。例えばビルトインの比較機能であるnewFileを使うと、更新されたファイルがあった場合にだけ走るタスクと似たようなものが簡単に作れる。 grunt-contrib-concatを使っているとして、そのタスク設定が以下のようになっているとする。 concat: { options: { seperator: ';' }, prettify: { src: [ 'scripts/prettify/prettify.js', 'scripts/prettify/lang-config.js', 'scripts/prettify/lang-css.js', 'scripts/prettify/lang-scss.js',
最近自分の周りを見ると、フロントエンドの開発ツールといえばGruntをみんな使ってるんだけど、Middlemanを使うのもけっこういいんじゃないかと思ったので比較してみる。 実現したいこと 例えば次のようなものをつくりたいとする。HTMLは数ページ〜十数ページくらい(ヘッダ・フッタくらいは共通化したい) JSはconcatしてminifyしたいCSSはSassを使いたい 開発時はwatchしたり動的サーバーなりでJSやCSSは動的にビルドしたい 最終的には成果物として静的ファイルを出力したい まあ、フロントエンドの開発ではいたって普通な要件だと思う。普段サーバーサイドの開発してたり、サーバーサイドと一緒にフロントエンドも開発してる人にとっては、静的ファイルだけ成果物としてあればいいとかあるの?と思うかもしれないけど自分の周りではけっこうよくある。 Gruntとの比較について このような
Gruntで始めるWeb制作の自動化 Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 インストール まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインストールが可能です。 次にMacではターミナルを開いてgrunt-cliをインストールしましょう。cliとはCommon Language Infrastructureの略でコマンドラインからGruntを利用するためのツールです。sudo npm install -g grunt-cli パスワードが聞かれるので入力してください。成功すればgrunt-cliのイ
昨日の続き。 こういうアプリケーションのテンプレートを管理するのに便利な仕組みはないですかねーと言っていたら @teppeis さんや @omo2009 さんに Grunt や Yeoman はどうかと教えてもらった。 Grunt はユースケースとしてはJavaScript の連結や圧縮、SCSS/LESS なんかのメタ言語のコンパイルをするときに使うもの、つまり rake なんかと同じようなものと以前にチラ見した程度で知った気になっていたけども、ちょっと違っていた。Grunt は確かにタスクランナーではあるのだが、Node.js で実装している利点を十分に活かして、任意のファイルが更新されたのをトリガに一連のタスクを実行させたり、Grunt で Webサーバーを立ち上げて他のタスクと連携させたりといったことができるようになっている。プラグインの仕組みがあって、エコシステム的に結構活発に

bashの補完は公式で提供されていたが、gruntのzsh補完がなかったので作った。 私が存在を知らないだけかもしれないので、知ってる方がいたら教えてください。 (zsh-completions と oh-my-zsh にはなかった。1つだけgithubにあったけど微妙だった。) ちなみに公式のbash補完は、以下の設定を .bashrc などに記述すれば使用出来ます。 eval "$(grunt --completion=bash)" zsh補完イメージ インストール方法Githubに置いてあるのでとってきて下さい。 yonchu/grunt-zsh-completion ·GitHub $ git clone git://github.com/yonchu/grunt-zsh-completion.git or $ wget https://github.com/yonchu/gr

1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く