問題タブ [grunt-contrib-imagemin]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
grunt-contrib-imagemin - Grunt と Imagemin は画像を縮小しません
私は Grunt で Imagemin を使用しており、Gruntfile.js で次のタスクを設定しています。
「grunt imagemin」を実行すると、出力ファイルが dest フォルダーに保存されるため、機能しているように見えます。次のメッセージが表示されます。
しかし、画像が圧縮されていないのはなぜですか ("saved 0 B")。私はpngとjpgの両方で多くの異なるファイルを試しました。そして、それは常に 0 B です。
// マグナス
node.js - Windows 8.1 に grunt-contrib-imagemin をインストールできない
Windows 8.1 マシンに grunt-contrib-imagemin をインストールできません。
私は Node バージョン 0.10.33 を持っています。npm バージョン 1.4.28 を使用しています。どちらも新規インストールです。
このチュートリアルに従って、Laravel プロジェクトで SASS、JS、およびイメージを管理するように Grunt をセットアップしました。
grunt-contrib-sass、grunt-contrib-uglify を正常にインストールしてから、公式の GitHub ページにある次のコマンドを使用して、grunt-contrib-imagemin のインストールを試みました。
まず、奇妙な警告が表示されます。
だから、私のnpmが古くなっているのではないかと思ったので、何度もアンインストールして再インストールしました。
次に、エラーに関係なく動作するかどうかを確認するためにそのままにしておくことにしました。その後、次のことが起こります。
インストールできない理由がわかりません。職場の Windows 7 マシンで試してみたところ、同じ Node と NPM のインストールで問題なく動作しました。
node.js - Windows Server 2008 で npm install grunt-contrib-imagemin を続行できない
Windows Server 2008 で npm install を実行できません。動作がおかしいです。参照してください:
まず、ファイル C:\Users\TFSSERVICE\AppData\Roaming\npm-cache\cadb8e19-m-cache-lodash-2-4-1-Package-tgz.lock があります。c:\1 という短いパスに注意してください。次に、もう一度 npm install と入力すると、うまくいきます。
TFSService (コマンドを実行するユーザー) はローカル管理者です。CI サーバーによって実行されるため、一度に動作する必要があるため、時々完全なビルドが必要です。
プロジェクトは、yeoman の angular-generator によって生成されました。package.json ファイルは次のようになります。
grunt-contrib-imagemin を削除すると動作します
gruntjs - 複数の場所のイメージミンをうなり声を上げる
Grunts imagemin プラグインを追加しようとしていますが、1 つのディレクトリのみで作業したい場合は正常に動作しています。ただし、私は多言語サイトを持っているため、英語とフランス語の両方の画像用に別々の画像ディレクトリを持っています. このプラグインを適用して、両方のディレクトリを監視し、圧縮された画像を別の宛先に送信する方法はありますか?
現時点で標準実装として持っているものは次のとおりです。
また、「cwd」フィールドにフランスの場所を追加し、「dest」フィールドにフランスの目的地を追加する必要がありますが、これを既存のコードに追加する方法がわかりません。
ありがとう
angularjs - 動的イメージ ng-src が縮小されたイメージ名に変更されない
緑色のチェック マークと灰色のチェック マークの 2 つの画像があります。これらは、ユーザーがリスト内の項目をチェックまたはチェック解除すると、表示/非表示になります。私が抱えている問題は、アプリの画像をで縮小するとgrunt-contrib-imagemin
、これら2つの画像ng-src
が縮小された画像の名前に変更されないことです。なぜこれが起こるのか、それを修正する方法はありますか?
私のuseminタスク:
編集: @Tony Barnes ソリューションをテストすることにより:
スクリプトとスタイルの他の src 名は失敗します。つまり、ファイルvendors132918.js
がvendor.js
になり、ファイルが呼び出されないため、エラーsrc
がスローされます。ここで他のが失敗する原因は何ですか? 私が見る限り、パターンは画像のsrcを除いて何も変更すべきではありません..404 not found
vendor.js
src
build - grunt imagemin エラー: 致命的なエラー: EPIPE の書き込み
grunt dist を実行すると上記のエラーが発生します。他のマシンでは問題なく動作しました。私のグラントファイルを見つけてください。
$うなり声イメージミン。
"imagemin:png" (imagemin) タスクの実行 縮小された 132 枚の画像 (保存された 134.02 kB)
"imagemin:gif" (imagemin) タスクの実行
致命的なエラー: EPIPE の書き込み
gruntjs - すべての画像を最適化するにはどうすればよいですか?
診断する
最近見つけた : PageSpeed Insightsは、基本的にページ速度をテストし、スコアを吐き出し、ページが遅くなる原因を表示します。
URL を入力すると、ここに my : resultがあります。
問題
私は明らかに多くのスコアを持っていませんが、改善に取り組んでいます。
画像最適化の問題がたくさんありました。私は2つのことを試しました。__
1.ImageOptimソフトウェアを使用する
ImageOptim Mac ソフトウェアを使用して、img/
フォルダー内のすべての画像を最適化しようとしました。
2.grunt imagemin プラグインを使用する
img/
その上で、ビルド ツールを使用してフォルダー内のすべての画像を再圧縮し、圧縮した画像をフォルダーに保存しdist/img/
ます。
画像最小結果
幸いなことに、104 枚の画像がすべて縮小されました4.11MB
。
再検査結果
しかし悲しいことに、ページ全体を新しい画像ディレクトリに再リンクした後dist/img/
. PageSpeed Insightsでサイトを再度テストしましたが、同じ警告画像の最適化が表示されました。
この問題を修正/改善するにはどうすればよいですか? 設定optimizationLevel: 3
が低すぎたからでしょうか?
アプローチ/アイデア/戦略/より良い解決策/提案はありますか?
どうもありがとう !