gulp-ruby-sassとgulp-sass
Gulp Ruby Sass Gulp Sass
卒業以来従事していますjs
この作品は書かれていません。css
、正しいcss
理解のレベルはまだ学校での自習のレベルにとどまっています。基本的なスキルが下手すぎて、最近深く勉強し始めました。
理解するsass
とless
より人気があり、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
ソースコード。次のように、このプラグインの原理の一般的な理解:
コンパイルされたビルドを保存するための一時ディレクトリを作成します
css
ファイルtransfer
sass
コマンド、コンパイル済み、生成済みcss
ファイルは最初に一時ディレクトリに配置されますwill
css
ファイルの内容は次のように読み取られますstream
、pipe
Togulp
タスク内で定義gulp.dest
、これは完了ですscss
ファイルコンパイルとcss
ファイル生成一時ディレクトリと一時ファイルを削除します
問題の原因は、ステップ4で一時ファイルとディレクトリを削除すると、複数のファイルを連続してコンパイルするときに一時ディレクトリのみが生成され、最初のファイルが正常にコンパイルされた後に一時ディレクトリが削除され、後続のファイルの読み取りが行われます。間違っている。 。操作にかかる時間によっては、以下の場合があります。
2つのファイルのうち1つだけが正常にコンパイルされました
2つのファイルの内容は同じです(ファイル名が同じ場合)
ファイルの内容が一致しません
..。
理解する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
、Havenode.js
環境は十分であり、コンパイルプロセスは、buffer
コンテンツ変換を介して直接一時的なディレクトリやファイルを必要としません。
この問題を解決した後、あなたはそれを楽しく使うことができ、私は学び続けることができます。css
そうです。