[ツール/エディタ]grunt-ftpushを使って変更されたファイルをFTPで自動でアップロードする | Wood-Roots:blog
かれこれ何年も「テキストエディタで編集→FTPクライアントでアップロード」という流れでサイト制作をやってきましたが、さすがに前時代すぎると思いGruntを使いはじめました。 できることが多くあって色々やってみたいですが、まずは「編集されたファイルをアップロードする」という点だけの自動化を試してみました。 FTPでのアップロードについてはgrunt-ftp-deployを使用するケースが多いですが、grunt-ftpushというプラグインを使うと簡単に「更新したファイルのみ」をアップロードすることができます。 Gruntのプラグインページで「FTP」と検索するといろいろ出てくるので、もしかしたらftpush以外にも同じ機能のプラグインもあるかもしれません。 基本的な使い方はftp-deployとほぼ同じです。 Additionally it tries to intellectually u
![[ツール/エディタ]grunt-ftpushを使って変更されたファイルをFTPで自動でアップロードする | Wood-Roots:blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/87cdae924d908b3f692bbc8e19abb3746d40cf4f/height=288;version=1;width=512/https%3A%2F%2Fwood-roots.com%2Fwp-content%2Fuploads%2F2014%2F03%2Fa05ce7493bf111ce9cf4969ce7b619d8.jpg)
画像の最適化をCLIだけで行うgrunt-imageを作った
画像の最適化をCLIだけで行うgrunt-imageを作った Webにおける画像については以前記事にしたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私の業務は弊社サービスのパフォーマンス改善を業務。何がボトルネックになっているかは各プロジェクトでまちまちだが、共通しているのが 「とにかく画像が多い」 というところ。どのサービスもペイロードサイズの80%程を画像が占めている。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、これではCSSやJavaScriptのファイルサイズを減らしても本末転倒である（もちろんCSSもJavaScriptも結合と圧縮は非常に重要だけど！）。 各種最適化ツール ではどうやって画像を最適化するのか、という話になるが、GUIだと以下の3つが有名で優秀。 ImageAlpha: フリーソフト。24b
browserify を使い始めるためのファーストステップ 2013 冬
browserify は、ブラウザ JavaScript のためのコードを、Node スタイルのコード（Node 向けの JavaScript コードを書いているかのような形）で記述しておいて、ブラウザ上で利用できるような Javascript コードとして出力してくれるツール。 require() で利用しているモジュール群をすべてアナライズして、それらモジュールコードまですべて都合よい形で同梱してくれる。 リリース当初（３年くらい前）は Node で HTTP サーバを建ててブラウザ用 Javascript コードを返すような仕掛けから始まったはずで、そこから静的ファイルを出力する仕組みが追加されて、現在ではむしろ後者の方がメイン扱いになっている感じになっている。 そうなった背景として、Grunt の登場でその辺りの機能が有効的に参照利用できるようになったり、実際に Grunt を使っ
CSSスプライトを生成する「grunt-spritesmith」
CSSスプライトを生成する「grunt-spritesmith」 grunt-spritesmithはCSSスプライトを生成するGruntモジュールです。 Gruntの基本的な使い方は「Gruntで始めるWeb制作の自動化 - to-R」を参照に。 grunt-spritesmithのインストールは以下のコマンドです。 npm install grunt-spritesmith --save-dev Gruntfile.jsの内容は以下のようにします。srcで個別の画像を置くディレクトリを、destCSSで関連するCSSを書き出すファイル名(SassやLess、StylusでもOK)を、destImgで結合したスプライト画像のファイル名を指定します。 module.exports = function(grunt) { //グラントタスクの設定 grunt.initConfig({ spr
フロントエンド自動化ツールをまとめて理解する - ワザノバ | wazanova
http://www.youtube.com/watch?v=1OAfGm_cI6Y 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 GoogleのAddy OsmaniによるFuture of Web Appのキーノートスピーチです。 49分間 [Video]で下記の話題を全てまとめてます。フロント関連の便利ツールが一通り網羅されてます。おかげで、Yeoman (Yo/Grunt/Bower) の概要もすっきり理解できました。スライド（236枚）で確認されたい方はこちら。 Codekit Hammer Prepros Koala Mixture compass.app scout-app Yeoman / Grunt grunt-image: JPG/PNG/Gifを最適化して軽量化 grunt-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - sapegin/grunt-bower-concat: Bower components concatenator for Grunt