【Gulp】Sass/Scssをコンパイルする方法(推奨版)

HTML/CSS/Sass

Gulpを使ってSass/Scssをコンパイルしていたのですが、非推奨の形で記載してしまっていたので、推奨版の書き方で記載したコードを備忘録として残しておきます。

元々書いていたやり方

こんな形で書いてました。しかし、公式HP見たり調べてみると、この形は今では非推奨とのこと。

gulp.task('sass', function() {
    ...
})

推奨版に書き直し

書き方はその他にもあるかと思いますが、推奨版の書き方を取り入れ、問題なく実行できました。参考にしてみてください。

// gulpfile.js

const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass');

function sass_compile () {
    return src('./style/scss/**/*.scss')
        .pipe(sass())
        .pipe(dest('./style/css'));
}

function sass_watch () {
    return watch('./style/scss/**/*.scss', sass_compile);
}

exports.default = series(sass_compile, sass_watch);
タイトルとURLをコピーしました