gulp-ruby-sass と gulp-sass_html/css_WEB-ITnose

私は卒業以来jsで働いていますが、cssについてはまだ学校で独習するレベルです。基礎力が低すぎるので、最近は徹底的に勉強するようになりました。

Sass と Less の方が人気があることがわかったので、2 つの長所と短所については説明しません。 Sass を選んだのは、Ruby に近いからです。

通常、sassを書くときは保存してコンパイルする必要がありますが、最近はVisual Studioコードを使用して開発しています。このエディターは十分に成熟しておらず、sassをコンパイルする機能をサポートしていないため、 でしかスクリプトを書くことができません。自分自身。 。

この作業を行うために gulp を使用することについては何も言うことはありません。npm で検索し、ruby 環境がマシンにインストールされている gulp-ruby-sass に恋をしました。次のスクリプトは、インストールがスムーズで、使用方法が非常に優れているということです。

うわー

コードは非常に素晴らしく、問題はありません。少し満足しています。ところが今日、こんな不思議な出来事に遭遇したのでこの記事を書いてみました。

ビルドする必要があるプロジェクトに項目を追加したときに問題が発生しました。話が安ければ、コードを見せてください。

rreee

上記と比較して、コンパイルする必要があるものが 1 つだけあります。問題ないようですが...コンパイルによって生成される xxx/styles/index.css の内容は、実際には yyy/styles/index.css ですが、場合によってはその逆になります。

一度、コードに問題があるのではないかと思い、何度か変更しましたが、問題は変わりませんでした。 gulp-ruby-sass のソースコードを見るしかありません。このプラグインの原理については、次のように一般的に理解しています。

コンパイルによって生成された CSS ファイルを保存するための一時ディレクトリを作成します

sass コマンドを呼び出すと、コンパイルによって生成された CSS ファイルが次のようになります。最初に一時ディレクトリに配置されます。 ;

一時ディレクトリと一時ファイルを削除します

問題の原因 理由は、手順 4 で一時ファイルと一時ディレクトリを削除するときに、最初のファイルの後に複数のファイルが連続してコンパイルされると、一時ディレクトリが 1 つしか生成されないためです。が正常にコンパイルされると、一時ディレクトリが削除され、その後のファイルの読み取りでエラーが発生します。操作にかかる時間に応じて、次の状況が発生する可能性があります:

2 つのファイルのうち 1 つだけが正常にコンパイルされる

2 つのファイルの内容は同じです (ファイル名が同じ場合)

ファイルの内容が一致しません

...

gulp-ruby-sass の実行プロセスについて学んだ後、上記の問題があり、自分のコードを変更したくなかったため、これを放棄することにしました。

npm で検索を続け、gulp-sass を見つけます。

npm install --save-dev gulp-sass、待機後、npm がエラーを報告しました。

なんと!!! まあ、それは形を変えた祝福だと考えてください。 npm-debug.log からわかるように、gulp-sass はnode-sass ライブラリに依存しています。 node-sass ライブラリをインストールするときは、スクリプトを実行する必要があります。プロセス中に問題が発生した場合は、管理者としてインストールを試すことができます。

管理者として再度インストールすると、今度は成功し、gulpfile.js を変更します

var gulp = require('gulp');var sass = require('gulp-ruby-sass');var group = require('gulp-group-files');var sassFiles = {    "xxx" : {        src: "./xxx/styles/sass/index.scss",        dest: "./xxx/styles/"    }};gulp.task('sass:compile',function (){    return group(sassFiles,function (key,fileset){        return sass(fileset.src)            .on('error', function (err) {                console.error('compile sass file error: %s', err.message);            })            .pipe(gulp.dest(fileset.dest));    })();});gulp.task('sass:watch',function (){    gulp.watch('**/*.scss',['sass:compile'])});gulp.task('default',['sass:watch']);

依存関係とソースコードの一部を見ると、gulp-ruby-sass と gulp-sass の違いがわかります。コンパイラの違いはコンパイルプロセスとは異なります。

gulp-ruby-sass は sass を呼び出すため、ruby 環境が必要で、一時ディレクトリと一時ファイルを生成する必要があります

• gulp-sass は、node-sass を呼び出します。 、コンパイル プロセスには一時ディレクトリとファイルは必要なく、バッファの内容を通じて直接変換されます。

• この問題を修正した後は、快適に使用できるようになり、CSS の学習を続けることができます。