🥤 gulp 사용하기 (3) sass 트랜스파일 및 + Autoprefixer + minify

🥤 sass transpile

 

https://www.npmjs.com/package/gulp-sass

 

sass는 위 npm에서 설명한대로 코딩하면 된다.

import gulp from "gulp";
import gulppug from "gulp-pug";
import del from "del";
import ws from "gulp-webserver";
import gulpimage from "gulp-image";
import sass from "gulp-sass";

sass.compiler = require("node-sass");

const routes = {
  scss: {
    watch: "src/scss/*",
    src: "src/scss/styles.scss",
    dest: "build/css",
  },
};

//task

const styles = () =>
  gulp
    .src(routes.scss.src)
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest(routes.scss.dest));


const webserver = () =>
  gulp.src("build").pipe(
    ws({
      port: 5000,
      livereload: true,
      open: true,
    })
  );

const watch = () => {
  gulp.watch(routes.scss.watch, styles);
};

// 트랜스파일
const assets = gulp.series([styles]);

// execute webserver deamon
const postDev = gulp.parallel([webserver, watch]);

// package.json에서 script로 사용하기 위해 export
export const dev = gulp.series([assets, postDev]);

 

 

 

🥤 autoprefixer

 

이제 문제는 flex, grid와 같은 최신의 css를 사용할 때 인터넷 익스플로러나 구형 브라우저에도 이해할 수 있게 prefix를 만들어 주는 것이다.

 

gulp-autoprefixer를 이용해보도록하자. npm에는 옵션에 대한 설명이 없어서 github를 첨부한다. 또, autoprefixer가 사용하는 browserslist도 첨부했다.

 

https://github.com/postcss/autoprefixer#options

https://github.com/browserslist/browserslist

 

 

예전에는 이렇게 autoprefixer에서 브라우저를 사용했다. 그러나 browsers 옵션은 이제 지원을 안한다.

.pipe(autoprefixer({
 browsers: ["last 2 versions"],
}))

 

 

 

Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.json or .browserslistrc file. browsers option can cause errors. Browserslist config can be used for Babel, Autoprefixer, postcss-normalize and other tools. If you really need to use option, rename it to overrideBrowserslist.

 

그러니까 이제 package.json에 browserslist를 사용하던가 아니면 overriedBrowserslist를 사용해야 한다. 공식 문서에는 overriedBrowserslist 사용을 지양해달라고 하고 있으니 pacakage.json에 browserslist를 사용해보자.

 

짠! 이제 트랜스파일 되는 코드에는 최근 2개 버전의 브라우저를 지원하는 prefix가 붙는다.

// package.json
"browserslist": [
  "last 2 versions"
]

// gulpfile.babel.js

const styles = () =>
  gulp
    .src(routes.scss.src)
    .pipe(sass().on("error", sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest(routes.scss.dest));

 

트랜스파일의 결과의 일부를 가져와보았다.

  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;

 

 

🥤 gulp-csso로 css minifiy하기

 

https://www.npmjs.com/package/gulp-csso

 

사용법도 그냥 sass 돌리면서 pipe 에서 처리해주면 된다. 물론 autoprefixer 이후에 실행해야겠죠~

const styles = () =>
  gulp
    .src(routes.scss.src)
    .pipe(sass().on("error", sass.logError))
    .pipe(autoprefixer())
    .pipe(csso())
    .pipe(gulp.dest(routes.scss.dest));