teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

gulpfileの中身を記述

2020/02/20 00:19

投稿

job_ao
job_ao

スコア5

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
- HTML,css(SCSS)
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
  次のエラーに移行