Gulpを使用した便利タスク
プリフィクサーの追加(autoprefixer)
ベンダープレフィクス(prefix)を自動で追加することで、ブラウザの互換性を向上させます。
コマンドプロンプトを開いて作業用のディレクトリに移動した後、下記をコピペ
npm i gulp-autoprefixer -D
gulpfile.mjsに下記をコピペ
import gulp from 'gulp';
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import prefix from 'gulp-autoprefixer';
const sass = gulpSass( dartSass );
gulp.task('sass', function () {
return gulp.src('sass/**/*.scss') // ソースディレクトリのパスに適宜変更
.pipe(sass().on('error', sass.logError))
.pipe(prefix({
overrideBrowserslist: ['last 2 versions']
}))
.pipe(gulp.dest('css')); // 出力先ディレクトリのパスに適宜変更
});
gulp.task('watch', function () {
gulp.watch('sass/**/*.scss', gulp.series('sass'));
});
動かしてみよう!
下記のような scss の記述を実行すると
body {
background: linear-gradient(0deg, #000,#fff);
}
.flex {
display: flex;
}
出力後
body {
background: -webkit-gradient(linear, left bottom, left top, from(#000), to(#fff));
background: linear-gradient(0deg, #000, #fff);
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
このように各ブラウザの最新の2つのバージョンに対してAutoprefixerがベンダープレフィックスを自動的に追加します。
例えば、ブラウザがバージョン10、11、12の3つのバージョンがある場合、'last 2 version'
を指定すると、Autoprefixerはバージョン11と12に対してベンダープレフィックスを追加します。
CSSの最小化(minify)
CSSを最小化してファイルサイズを軽減することができます。
コマンドプロンプトを開いて作業用のディレクトリに移動した後、下記をコピペ
npm i gulp-clean-css -D
gulpfile.mjsに下記をコピペ
import gulp from 'gulp';
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import prefix from 'gulp-autoprefixer';
import cleanCSS from 'gulp-clean-css';
const sass = gulpSass( dartSass );
gulp.task('sass', function () {
return gulp.src('sass/**/*.scss') // ソースディレクトリのパスに適宜変更
.pipe(sass().on('error', sass.logError))
.pipe(prefix({
overrideBrowserslist: ['last 2 versions']
}))
.pipe(cleanCSS())
.pipe(gulp.dest('css')); // 出力先ディレクトリのパスに適宜変更
});
gulp.task('watch', function () {
gulp.watch('sass/**/*.scss', gulp.series('sass'));
});
動かしてみよう!
下記のような scss の記述を実行すると
body {
background: linear-gradient(0deg, #000,#fff);
}
.flex {
display: flex;
}
出力後
body{background:-webkit-gradient(linear,left bottom,left top,from(#000),to(#fff));background:linear-gradient(0deg,#000,#fff)}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}
このようにスペースの余白や、改行が削除されたい状態でコンパイルされます。
軽量化を行うことでWebサイトの読み込みを早くし、訪問者により快適にWebサイトを見ていただくことができるようになります。
まとめとサンプルファイル
今回はgulp-sassを使用した便利機能の紹介をいたしました。
Webサイト制作においてブラウザ間の差異や軽量化はとても大事なものなので、ぜひ今後の政策に役立ててください!
それでは良いコーディングライフを!