[B! grunt] ohmuroのブックマーク

node_modules を別の場所に置く | tech - 氾濫原

CI とかで、あるディレクトリが毎回削除されて作りなおされ、そのディレクトリに package.json がある場合、毎回 npm install をすると大変非効率なので、別のディレクトリに node_modules ディレクトリを置いてそれを指定して使いたい。しかし package.json に書かれた依存はそのディレクトリの node_modules ディレクトリにしか置けないようなので、以下のようにした。任意の場所に node_modules ディレクトリをつくる npm install する前に、package.json があるディレクトリに ln -sf で、上記で作った node_modules ディレクトリへ symlink を貼る npm install するこれで、インストール済みモジュールはそのまま使われるようになり、毎回 npm install で何もかもが

ohmuro 2014/06/16

grunt

リンク

早く家へ帰るための Grunt入門 ［＋gulp紹介］

4. Why use a task runner? In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it, a task runner can do most of that mundane work for you—and your team—with basically zero eﬀort.

ohmuro 2014/05/22

grunt

リンク

Gruntで開発用と公開用のディレクトリを分ける

前々回前回Grunt、相変わらずちょいちょい弄って便利になるようにやってる。触り甲斐があって面白い。今回は、開発用と公開用でディレクトリを分けるっていうのをやります参考にさせていただきましたGruntで効率化！リリース前の面倒な作業をまとめる | MONSTER DIVE【モンスターダイブ】grunt.js - grunt-contrib-connectでのルートフォルダ指定 - Qiita [キータ]ほぼ上記お二人の書き方丸パクリです!!!すみません!!!!ありがとうございます!!!!! この2記事と前回前々回とやって来たものを組み合わせた感じになっている。やりたいこと開発時フォルダ監視Sass/Compassのコンパイルファイル保存時にブラウザを自動リロード公開時公開用ディレクトリにファイルをコピーHTMLのminifyCSSのプロパティを整理CSSのMedia Queries

ohmuro 2014/05/11

grunt

リンク

grunt.js0.4.0でJSとCompassをコンパイルする - 車輪を再発明 / koba04の日記

Backbone.jsなどを使っていてjsのファイルが増えてくると、公開するときには1つのファイルにまとめたいなぁとか、コーディングスタイルのチェックもしたいなぁと思っていて、そこで何かいいのないかなと思って調べてみると、「grunt.js」がよさそうだったので今更ながら試してみました。 grunt.jsのバージョンは0.4.0です grunt.jsはバージョンによってインターフェイスが違ったりするので注意。今回は、JSに対してJSHintをやって結合して圧縮することと、Compassのコンパイルをgrunt.jsにやってもらうことにしました。（他にもテストや自分で作ったタスクを登録できたりもするのですが今回は省略）インストール https://github.com/gruntjs/grunt/wiki/Getting-started ドキュメントにも書いてあるのですが、0.4.0か

ohmuro 2014/04/22

grunt

リンク

Web デザイナーさん向け Grunt を使ったコーディング作業の効率化、はじめの一歩 | WWW WATCH

フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？という入門的な解説記事を書いてみました。この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」とか「使ってみたいけどよくわからない......」なんていう Web デザイナー（主に HTML や CSS を書くフロントエンドな人）さん向けに、初めて

ohmuro 2014/04/18

grunt

リンク

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 └

ohmuro 2014/04/15

grunt

リンク

gruntを使ってCSS/JS周りを自動化するのが、なうでペヤングらしいので使ってみた - 鳥さんの独り言

やほほ。はてなダイアリーの使いづらいインタフェースなんとかしてくれって思ってる鳥さんだ。さて、gruntっていうnode.jsを使うと、CSSやJavaScript周りを色々と自動化できると聞いて、使ってみたよ。 gruntでできること「grunt watch」で監視しておくと、上書き保存した際に自動的に色んなことをしてくれるんだ。例えば・・・ファイルの結合 JavaScriptファイルのバリデーション JavaScriptファイルの軽量化（圧縮、minify）機能を追加すれが、こんなこともできるようになるよ。（他にも探せばあるかも） CoffeeScriptファイルのコンパイル Lessファイルのコンパイル CSSファイルの圧縮 CSSファイルのバリデーション gruntの導入さて、環境を構築しよ〜。まず、node.jsのインストールと、node.jsのパッケージ管理システムnp

ohmuro 2014/04/07

grunt

リンク

Grunt で livereload 環境を作ったお話。 - ゆず日記

Grunt を使うようになって早数ヶ月。ガリガリ弄るってことはないのですが、何気なく使う機会は多いのでちょっと纏め。 Gruntの要約 3行で纏めると、 node.js で動作するタスク実行ツール livereload や jshint, minify, less, Sass 生成とかを自動実行できる設定は Gruntfile.js に記述する諸々全部入りで書こうとすると、何がなんだか分からない & 自分も全部理解していない為、まずは livereload (ファイル変更時にブラウザが自動リロードしてくれる) 環境の構築だけ纏める。準備 node.js, npmのインストール node.js からインストール。 node.js の複数バージョン管理をするのであれば、nodebrew とか nvm とかから入れる。 npm (node.jsのパッケージ管理ツール)は、node.js

ohmuro 2014/04/07

grunt

リンク

[grunt] ファイル保存したタイミングで、ブラウザを自動的にリロードして、確認作業をスピードアップさせよう - YoheiM .NET

[grunt] ファイル保存したタイミングで、ブラウザを自動的にリロードして、確認作業をスピードアップさせようこんにちは、@yoheiMuneです。 HTMLやCSSやJSなどのフロントエンド開発を効率的に行いたい。そんな目標のもと、今回はgruntJSを使ってファイル保存したタイミングで、自動でブラウザリロードしてソースの変更内容を即座に確認する方法をブログに書きたいと思います！ ※2014/02/05更新 grunt-regardeではなくgrunt-contrib-watchでも出来るようになったので、記載を修正しました。 gruntJSのセットアップ gruntJSは、 CSSプリプロセッサのコンパイル、JSファイルの結合などフロントエンドの開発で行うビルド作業を行うためのツールです。まずはgruntjsが使えるようにセットアップを行います。 nodeとnpmを利用しますので、