問題タブ [gulp-sass]

Google の Web Starter Kit を使用して、新しい Web サイトのテーマを作成しました。以前は、Grunt を使用していました。このキットにはGulpが付属しているので、試してみることにしました。

私が抱えている問題は、livereload とインポートされた scss ファイルにあります。キットには、components.scss ファイルといくつかのインポートされたパーシャルを含むセットアップが含まれています (たとえば@import "_pages/_styleguide";、これはパーシャルを正常にインポートしますが、gulp タスクを再起動しない限り、_pages/_styleguide.scss への変更は更新されません。ただし、scss への変更はすべてインポートされていない (代わりに gulp タスクに含まれている) ファイルは、再コンパイルされ、livereload で更新されます。

gulp ファイルは次のとおりです。

私は、sass と susy2 gem のみを使用した非常に単純な gulp ベースのテスト環境を持っています。

私が得ているエラーは

問題ファイルの 8 行目、susy の設定は次のとおりです。

私は、sass マップ構文をサポートする sass バージョン 3.4 と、gulp-sass バージョン 0.7.3 を使用しています。susy 2.1.3 とともに。

なぜこのエラーが発生するのですか？

主に私のsassファイルを管理するために、長い間gulpを使用してきました。今日まで、すべてが正常に機能していましたが、最近までタスクは実行されていましたが、その出力は保存/書き込みされていませんでした。

監視されている scss ファイルがあり、それを変更する必要がある場合は、gulp-ruby-sass (gulp-sass でも同じ問題) を介して実行され、指定されたディレクトリに吐き出されますが、これは発生していません。実行したことを知らせる通知を受け取りましたが、何も出力されず、何らかの奇妙な理由で PHPStorm ウィンドウから iTerm に切り替えると、魔法のように表示されます。

他の誰かがこれを経験しましたか？何が悪いのかわからないので、文字通り髪を引き裂いています。

乾杯。

gulp-ruby-sass を使用して CSS にコンパイルされたファイル app.scss があります。問題は、コンソールで常に次のエラーが発生することです。

ブラウザで検査するときに、前処理されたファイルを見ることはあまり気にしません (レンダリングされた CSS の方が間違いを見つけるのに適しています)。私が望むのは、このエラー メッセージが消えることです。

私はアプリを構築するために Gulp を使用しています。この質問の目的のために、それはファイルが提供されるためにあるフォルダーから別のフォルダーに移動されることを意味します。

で作成してみました

しかし、それは次の結果になりました：

レンダリングされた CSS の下部に、次のコメントがあります。

私のビルドファイルには以下が含まれています：

また、 sourcemap: 'none' を ruby​​Sass コンストラクターに追加しようとしました。

これの原因は何ですか？

css ファイルと scss ファイルを、ビルド ディレクトリにある main.css ファイルにマージしようとしています。機能していますが、正しい順序ではありません。scss ファイルのスタイル属性は、main.css ファイルの最後にある必要があるため、残りの部分が上書きされます。

私のGulpタスクは次のようになります:

最初にソースを変数で定義しています。私は gulp-sass プラグインを使用して scss ファイルを通常の css (.pipe(sass)) に変換し、後で es.merge 関数を使用して 2 つをマージし、それらを main.css に連結しています。

問題は、.scss ファイルのスタイル属性が main.css ファイルの最上部のどこかにあることです。私は彼らが一番下にいる必要があります。したがって、それらは下部に連結する必要があります。

これを行う方法の手がかりはありますか？

1) I've got an angular app setup with "best practices for angular app structure". So each section's folder may have it's own *.scss file. Need to convert the *.scss to *.css, and output the *.css file in the same folder.

Been messing around with it in Gulp for a few hours but can't get the syntax right. It's giving me lots of different behaviors, none of which are desired.

Anyone know Gulp a little better?

2) Seperate Gulp question, uglify works to minify both CSS and JS files? Or is there a separate plugin to use for minifying CSS?

3) Is there a plugin to minify HTML files too? Not too familiar with what's available. Still trying to learn from an example, but they mangled all the different plugins together, and I don't need to use all of them. But as I pull them apart, I'm breaking a lot of things, so it's really time consuming to get things working. I can spend days on this, trying to get it to work properly.

私が使用しているタスクの簡略版は次のとおりです。

(これはCoffeescriptですが、Javascriptはほぼ同じです。上記が解析しにくい場合は、JSを提供できます。)

上記を実行すると、gulp-sourcemaps は以下をスローします。

つまり、Font Awesome ディレクトリで Bootstrap のファイルを探します。gulp-filter の代わりに gulp-if を使用してみましたが、同じエラーで失敗します。

このタスクを書く正しい方法は何ですか?