scss 사용하기 - gulp 세팅

npm install --save-dev gulp gulp-postcss gulp-sourcemaps autoprefixer browser-sync cssnano

gulpfile.js

var gulp = require("gulp"),
  sass = require("gulp-sass"),
  postcss = require("gulp-postcss"),
  autoprefixer = require("autoprefixer"),
  cssnano = require("cssnano"),
  sourcemaps = require("gulp-sourcemaps");
var browserSync = require("browser-sync").create();

var paths = {
  styles: {
    //scss 파일 위치
    src: ["scss/*.scss", "scss/**/*.scss"], 
    
    // css파일 저장될 위치
    dest: "css", 
  },
};

function style() {
  return gulp
    .src(paths.styles.src)
    .pipe(sourcemaps.init())
    .pipe(sass())
    .on("error", sass.logError)
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(browserSync.stream());
}

function reload(done) {
  browserSync.reload();
  done();
}

function watch() {
  browserSync.init({
    server: {
      baseDir: "./",
      index: "index.html",
    },
  });
  
  gulp.watch(paths.styles.src, style);
  gulp.watch(["./*.html", "pages/**/*.html"], reload);
}

exports.watch = watch;

 

mac에서 gulp watch 실행

npm run gulp watch

package.json

{
  "name": "resource",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp-sass": "^4.0.2"
  },
  "devDependencies": {
    "autoprefixer": "^9.7.4",
    "browser-sync": "^2.26.7",
    "cssnano": "^4.1.10",
    "gulp": "github:gulpjs/gulp",
    "gulp-postcss": "^8.0.0",
    "gulp-sourcemaps": "^2.6.5"
  },
  "scripts": {
    "gulp": "gulp",
    "serve": "gulp serve",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}