問題タブ [gulp-sass]
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.
html - ubuntuサーバーでGulp SASS random()が失敗する
random()
ubuntu サーバーでコンパイルするときに、sassの機能に問題があります。
現在、ローカルでは正常に動作していますが、ubuntu ボックスで gulp タスクを実行するとgulp-sass
、出力は 1 回しか生成されません。
これはサスです:
これは、gulp-sass を使用した場合の ubuntu ボックスの出力です。
ご覧のとおり、出力が毎回ランダムであるローカルマシンとは異なり、乱数を1回だけ生成し、すべての繰り返しに同じ値を使用します。
その後、sass コンパイラを grunt 以外で使用しようとするとsass sass/default.css style/default.css
、random() は完全に失敗します。
random() を正しくコンパイルするために、ubuntu ボックスにインストールする必要があるものはありますか? 私はいつもそれがsassでネイティブになったと思っていました。
正しいコンパイルのデモを行う SassMeister は次のとおりです 。
node.js - Gulp コマンドがエラーで停止します: spawn ENOTDIR
同様の質問がたくさんあることは認識していますが、私が見つけることができる解決策はありません。
Sass と JS をコンパイルしようとしていますが、次のエラーが発生します。
チョークポイントはreturn sass(...)
ステートメントのようです。私gulpfile.js
はこのように見えます:
- OS X ヨセミテ 10.10.3
- ルビー v2.0.0p481
- ジェム v2.0.14
- ノード v0.12.3
- NPM v2.9.1
- ガルプ v3.8.11
javascript - gulp-sass プラグインを使用して Gulp タスクのパフォーマンスを向上させる方法は?
約 25 秒でコンパイルされる長いループ (約 800 行の CSS を生成) を持つ sass ファイルがあります。長過ぎます。
コンパイル時間を最小限に抑えるにはどうすればよいですか?
ありがとう!
javascript - gulp-sass と gulp-watch、scss の保存時にファイルが見つからない
現在、gulpfile をセットアップしていますが、watch タスクが scss タスクを実行しているときに gulp-sass に問題があります。
これは私の gulpfile.js がどのように見えるかです:
base.scss にはこれのみが含まれます: (ファイル拡張子なしでフルパスも試しました。同じ結果)
コンソールに表示されるエラー:
基本的なエラーは次のとおりです: 1:9 インポートするファイルが見つからないか読み取れません: ./src/scss/modules/modules_base.scss
アプリの構造:
エラーは、modules_base.scss を保存して監視タスクが起動されたときにのみ発生し、デフォルト タスクを実行しているときには発生しません。
すべての提案は大歓迎です!
注: ノード -v : 0.12.0 Gulp: 3.8.11 gulp-sass: 2.0.1
sass - Web Starter Kit SASS がコンパイルされない
Web スターター キットで SASS を使用していますが、SASS をコンパイルしていないようです。私のCSSファイルは次のように構成されています:
- - - - アプリ
----------資産
-----------------styles/
-----------------------app.css
-----------partials/
-----------スクリプト/
-----------scss/
---------------_bootstrap.scss
---------------_custom.scss
---------------_main.scss
---------------app.scss
REQUIRE SASS MODULED var sass = require("gulp-sass")
私の Gulp.js ファイルには、次のタスクが含まれています。
WATCH SCRIPT (edited) // ファイルの変更とリロードを監視
完全な Gulp ファイル:
gulp - win7 での gulp-sass または gulp-ruby-sass による構文/依存関係の問題の解決
そのため、Gulp を初めて使用する多くの人と同じように、開発マシン (win7、xampp、drupal) で gulp-sass または gulp-ruby-sass を適切に動作させるのに苦労しています。
私の質問は非常に単純です: livereload を使ってブラウザに sass コンパイルを実行するにはどうすればよいですか?
コンパスウォッチまたはバンドル exec ガードを使用して SASS が正しくコンパイルされることを確認できますが、drupal で Omega4 を使用して設定された通常の livereload は非常に遅いです。gulp/grunt を調べるように提案されたので調べてみましたが、設定が簡単であると報告されている gulp を選択しました。
また、Web サーバーのルートに gulp を正しくインストールしました。コマンド ラインを使用して、gulp ファイル内のいくつかの関数を個別に、または gulp を介してファイル全体として呼び出すことができます。
私が抱えている問題は、gulp-sass も gulp-ruby-sass も機能しないということです!
gulp-ruby-sass を使用すると、arguments to path.join must be strings
エラーが発生します。エラーは、この関数の 2 行目で発生します。
gulp-sass でエラーが出るfile to import not found or unreadable: variables/**/*
このエラーは、src/return sass ラインでも発生します。gulp-ruby-sass のバージョン間の構文が変更されたことは知っていますが、新しい構文の変更はどれもうまくいきませんでした。また、gulp-sass にはファイルのグロビングの問題 (?!) はありません。
これを実現するために必要な依存関係または構文の組み合わせについて、私は途方に暮れています。
参考までに、ここに私の gulpfile と参考用の依存関係があります。
前もって感謝します。
node.js - コンパイル済み出力と同じソースマップ コンテンツ - Windows の場合
問題
gulp-sourcemaps
コンパイル済みの sass のソースマップを生成するために使用しています。
これは、Linux/Mac コンピューターでは機能するようですが、Windows では機能しません。実際のソース sass の代わりに、ソースマップの内容は生成された css と同じです。
PS私は実際のソースファイルを公開してリンクしたくありません。それらをソアマップに埋め込んでほしい。
詳細
私が使用している完全なgulpタスクは次のとおりです。
そして、フォルダ構造は次のとおりです。
さらに詳しく
Node v0.12.4 で Windows 7 を実行しています。グローバルgulp
バージョンは 3.9.0 です。
これが私のpackage.json
ファイルです:
の元のソース コンテンツは次のapp.scss
とおりです。
生成された CSS ファイルは次のとおりです。
最後に、ソースマップ ファイル (整形済み) を次に示します。
結論
上記のすべてからわかるようにsourcesContent
、ソースマップ ファイル内の は、生成された CSS とまったく同じです。これにより、ソースマップはかなり役に立たなくなります。
ここで何が間違っていますか?どうすれば修正できますか?
これらのファイルのダウンロードは次のとおりです: gulp-sass-autoprefixer-sourcemaps.zip。
テストするには: 抽出してから実行しnpm install && gulp css
ます。