当然のことながら、libsass
とのsass編集デバッグを容易にするためのSourceMapsの生成
autoprefixerを使用してCSSをプレフィックスします
Sassdocです。$ <span>npm install gulp gulp-sass --save-dev</span>
それだけです！非常に最小限のGulpタスクのおかげで、Libsassを使用してStyleSheetsをコンパイルできるようになりました。それはどうですか？ Gulp-Sassにオプションを渡すには、拡張モードでStyleSheetsをコンパイルし、コンソールにエラーを印刷することができます。
<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>SetePointでSourceMapsについての素敵な記事があります。 Sourcemapsの理解が少し不足していると感じたら、先に読んでください。
さて、SourceMapsの生成をタスクに追加するには、Gulp-Sourcemaps：をインストールする必要があります。
そして、タスクを最適化しましょう：
<span>var input = './stylesheets/**/*.scss';
</span><span>var output = './public/css';
</span>
gulp<span>.task('sass', function () {
</span> <span>return gulp
</span> <span>// Find all `.scss` files from the `stylesheets/` folder
</span> <span>.src(input)
</span> <span>// Run Sass on those files
</span> <span>.pipe(sass())
</span> <span>// Write the resulting CSS in the output folder
</span> <span>.pipe(gulp.dest(output));
</span><span>});</span>デフォルトでは、Gulp-Sourcemapsは、コンパイルされたCSSファイルにSourcemapsをインラインで書き込みます。プロジェクトのセットアップに応じて、それらを別々のファイルに記述することをお勧めします。その場合、sourcemaps.write（）functionのgulp.dest（）宛先に関連するパスを指定できます。
<span>var sassOptions = {
</span> <span>errLogToConsole: true,
</span> <span>outputStyle: 'expanded'
</span><span>};
</span>
gulp<span>.task('sass', function () {
</span> <span>return gulp
</span> <span>.src(input)
</span> <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span> <span>.pipe(gulp.dest(output));
</span><span>});</span>Autoprefixerを使用することが手でベンダーを書くよりも良い理由（または基本的に同じもの）を使用するよりも詳細に説明することはありませんが、ほぼAutoprefixerは、実際に既にコンパイルされた更新を更新することを意味します。最新のデータベースと特定の構成に基づいて、関連するプレフィックスを追加するスタイルシート。言い換えれば、あなたはあなたがサポートするブラウザをAutoprefixerに伝え、それはスタイルシートに関連するプレフィックスのみを追加します。努力はゼロ、完璧なサポート（このキャッチフレーズの特許をとることを思い出させてください）。
$ <span>npm install gulp-sourcemaps --save-dev</span>
最初に、インストールしましょう（今までに要点を取得します）：
次に、タスクに追加します：
今、
です。<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');
</span><span>var sourcemaps = require('gulp-sourcemaps');
</span>
<span>// ... variables
</span>
gulp<span>.task('sass', function () {
</span> <span>return gulp
</span> <span>.src(input)
</span> <span>.pipe(sourcemaps.init())
</span> <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span> <span>.pipe(sourcemaps.write())
</span> <span>.pipe(gulp.dest(output));
</span><span>});</span>ブラウザ、
すべてのブラウザの最後の2つのバージョン、gulp<span>.task('sass', function () {
</span> <span>return gulp
</span> <span>.src(input)
</span> <span>.pipe(sourcemaps.init())
</span> <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span> <span>.pipe(sourcemaps.write('./stylesheets/maps'))
</span> <span>.pipe(gulp.dest(output));
</span><span>});</span>firefox esr、
$ <span>npm install gulp gulp-sass --save-dev</span>
<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>
<span>var input = './stylesheets/**/*.scss';
</span><span>var output = './public/css';
</span>
gulp<span>.task('sass', function () {
</span> <span>return gulp
</span> <span>// Find all `.scss` files from the `stylesheets/` folder
</span> <span>.src(input)
</span> <span>// Run Sass on those files
</span> <span>.pipe(sass())
</span> <span>// Write the resulting CSS in the output folder
</span> <span>.pipe(gulp.dest(output));
</span><span>});</span>私はあなたを見ています
<span>var sassOptions = {
</span> <span>errLogToConsole: true,
</span> <span>outputStyle: 'expanded'
</span><span>};
</span>
gulp<span>.task('sass', function () {
</span> <span>return gulp
</span> <span>.src(input)
</span> <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span> <span>.pipe(gulp.dest(output));
</span><span>});</span>$ <span>npm install gulp-sourcemaps --save-dev</span>
最後の、しかし重要なことを考えるべきこと：デフォルトのタスクでSASSを実行します。
圧縮モードでSASSをコンパイルします
<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');
</span><span>var sourcemaps = require('gulp-sourcemaps');
</span>
<span>// ... variables
</span>
gulp<span>.task('sass', function () {
</span> <span>return gulp
</span> <span>.src(input)
</span> <span>.pipe(sourcemaps.init())
</span> <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span> <span>.pipe(sourcemaps.write())
</span> <span>.pipe(gulp.dest(output));
</span><span>});</span>autoprefixerを使用したcssプレフィックス
Sassdocドキュメントを再生します
gulp<span>.task('sass', function () {
</span> <span>return gulp
</span> <span>.src(input)
</span> <span>.pipe(sourcemaps.init())
</span> <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span> <span>.pipe(sourcemaps.write('./stylesheets/maps'))
</span> <span>.pipe(gulp.dest(output));
</span><span>});</span>return gulp.src（ './ sass/**/*。scss '）
.pipe（sass（）。on（' error '、sass.logerror））
.pipe（gulp.dest（' ./ css '））;
}））） ;
sassディレクトリに.scssファイルを保存するたびに、「SASS」タスクは自動的にSASSファイルをCSSにコンパイルします。 SASSファイルのエラーを処理するにはどうすればよいですか？
SASSファイルをコンパイルすると、構文エラーが発生する可能性があります。これらのエラーは、Gulp-Sassが提供するONメソッドを使用して処理できます。 「SASS」タスクを変更してエラーを記録する方法は次のとおりです。 scss '）
.pipe（sass（）。on（' error '、sass.logerror））
.pipe（gulp.dest（ './ css'））;
}）;
gulpを使用してCSSファイルをマイニングするにはどうすればよいですか？
Gulp-Clean-CSSと呼ばれるプラグイン。まず、NPMインストールを実行してプロジェクトにインストールします - ave-dev gulp-clean-css。次に、CSSファイルをマイニングするタスクを作成できます。 （）=> {
return gulp.src（ 'styles/*。css'）
.pipe（cleancss（{compatibility： 'ie8'}）））
.pipe（gulp.dest（ 'dist'））;
}）;
以上がSASS用のシンプルなGulp＆＃x27; Yワークフローの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
