GulpでSassをCSSに変換

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 で実行