gulp-ruby-sassとgulp-sass



Gulp Ruby Sass Gulp Sass



卒業以来従事していますjsこの作品は書かれていません。css、正しいcss理解のレベルはまだ学校での自習のレベルにとどまっています。基本的なスキルが下手すぎて、最近深く勉強し始めました。

理解するsasslessより人気があり、1つを選択することにしました。これら2つの長所と短所については説明しません。私が選んだのはsassなぜならrubyもっとプロだからです。



普通に書くsassこれを保存してコンパイルする必要がありますが、最近使っています。 ビジュアルスタジオコード 開発、このエディターはあまり成熟しておらず、コンパイルをサポートしていませんsass関数はスクリプトによってのみ記述できます。

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



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'])

コードはとても素敵に見えます、問題ありません、私はまだ少し満足しています。しかし、今日、私はそのような奇妙なことに遭遇しました。それは、この記事の起源です。

ビルドする必要のあるアイテムをプロジェクトに1つ追加したところ、問題が発生しました。talk is cheap直接show u the codeそうです。

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/' }, 'yyy' : { src: './yyy/styles/sass/index.scss', dest: './yyy/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'])

上記と比較して、コンパイルする必要があるコンテンツは1つだけです。見た目は問題ありませんが、問題はありません。コンパイルされて生成されたxxx/styles/index.css内容は実際にはyyy/styles/index.css時々逆になります。



コードに問題があると疑われた後、コードを数回変更しても問題は解決しませんでした。まさか、私は見に行かなければなりませんgulp-ruby-sassソースコード。次のように、このプラグインの原理の一般的な理解:

  1. コンパイルされたビルドを保存するための一時ディレクトリを作成しますcssファイル

  2. transfer sassコマンド、コンパイル済み、生成済みcssファイルは最初に一時ディレクトリに配置されます

  3. will cssファイルの内容は次のように読み取られますstreampipe To gulpタスク内で定義gulp.dest、これは完了ですscssファイルコンパイルとcssファイル生成

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

問題の原因は、ステップ4で一時ファイルとディレクトリを削除すると、複数のファイルを連続してコンパイルするときに一時ディレクトリのみが生成され、最初のファイルが正常にコンパイルされた後に一時ディレクトリが削除され、後続のファイルの読み取りが行われます。間違っている。 。操作にかかる時間によっては、以下の場合があります。

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

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

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

理解するgulp-ruby-sass実装プロセスの後、私はそれを放棄することにしました。理由は上記の問題です。コードを変更したくありません。

続行npm検索、見つかりましたgulp-sass

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

Wtf !!!ええと、挽くのは良いことです。 From npm-debug.logそれを見ることができますgulp-sass依存node-sassこのライブラリ。インストールnode-sassこのライブラリはスクリプトを実行し、エラーの過程で、管理者としてインストールを試みることができます。

管理者として再インストールします。今回は成功し、変更されましたgulpfile.js

var gulp = require('gulp') var sass = require('gulp-sass') var group = require('gulp-group-files') var sassFiles = { 'xxx' : { src: './xxx/styles/sass/index.scss', dest: './xxx/styles/' }, 'yyy' : { src: './yyy/styles/sass/index.scss', dest: './yyy/styles/' } } gulp.task('sass:compile',function (){ return group(sassFiles,function (key,fileset){ return gulp.src(fileset.src) .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest(fileset.dest)) })() }) gulp.task('sass:watch',function (){ gulp.watch('**/*.scss',['sass:compile']) }) gulp.task('default',['sass:watch'])

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

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

  • gulp-sass呼び出し中node-sass、Have node.js環境は十分であり、コンパイルプロセスは、bufferコンテンツ変換を介して直接一時的なディレクトリやファイルを必要としません。

この問題を解決した後、あなたはそれを楽しく使うことができ、私は学び続けることができます。cssそうです。