GulpでSassをCSSに変換
まずsassをコンパイルするためのモジュールをインストール
※pc全体で使えるようにするためglobalコマンドで実行
yarn global add node-sass
gulpからsassをコンパイルする為のgulp-sassというプラグインをインストール
yarn add gulp-sass --dev
次にgulpfile.js
const {src, dest} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const pkg = require('./package.json');
const conf = pkg["gulp-config"];
const sizes = conf.sizes;
function icon(done){
for(let size of sizes){
let width = size[0];
let height = size[1];
src('./favicon.png')
.pipe($.imageResize({
width,
height,
crop: true,
upscale: false
}))
.pipe($.imagemin())
.pipe($.rename(`favicon-${width}×${height}.png`))
.pipe(dest('./dist/images/icon'));
}
done();
}
function styles(){
return src('./src/sass/main.scss')
.pipe($.sass())
.pipe(dest('./dist/css'));
}
exports.icon = icon;
exports.styles = styles;
src>sass>main.scss、dist>cssを作る
main.scssには何か記述しておく
以下実行
gulp styles
sassがコンパイルされる
Source mapsを使って出力
プラグインのインストール
yarn add gulp-sourcemaps --dev
source mapsの使い方
gulpfile.js
const {src, dest} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const pkg = require('./package.json');
const conf = pkg["gulp-config"];
const sizes = conf.sizes;
function icon(done){
for(let size of sizes){
let width = size[0];
let height = size[1];
src('./favicon.png')
.pipe($.imageResize({
width,
height,
crop: true,
upscale: false
}))
.pipe($.imagemin())
.pipe($.rename(`favicon-${width}×${height}.png`))
.pipe(dest('./dist/images/icon'));
}
done();
}
function styles(){
return src('./src/sass/main.scss')
.pipe($.sourcemaps.init())
.pipe($.sass())
.pipe($.sourcemaps.write('.'))
.pipe(dest('./dist/css'));
}
exports.icon = icon;
exports.styles = styles;
initとwriteで変換処理を挟むとここでここで行われた処理のsourcemapが生成される
write(‘.’)の引数のコロンはディレクトリを表す。
write(‘./maps’)とすると、./dist/css/mapsの中にsourcemapが出来ることになる。
ファイルと同じディレクトリにsourcemapを作ることが一般的。
gulp styles
で実行
main.css.mapが生成され、main.cssに下記が追記されてる
/*# sourceMappingURL=main.css.map */
autoprefixerとgulp-postcssを使う
ベンダープレフィックスに対応する為に下記プラグインをインストール
yarn add autoprefixer gulp-postcss --dev
gulpfile.js
const {src, dest} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const pkg = require('./package.json');
const conf = pkg["gulp-config"];
const sizes = conf.sizes;
const autoprefixer = require('autoprefixer');//ここを追記
function icon(done){
for(let size of sizes){
let width = size[0];
let height = size[1];
src('./favicon.png')
.pipe($.imageResize({
width,
height,
crop: true,
upscale: false
}))
.pipe($.imagemin())
.pipe($.rename(`favicon-${width}×${height}.png`))
.pipe(dest('./dist/images/icon'));
}
done();
}
function styles(){
return src('./src/sass/main.scss')
.pipe($.sourcemaps.init())
.pipe($.sass())
.pipe($.postcss([
autoprefixer({
"overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"],
cascade: false
})//ここを追記
]))
.pipe($.sourcemaps.write('.'))
.pipe(dest('./dist/css'));
}
exports.icon = icon;
exports.styles = styles;
sassからcssにプリコンパイルした後にpost.cssでプレフィックスをつけていく
※post.cssとはcssで書かれた記述に対して、ベンダープレフィックスを自動でつけたり圧縮処理をしたり、ある特定の作業を簡略化してくれるもの
gulp styles で実行