forked from Gaohaoyang/gaohaoyang.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
134 lines (109 loc) · 3.15 KB
/
gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
var gulp = require("gulp");
var sourcemaps = require("gulp-sourcemaps"),
scss = require("gulp-sass"),
livereload = require("gulp-livereload"),
fileinclude = require('gulp-file-include');
/*
* ==============================+
* 경로들을 담을 객체 생성
* ==============================+
*/
var src = "resume/src";
var dist = "resume/dist";
var paths = {
//js : src + '/js/**/*.js',
scss: src + "/sass/**/*.scss"
};
/*
* ==============================+
* @CSSS : HTML livereload 반영
* ==============================+
*/
gulp.task('html', function () {
return gulp
/*
* html 파일을 읽어오기 위해 경로 지정
*/
.src('./**/*.html')
/*
* html파일을 읽어온 후 livereload 호출하여 브라우저에 반영
*/
.pipe(livereload());
});
/*
* ==============================+
* @파일 인크루드
* ==============================+
*/
gulp.task('fileinclude',function(){
gulp.src(['./resume/src/index.html','./resume/src/sub/*.html'], {base : './'})
.pipe(fileinclude({
prefix:'@@',
basePath:'@file'
}))
.pipe(gulp.dest('./'));
})
/*
* ==============================+
* @CSSS : SCSS Config(환경설정)
* ==============================+
*/
var scssOptions = {
/*
* outputStyle (Type : String , Default : nested)
* CSS의 컴파일 결과 코드스타일 지정
* Values : nested ,expanded, compact, compressed
*/
outputStyle: "compact",
/*
* indentType (>= v3.0.0, Type : String, Default : space)
* 컴파일된 CSS의 "들여쓰기"의 타입
* Values : space, tab
*/
indentType: "tab",
/*
* indentWidth (>= v3.0.0, Type : Integer , Default : 2)
* 컴파일 된 CSS의 "들여쓰기" 의 갯수
*/
indentWidth: 1, // outputStyle 이 nested, expanded 인 경우에 사용
/*
* precision (Type : Integer , Default : 5)
* 컴파일 된 CSS 의 소수점 자리수.
*/
precision: 2,
/*
* sourceComments (Type : Boolean , Default : false)
* 컴파일 된 CSS 에 원본소스의 위치와 줄수 주석표시.
*/
sourceComments: false
};
gulp.task("scss:compile", function () {
return gulp
// SCSS 파일을 읽어온다.
.src(paths.scss)
// 소스맵 초기화(소스맵을 생성)
// .pipe(sourcemaps.init())
// SCSs 함수에 옵션값을 설정, sCSS 작성시 watch가 멈추지 않도록 logError를 설정
.pipe(scss(scssOptions).on("error", scss.logError))
// 위에서 생성한 소스맵을 사용한다.
// .pipe(sourcemaps.write())
// 목적지(destination)을 설정
.pipe(gulp.dest(dist + "/css"))
/*
* SCSS 컴파일을 수행한 후 livereload 호출하여 브라우저에 반영
*/
.pipe(livereload());
});
gulp.task('live', ['html', 'scss:compile'], function () {
// livereload.listen() 옵션값으로 기본경로를 지정
livereload.listen(
{ basePath: dist }
);
});
gulp.task("watch", function () {
gulp.watch('./**/*.html', ['html']); // html task를 watch에 등록
gulp.watch(paths.scss, ["scss:compile"]);
});
// gulp.task("default", ["scss:compile", "watch"]);
gulp.task("default", ["live", "watch"]);
//http://webclub.tistory.com/468