![【Gruntの設定】Sassファイル複数対応、ブラウザの自動更新、これでコーディングがよりスムーズに!](https://cdn-ak-scissors.b.st-hatena.com/image/square/d96963259b17b3b940d1f9fc84422ed0e3a79646/height=288;version=1;width=512/https%3A%2F%2Ftsudoi.org%2Fog-tsudoi.jpg)
grunt.event.on('watch', fn)で「watch」イベントを監視し、変更したファイルを取得することができる。 イベントハンドラでは変更ファイルのパスが取得できるので、 それを使用してconfigを書き換えて、変更ファイルのみにタスクを実行させる、ということができる。 ※jshintの他にもsassやcoffeescript等のコンパイルに利用できそう。 grunt-contrib-watchのconfigでnospawn: trueにしないとイベントハンドラによるconfig書き換えが反映されない。 grunt.initConfig({ watch: { scripts: { files: ['lib/*.js'], tasks: ['jshint'], }, options: { nospawn: true } }, jshint: { all: ['lib/*.js
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
[grunt] ファイル保存したタイミングで、ブラウザを自動的にリロードして、確認作業をスピードアップさせよう こんにちは、@yoheiMuneです。 HTMLやCSSやJSなどのフロントエンド開発を効率的に行いたい。そんな目標のもと、今回はgruntJSを使ってファイル保存したタイミングで、自動でブラウザリロードしてソースの変更内容を即座に確認する方法をブログに書きたいと思います! ※2014/02/05更新 grunt-regardeではなくgrunt-contrib-watchでも出来るようになったので、記載を修正しました。 gruntJSのセットアップ gruntJSは、 CSSプリプロセッサのコンパイル、JSファイルの結合などフロントエンドの開発で行うビルド作業を行うためのツールです。 まずはgruntjsが使えるようにセットアップを行います。 nodeとnpmを利用しますので、
落書きしていっちばん楽しいのはマンガやアニメの顔だよね。楽しいよね~ え、授業中にマンガキャラの落書きなんてしているの? なんという不真面目な・・・ったく。。。 もっとやりなさい。私は中学生の頃「中村は授業中、こんなものを描いとる」とみんなにさらし者にされたぞ。死ぬ程恥ずかしかったぞ。その覚悟はあるのか!! みんな覚悟して落書きしよう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く