Skip to content

jayjnu/gulp-basic

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

gulpfile for SASS, ES6, and Pug

시작하기

  1. master branch clone받기

    $ git clone https://github.com/jayjnu/gulp-basic.git
    
  2. gulp 설치하기

    $ npm install gulp -g
    
  3. 해당 폴더로 이동하기

    $ cd <gulp-basic 디렉토리>
    
  4. 모듈 다운받기

    $ npm install
    
  5. 개발 시작하기

    $ npm start
    

폴더 트리

  • ./app: 개발용 폴더
    • css: scss 개발용 폴더
    • js: script 개발용 폴더
    • views: pug template engine을 이용한 html 제작 폴더
  • ./build: 결과물로 컴파일 되서 나오는 폴더

개발, 프로덕트 의존성

package.json 참고

{
  "devDependencies": {
    "babel-preset-es2015": "^6.9.0",
    "browser-sync": "^2.13.0",
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-plumber": "^1.1.0",
    "gulp-pug": "^3.0.3",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^1.5.3",
    "pug": "^2.0.0-beta3"
  },
  "dependencies": {}
}

이미지 파일

  1. 파일 위치: build/images 폴더에 넣기
  2. 경로 설정
    • html파일 기준

       <img src='images/01.jpg'/>
    • css파일 기준

       div{background-image:url(../images/01.jpg)}

Bower 설치

  1. Bower란?

    참고: http://vnthf.github.io/blog/bower/

  2. 설치

    $ npm install bower -g
    
  3. bower 프로젝트 시작 - bower.json 만들기 (package.json과 거의 같은 개념)

    $ cd <본인 프로젝트 경로: 예) gulp-basic>
    $ bower init
    $ 아래 나오는 설정들은 본인이 알아서 설정
    
    • 만들어진 bower.json
    {
    	"name": "입력 프로젝트명",
    	"description": "automated compiling tasks for frontend development",
    	"main": "app.js",
    	"authors": ["https://github.com/jayjnu"],
    	"license": "MIT",
    	"keywords": [
    		"gulp",
    		"sass",
    		"pug",
    		"es6"
    	],
    	"homepage": "https://github.com/jayjnu/gulp-basic",
    	"private": true
    }
  4. frontend library 받기 예) jquery, bootstrap

    (프로젝트 폴더로 이동)
    $ bower install jquery --save
    $ bower install bootstrap --save
    

bower-installer 설치

  1. bower-installer란?

    bower를 통해 설치한 라이브러리는 현재 프로젝트 ./bower_components 폴더에 저장되므로 경로관리가 불편한 단점이 있다. bower-installer를 설치하고 미리 저장될 경로를 설정하면 원하는 폴더로 라이브러리를 바로 보낼 수 있다.

  2. bower-installer 설치하기

    $ npm install bower-installer -g
    
  3. bower.json 수정하기 - 다음의 항목을 추가

    "install":{
    	"css":"app/css", // css관련 라이브러리가 저장될 경로 설정
    	"js":"app/js" // javascript 관련 라이브러리가 저장될 경로 설정
    }
  4. bower-installer 실행하기

    $ bower-installer
    
  5. app/css 경로에 생긴 파일 확인

추후 추가사항

  1. ExpressJS, MongoDB task 추가

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published