[sass] gulp와 sass 기본 프로젝트 셋팅이 되어있는 보일러플레이트

사용 방법

걸프(gulp)와 sass(scss)를 이용한 마크업 및 퍼블리싱을 진행할 때 프로젝트 기본 셋팅 및 중요 모듈이 설치되어있는 보일러플레이트(boilerplate)를 만들었습니다.

.scss파일 저장시 자동 .css파일로 변환
gulp-autoprefixer를 이용한 자동 프리픽서
spritesmith 모듈을 이용한 Png 및 jpg 파일 스프라이트 이미지로 변환
이미지 용량 감소를 위해 gulp-imagemin사용
.html파일 저장시 브라우저 Reload

사용 방법

github 주소로 이동하신 후에 clone

package.json파일 수정

name : 프로젝트 명으로 수정
url : 본인 git repository로 수정

     
{
  "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/13akstjq/sass_study.git"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-sass": "^4.0.2"
  },
  "dependencies": {
    "browser-sync": "^2.26.7",
    "gulp-autoprefixer": "^7.0.1",
    "gulp.spritesmith": "^6.11.0",
    "vinyl-buffer": "^1.0.1"
  }
}

스프라이트로 만들 이미지는 sprites/하위에 넣으면 됩니다.
실행은 gulp