問題タブ [clean-css]

次の git を使用しています: less.js-windows。次のコマンドで clean-css をインストールしました。

今、これでlesscを実行しようとしています：

次のエラーが表示されます。

TypeError: Object # has no method 'install' at PluginManager.addPlugin (C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\less\lib\less\plugin-manager. js:28:12) PluginManager.addPlugins (C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\less\lib\less\plugin-manager.js:18: 18) Object.render (C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\less\lib\less\render.js:31:27) at C:\ Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\less\lib\less\render.js:18:24 at doResolve (C:\Users\oscar.polo\Downloads\less) .js-windows-v2.1.1\bin\node_modules\promise\lib\core.js:91:5) 新しい Promise (C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\) bin\node_modules\promise\lib\core.js:71:3) の Object.render (C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\less\lib\less\render.js:17:20) parseLessFile (C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\less\) bin\lessc:381:10) at evalmachine.:266:14 at C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\graceful-fs\graceful-fs.js :102:5

何が間違っているのですか？

これは、繰り返される質問であることに加えて、解決されていないようです。

これは私のフォルダ構造です：

縮小版は参照する必要があるが、どのようsrc/styles/style.cssに参照するかに注意してくださいurl(../images/image.png)build/style.min.cssurl(images/image.png)

cssmin または clean-css のオプションのどの組み合わせでこれを達成できますか?

私の現在の構成:

Rails の ERB、JS、CSS 全体でクラス名と ID をマングルするにはどうすればよいですか? Chrome 開発ツールで Facebook や Google を開くたびに.201g、.1ayx、c3agなどのランダムなクラス名が大量に表示されます。

基本的な JS マングリングにはUglifierを、CSS のミニフィケーションにはruby​​-clean-cssを既に使用しています。

以下を提供する Gulp で使用するプラグイン チェーンを探しています。

• ソースマップのサポート
• 以下
• 縮小化
• 連結
• 再配置/連結に対処するための URL 置換 (リベース)

現在、最初の 4 つを持っていますが、最後の (URL リベース) も提供する既存のプラグインの組み合わせが見つかりません。ソースマップを発行する URL リベース プラグインは見つかりませんでした。

明確にするために、私の問題は、プロジェクト開発フォルダーから複数の小さな CSS ファイルをコンパイルし、それらを共通のフォルダーに出力すると、連結による移動により、背景画像などの相対 URL が壊れることです。

編集:

私が現在使用しているツール チェーンは、すでにこの問題を解決することを意図しているようです。だから、それが表向きの答えです。しかし、それは別の問題を提起します。それは、必要な構文がどのように機能するはずなのかということです。

その質問には、理論的には多くの重複があります。

• clean-css #152: 機能のリベースが非常にイライラする
• clean-css #195: rootWindows のオプション
• clean-css #263: relativeTo オプションを異なるパスの CSS ファイルで動作させる方法
• http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
• cssmin が相対 URI をリベースしていますか?

残念ながら、実際に構文を説明する答えはありません。ブードゥーを示しているだけです。そのため、以下が機能しない理由がわかりません。解決できる場合は、ここに戻って、このツール チェーンが実際に必要なことを行っていることを示すために、承認済みのフラグを立てます。

ソース ファイル:

一気飲みタスク:

壊れた URL を含む出力。複数の欠陥に注意してください。CSS は、必要なアセットに関連するディレクトリ レベルを上げていますが、追加の親ディレクトリが追加されています (!)。また、URL の 1 つで、ハード アセット フォルダー名が変更されています (!)。非常に奇妙な：

ブードゥー教を続けて申し訳ありませんが、これが私の作業用のgulpパイプです：

そして正しい出力：

私たちは、 webpackを使用して JS および CSS アセットをバンドルするアプリケーションで este.js 開発スタックを使用しています。Webpackはwebpack.optimize.UglifyJsPlugin、本番環境用にビルドするときに使用するように構成されておりstylus-loader、本番環境用の正確なローダー構成です。以下のとおりであります：

次に、3 つの styl ファイルがあります。

プロダクション ビルドの後、両方のキーフレーム アニメーションの名前が に変更されa(おそらく による CSS 縮小) 、同じ名前で縮小後の優先度が高いため、オーバーライドcss-cleanを推測できます。fadeInarrowBounce

ファイルはcomponents/component1.styl、次のステートメントを使用components/component2.stylして React コンポーネント ファイルに含まれています。[name].react.js

私は気が狂います。多くの異なる解決策を試しましたが、実際に機能するものはありませんでした。

そのため、現在の Gulp セットアップが Google フォントなどのリモート フォントをインポートしていないことに気付きました。私のmain.scssファイルには次のものがあります。

縮小してコンパイルすると、次のようになります。

私gulp-minify-cssはclean-cssを使用するものを使用しています。リモートインポートを正しく機能させるために何かしなければならないことがあることは知っていますが、ドキュメントを読むと、答えよりも多くの質問が残りました。これは、Sass/CSS の縮小を処理する私の gulp ファイルのセクションです。

どんな助けでも大歓迎です！ありがとう。

コードを縮小しようとしていますが、clean-css を実行すると常にこのエラーが発生します。

コメント行を削除するなどのさまざまな投稿を読みましたが、すべてうまくいきませんでした。

誰でもこの問題を解決するための他のアイデアや方法を持っています

次の「コンテンツ」フォルダー構造で cssmin を使用しています。

ここで、styles.min.css と styles.min.css.map は、「src」フォルダー内のすべてのスタイルシートを連結/縮小した結果です。

私は最初に、styles.min.css に画像の URL が間違った場所 (つまり、「../src/dir1/images/image1.png」ではなく「images/image1.png」) に含まれているという問題がありましたが、ありがたいことに、この面倒な構成は修正されました。それ：

新しい問題:生成されたソースマップ ("styles.min.css.map") には、["content/src/dir1/style1.css", "content/src/dir2/style2.css"] のようなソースが含まれています。 ["../src/dir1/style1.css", "../src/dir2/style2.css"]. これは、マップが次のような間違った場所を指していることを意味します。

「content/dist/content/src/dir1/style1.css」および「content/dist/content/src/dir2/style2.css」

これを解決するにはどうすればよいですか?

参考までに、csswring も試しましたが、ソースマップは正常に動作しているにもかかわらず、一般的なイメージ/インポート URL のリベースが適切に機能していないことが判明したため、cssmin に戻りました。

どうもありがとう！