GULPでCSSをミニファイ化する方法(gulp-cssnano)

2021年7月24日GULP

GULPでCSSをミニファイ化する方法を紹介します。

GULPでCSSをミニファイ化する方法

cssのミニファイ化には、gulp-cssnanoを使います。

gulp-cssnanoのインストール

npm i gulp-cssnano --save-dev

gulpfile.jsに記述

const gulp = require("gulp");
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require("gulp-sourcemaps");
const cssnano = require('gulp-cssnano');

// SASS compile
gulp.task("sass", function() {
  return gulp
  .src(["./src/sass/**/*.scss", '!./src/sass/not-compile.scss'])
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(cssnano())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest("./dist/css"));
});