質問編集履歴
1
gulpfileの中身を記述
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Uikit3を使ってwebサイトを作成中です。
|
|
4
4
|
Gulpを使用し、UIkitのscssをインポート、さらに自身で書いたscssファイルをインポートし、
|
|
5
|
-
1つのcssとして出力して使いたいです。
|
|
5
|
+
1つのcss（style.css）として出力して使いたいです。
|
|
6
6
|
|
|
7
7
|
cssは出力されているのですが、Undefined variableというエラーが出ます。
|
|
8
8
|
変数が上手く読み込めていないようです。
|
|
9
|
-
variables-theme.scssで数値を変更した場合、反映はされています
|
|
9
|
+
variables-theme.scssで数値を変更した場合、反映はされていますが、
|
|
10
|
+
Gulpで動かしている時のみ表示されており、cssはきちんと出力されていないようです。
|
|
10
11
|
どのようにしたら、エラーが解消するのでしょうか。
|
|
11
12
|
よろしくお願いいたします。
|
|
12
13
|
|
|
@@ -38,10 +39,211 @@
|
|
|
38
39
|
$global-color: #666 !default;
|
|
39
40
|
```
|
|
40
41
|
|
|
42
|
+
gulpfileはこのようになっています
|
|
41
|
-
|
|
43
|
+
以下を参考にしました。
|
|
42
|
-
|
|
44
|
+
https://yumegori.com/gulp4-setting20191025
|
|
45
|
+
|
|
43
46
|
```
|
|
47
|
+
//gulpとgulpのパッケージを読み込み
|
|
48
|
+
const { src, dest, watch, lastRun, parallel, series } = require("gulp");
|
|
49
|
+
const sass = require("gulp-sass");
|
|
50
|
+
const glob = require("gulp-sass-glob");
|
|
51
|
+
const postcss = require("gulp-postcss");
|
|
52
|
+
const autoprefixer = require("autoprefixer");
|
|
53
|
+
const plumber = require("gulp-plumber");
|
|
54
|
+
const notify = require("gulp-notify");
|
|
55
|
+
const htmlmin = require("gulp-htmlmin");
|
|
56
|
+
const del = require("del");
|
|
57
|
+
const ejs = require("gulp-ejs");
|
|
58
|
+
const concat = require("gulp-concat");
|
|
59
|
+
const order = require("gulp-order");
|
|
60
|
+
const rename = require("gulp-rename");
|
|
61
|
+
const cleanCSS = require("gulp-clean-css");
|
|
62
|
+
const pngquant = require("imagemin-pngquant");
|
|
63
|
+
const imagemin = require("gulp-imagemin");
|
|
64
|
+
const mozjpeg = require("imagemin-mozjpeg");
|
|
65
|
+
const uglify = require("gulp-uglify");
|
|
66
|
+
const browserSync = require("browser-sync");
|
|
67
|
+
const replace = require("gulp-replace");
|
|
44
68
|
|
|
69
|
+
//開発と本番で処理を分ける
|
|
70
|
+
//今回はhtmlの処理のところで使っています
|
|
71
|
+
const mode = require("gulp-mode")({
|
|
72
|
+
modes: ["production", "development"],
|
|
73
|
+
default: "development",
|
|
74
|
+
verbose: false
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
//読み込むパスと出力するパスを指定
|
|
78
|
+
const srcPath = {
|
|
79
|
+
html: {
|
|
80
|
+
src: ["./src/_ejs/**/*.ejs", "!" + "./src/_ejs/**/_*.ejs"],
|
|
81
|
+
dist: "./dist/"
|
|
82
|
+
},
|
|
83
|
+
styles: {
|
|
84
|
+
src: "./src/_scss/**/*.scss",
|
|
85
|
+
dist: "./dist/assets/css/",
|
|
86
|
+
map: "./dist/assets/css/map"
|
|
87
|
+
},
|
|
88
|
+
scripts: {
|
|
89
|
+
src: "./src/_js/**/*.js",
|
|
90
|
+
dist: "./dist/assets/js/",
|
|
91
|
+
map: "./dist/assets/js/map",
|
|
92
|
+
core: "src/js/core/**/*.js",
|
|
93
|
+
app: "src/js/app/**/*.js"
|
|
94
|
+
},
|
|
95
|
+
images: {
|
|
96
|
+
src: "./src/img/**/*.{jpg,jpeg,png,gif,svg}",
|
|
97
|
+
dist: "./dist/assets/img/"
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
//htmlの処理自動化
|
|
102
|
+
const htmlFunc = () => {
|
|
103
|
+
return src(srcPath.html.src)
|
|
104
|
+
.pipe(
|
|
105
|
+
plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
|
|
106
|
+
)
|
|
107
|
+
.pipe(ejs({}, {}, { ext: ".html" })) //ejsを纏める
|
|
108
|
+
.pipe(rename({ extname: ".html" })) //拡張子をhtmlに
|
|
109
|
+
.pipe(
|
|
110
|
+
mode.production(
|
|
111
|
+
//本番環境のみ
|
|
112
|
+
htmlmin({
|
|
113
|
+
//htmlの圧縮
|
|
114
|
+
collapseWhitespace: true, // 余白を除去する
|
|
115
|
+
preserveLineBreaks: true, //改行を詰める
|
|
116
|
+
minifyJS: true, // jsの圧縮
|
|
117
|
+
removeComments: true // HTMLコメントを除去する
|
|
118
|
+
})
|
|
119
|
+
)
|
|
120
|
+
)
|
|
121
|
+
.pipe(replace(/[\s\S]*?(<!DOCTYPE)/, "$1"))
|
|
122
|
+
.pipe(dest(srcPath.html.dist))
|
|
123
|
+
.pipe(browserSync.reload({ stream: true }));
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
//Sassの処理自動化（開発用）
|
|
127
|
+
const stylesFunc = () => {
|
|
128
|
+
return src(srcPath.styles.src, { sourcemaps: true })
|
|
129
|
+
.pipe(
|
|
130
|
+
plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
|
|
131
|
+
)
|
|
132
|
+
// .pipe(glob())
|
|
133
|
+
.pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError))
|
|
134
|
+
.pipe(
|
|
135
|
+
postcss([
|
|
136
|
+
autoprefixer({
|
|
137
|
+
// IEは11以上、Androidは4、ios safariは8以上
|
|
138
|
+
// その他は最新2バージョンで必要なベンダープレフィックスを付与する
|
|
139
|
+
//指定の内容はpackage.jsonに記入している
|
|
140
|
+
cascade: false,
|
|
141
|
+
grid: true
|
|
142
|
+
})
|
|
143
|
+
])
|
|
144
|
+
)
|
|
145
|
+
.pipe(dest(srcPath.styles.dist, { sourcemaps: "./map" }))
|
|
146
|
+
.pipe(browserSync.reload({ stream: true }));
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
//Sassの処理自動化（本番用）
|
|
150
|
+
const stylesCompress = () => {
|
|
151
|
+
return src(srcPath.styles.src)
|
|
152
|
+
.pipe(
|
|
153
|
+
plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
|
|
154
|
+
)
|
|
155
|
+
.pipe(glob())
|
|
156
|
+
.pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
|
|
157
|
+
.pipe(
|
|
158
|
+
postcss([
|
|
159
|
+
autoprefixer({
|
|
160
|
+
//上の指定と同じ
|
|
161
|
+
cascade: false,
|
|
162
|
+
grid: true
|
|
163
|
+
})
|
|
164
|
+
])
|
|
165
|
+
)
|
|
166
|
+
.pipe(cleanCSS())
|
|
167
|
+
.pipe(dest(srcPath.styles.dist))
|
|
168
|
+
.pipe(browserSync.reload({ stream: true }));
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
//scriptの処理自動化
|
|
172
|
+
const scriptFunc = () => {
|
|
173
|
+
return src(srcPath.scripts.src, { sourcemaps: true })
|
|
174
|
+
.pipe(order([srcPath.scripts.core, srcPath.scripts.app], { base: "./" }))
|
|
175
|
+
.pipe(
|
|
176
|
+
plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
|
|
177
|
+
)
|
|
178
|
+
.pipe(concat("init.js"))
|
|
179
|
+
.pipe(uglify({ output: { comments: /^!/ } }))
|
|
180
|
+
.pipe(
|
|
181
|
+
rename({
|
|
182
|
+
suffix: ".min"
|
|
183
|
+
})
|
|
184
|
+
)
|
|
185
|
+
.pipe(dest(srcPath.scripts.dist, { sourcemaps: "./map" }))
|
|
186
|
+
.pipe(browserSync.reload({ stream: true }));
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
//画像圧縮の定義
|
|
190
|
+
const imagesBase = [
|
|
191
|
+
pngquant({
|
|
192
|
+
quality: [0.7, 0.85]
|
|
193
|
+
}),
|
|
194
|
+
// mozjpeg({
|
|
195
|
+
// quality: 85
|
|
196
|
+
// }),
|
|
197
|
+
imagemin.gifsicle(),
|
|
198
|
+
imagemin.mozjpeg({
|
|
199
|
+
quality: 85,
|
|
200
|
+
progressive: true
|
|
201
|
+
}),
|
|
202
|
+
imagemin.optipng(),
|
|
203
|
+
imagemin.svgo({
|
|
204
|
+
removeViewBox: false
|
|
205
|
+
})
|
|
206
|
+
];
|
|
207
|
+
|
|
208
|
+
//画像の処理自動化
|
|
209
|
+
const imagesFunc = () => {
|
|
210
|
+
return src(srcPath.images.src, { since: lastRun(imagesFunc) })
|
|
211
|
+
.pipe(plumber({ errorHandler: notify.onError("<%= error.message %>") }))
|
|
212
|
+
.pipe(imagemin(imagesBase))
|
|
213
|
+
.pipe(dest(srcPath.images.dist));
|
|
214
|
+
};
|
|
215
|
+
|
|
216
|
+
// マップファイル除去
|
|
217
|
+
const cleanMap = () => {
|
|
218
|
+
return del([srcPath.styles.map, srcPath.scripts.map]);
|
|
219
|
+
};
|
|
220
|
+
|
|
221
|
+
// ブラウザの読み込み処理
|
|
222
|
+
const browserSyncFunc = () => {
|
|
223
|
+
browserSync({
|
|
224
|
+
server: {
|
|
225
|
+
baseDir: "./dist/",
|
|
226
|
+
index: "index.html"
|
|
227
|
+
},
|
|
228
|
+
reloadOnRestart: true
|
|
229
|
+
});
|
|
230
|
+
};
|
|
231
|
+
|
|
232
|
+
// ファイルに変更があったら反映
|
|
233
|
+
const watchFiles = () => {
|
|
234
|
+
watch(srcPath.html.src, htmlFunc);
|
|
235
|
+
watch(srcPath.styles.src, stylesFunc);
|
|
236
|
+
watch(srcPath.scripts.src, scriptFunc);
|
|
237
|
+
watch(srcPath.images.src, imagesFunc);
|
|
238
|
+
};
|
|
239
|
+
|
|
240
|
+
exports.default = parallel(watchFiles, browserSyncFunc); //gulpの初期処理
|
|
241
|
+
exports.build = parallel(htmlFunc, stylesFunc, scriptFunc, imagesFunc);
|
|
242
|
+
|
|
243
|
+
exports.sasscompress = stylesCompress;
|
|
244
|
+
exports.cleanmap = cleanMap;
|
|
245
|
+
```
|
|
246
|
+
|
|
45
247
|
### 試したこと
|
|
46
248
|
1._import.scssに$global-color:#fff;を追加
|
|
47
249
|
次のエラーに移行
|