質問編集履歴

4

修正

2021/10/12 15:13

投稿

KKsall
KKsall

score23

test CHANGED
File without changes
test CHANGED
@@ -182,68 +182,6 @@
182
182
 
183
183
 
184
184
 
185
-
186
-
187
-
188
-
189
- const imageMin = () => {
190
-
191
- return gulp
192
-
193
- .src(setting.assetSrcDir + 'img/**')
194
-
195
- // .pipe(changed(setting.assetDistDir + 'img'))
196
-
197
- .pipe(
198
-
199
- gulpImagemin([
200
-
201
- pngquant({
202
-
203
- quality: [.60, .70], // 画質
204
-
205
- speed: 1 // スピード
206
-
207
- }),
208
-
209
- mozjpeg({quality: 65}), // 画質
210
-
211
- gulpImagemin.svgo(),
212
-
213
- gulpImagemin.optipng(),
214
-
215
- gulpImagemin.gifsicle({optimizationLevel: 3}) // 圧縮率
216
-
217
- ])
218
-
219
- )
220
-
221
- .pipe(gulp.dest(setting.assetDistDir + 'img'));
222
-
223
- }
224
-
225
- exports.imageMin = imageMin;
226
-
227
-
228
-
229
-
230
-
231
-
232
-
233
- const imageDel = () => {
234
-
235
- return del(setting.assetDistDir + 'img')
236
-
237
- }
238
-
239
- exports.imageDel = imageDel;
240
-
241
-
242
-
243
-
244
-
245
-
246
-
247
185
  const ejsCompile = () => {
248
186
 
249
187
  return gulp.src(ejs_src)
@@ -296,8 +234,6 @@
296
234
 
297
235
  const webpackJs = () => {
298
236
 
299
- // webpackStreamの第2引数にwebpackを渡す
300
-
301
237
  return webpackStream(setting.webpack, webpack)
302
238
 
303
239
  .pipe(gulp.dest(setting.assetDistDir + 'js'));
@@ -372,24 +308,6 @@
372
308
 
373
309
 
374
310
 
375
-
376
-
377
- exports.default = gulp.series(
378
-
379
- gulp.parallel(
380
-
381
- gulp.series(lintSass, sassCompile),
382
-
383
- gulp.series(htmlDel, ejsCompile),
384
-
385
- sync
386
-
387
- ), watchFiles
388
-
389
- );
390
-
391
-
392
-
393
311
  ```
394
312
 
395
313
  mixinファイル

3

修正

2021/10/12 15:13

投稿

KKsall
KKsall

score23

test CHANGED
File without changes
test CHANGED
@@ -62,19 +62,19 @@
62
62
 
63
63
  },
64
64
 
65
- srcDir: 'docroot/html/', //ソースコードの存在するベースのディレクトリ
65
+ srcDir: 'docroot/html/',
66
-
66
+
67
- destDir: 'docroot/html/', //コンパイル後に出力するベースのディレクトリ
67
+ destDir: 'docroot/html/',
68
-
68
+
69
- destRoot: 'docroot/html/', //出力するドキュメントルート
69
+ destRoot: 'docroot/html/',
70
-
70
+
71
- jsonDir: 'docroot/_json/', //json格納ディレクトリ
71
+ jsonDir: 'docroot/_json/',
72
72
 
73
73
  tmplDir: 'docroot/_templates/',
74
74
 
75
- assetSrcDir: 'docroot/_src/', // アセットファイルのソースディレクトリ
75
+ assetSrcDir: 'docroot/_src/',
76
-
76
+
77
- assetDistDir: 'docroot/html/assets/', // アセットファイルの出力先ディレクトリ
77
+ assetDistDir: 'docroot/html/assets/',
78
78
 
79
79
  webpack: require("./webpack.config")
80
80
 
@@ -96,11 +96,7 @@
96
96
 
97
97
 
98
98
 
99
- /**
99
+
100
-
101
- * SCSS整形
102
-
103
- */
104
100
 
105
101
  const lintSass = () => {
106
102
 
@@ -140,13 +136,7 @@
140
136
 
141
137
 
142
138
 
143
- /**
139
+
144
-
145
- * SCSSコンパイル
146
-
147
- * @returns {*}
148
-
149
- */
150
140
 
151
141
  const sassCompile = () => {
152
142
 
@@ -194,11 +184,7 @@
194
184
 
195
185
 
196
186
 
197
- /**
187
+
198
-
199
- * 画像圧縮
200
-
201
- */
202
188
 
203
189
  const imageMin = () => {
204
190
 
@@ -242,11 +228,7 @@
242
228
 
243
229
 
244
230
 
245
- /**
231
+
246
-
247
- * 圧縮済み画像全削除
248
-
249
- */
250
232
 
251
233
  const imageDel = () => {
252
234
 
@@ -260,11 +242,7 @@
260
242
 
261
243
 
262
244
 
263
- /**
245
+
264
-
265
- * ejs task
266
-
267
- */
268
246
 
269
247
  const ejsCompile = () => {
270
248
 
@@ -300,11 +278,7 @@
300
278
 
301
279
 
302
280
 
303
- /**
281
+
304
-
305
- * 出力されたHTML全削除
306
-
307
- */
308
282
 
309
283
  const htmlDel = () => {
310
284
 
@@ -318,13 +292,7 @@
318
292
 
319
293
 
320
294
 
321
- /**
295
+
322
-
323
- * Webpack JSトランスパイル
324
-
325
- * @returns {*}
326
-
327
- */
328
296
 
329
297
  const webpackJs = () => {
330
298
 
@@ -342,13 +310,7 @@
342
310
 
343
311
 
344
312
 
345
- /**
313
+
346
-
347
- * オートリロード
348
-
349
- * @param done - コールバック
350
-
351
- */
352
314
 
353
315
  const sync = done => {
354
316
 
@@ -386,13 +348,7 @@
386
348
 
387
349
 
388
350
 
389
- /**
351
+
390
-
391
- * ファイル監視
392
-
393
- * @param done - コールバック
394
-
395
- */
396
352
 
397
353
  const watchFiles = done => {
398
354
 
@@ -416,11 +372,7 @@
416
372
 
417
373
 
418
374
 
419
- /**
375
+
420
-
421
- * デフォルト処理
422
-
423
- */
424
376
 
425
377
  exports.default = gulp.series(
426
378
 

2

修正

2021/10/12 13:53

投稿

KKsall
KKsall

score23

test CHANGED
@@ -1 +1 @@
1
- gulpのcssコンパイルでmixinで指定した通りメディアクエリがcssにでない
1
+ gulpのcssコンパイルで小さな画面サイズから大きな画面サイズへと順にメディアクエリを出力したいのです、順序が崩れてしまう
test CHANGED
@@ -1,5 +1,445 @@
1
1
  タイトル通りの内容です「gulpのcssコンパイルでmixinで指定した通りメディアクエリがcssにでないです
2
2
 
3
+ gulpファイル
4
+
5
+ ```ここに言語を入力
6
+
7
+ // gulpfile.js
8
+
9
+ const gulp = require('gulp'),
10
+
11
+ bs = require('browser-sync'),
12
+
13
+ changed = require('gulp-changed'),
14
+
15
+ plumber = require('gulp-plumber'),
16
+
17
+ gulpSass = require('gulp-sass'),
18
+
19
+ sourcemaps = require('gulp-sourcemaps'),
20
+
21
+ bourbon = require('node-bourbon'),
22
+
23
+ gulpPostcss = require('gulp-postcss'),
24
+
25
+ autoprefixer = require('autoprefixer'),
26
+
27
+ stylelint = require('stylelint'),
28
+
29
+ rename = require('gulp-rename'),
30
+
31
+ sortMediaQueries = require("node-css-mqpacker"),
32
+
33
+ gulpImagemin = require('gulp-imagemin'),
34
+
35
+ mozjpeg = require('imagemin-mozjpeg'),
36
+
37
+ pngquant = require('imagemin-pngquant'),
38
+
39
+ ejs = require('gulp-ejs'),
40
+
41
+ fs = require('fs'),
42
+
43
+ del = require('del'),
44
+
45
+ notify = require('gulp-notify'),
46
+
47
+ htmlbeautify = require("gulp-html-beautify"),
48
+
49
+ webpackStream = require("webpack-stream"),
50
+
51
+ webpack = require("webpack");
52
+
53
+
54
+
55
+ const setting = {
56
+
57
+ prefixer: {
58
+
59
+ cascade: false,
60
+
61
+ grid: "autoplace"
62
+
63
+ },
64
+
65
+ srcDir: 'docroot/html/', //ソースコードの存在するベースのディレクトリ
66
+
67
+ destDir: 'docroot/html/', //コンパイル後に出力するベースのディレクトリ
68
+
69
+ destRoot: 'docroot/html/', //出力するドキュメントルート
70
+
71
+ jsonDir: 'docroot/_json/', //json格納ディレクトリ
72
+
73
+ tmplDir: 'docroot/_templates/',
74
+
75
+ assetSrcDir: 'docroot/_src/', // アセットファイルのソースディレクトリ
76
+
77
+ assetDistDir: 'docroot/html/assets/', // アセットファイルの出力先ディレクトリ
78
+
79
+ webpack: require("./webpack.config")
80
+
81
+ };
82
+
83
+ bourbon.with('assets/css/**/*.css', setting.assetSrcDir + 'scss/**/*.scss');
84
+
85
+
86
+
87
+ const ejs_src = [
88
+
89
+ setting.tmplDir + "page/**/*.ejs"
90
+
91
+ ];
92
+
93
+ const json_src = JSON.parse(fs.readFileSync(setting.jsonDir + 'config.json'));
94
+
95
+
96
+
97
+
98
+
99
+ /**
100
+
101
+ * SCSS整形
102
+
103
+ */
104
+
105
+ const lintSass = () => {
106
+
107
+ return gulp
108
+
109
+ .src(setting.assetSrcDir + 'scss/**/*.scss', {
110
+
111
+ since: gulp.lastRun(lintSass)
112
+
113
+ })
114
+
115
+ .pipe(plumber())
116
+
117
+ .pipe(gulpPostcss([
118
+
119
+ stylelint({
120
+
121
+ fix: true,
122
+
123
+ // reporters: [
124
+
125
+ // { formatter: "string", console: true }
126
+
127
+ // ]
128
+
129
+ })
130
+
131
+ ], {syntax: require('postcss-scss')}))
132
+
133
+ .pipe(gulp.dest(setting.assetSrcDir + 'scss'));
134
+
135
+ }
136
+
137
+ exports.lintSass = lintSass;
138
+
139
+
140
+
141
+
142
+
143
+ /**
144
+
145
+ * SCSSコンパイル
146
+
147
+ * @returns {*}
148
+
149
+ */
150
+
151
+ const sassCompile = () => {
152
+
153
+ const processors = [
154
+
155
+ autoprefixer(setting.prefixer),
156
+
157
+ sortMediaQueries()
158
+
159
+ ];
160
+
161
+
162
+
163
+ return gulp.src([
164
+
165
+ setting.assetSrcDir + 'scss/**/*.scss',
166
+
167
+ '!' + setting.assetSrcDir + 'scss/lib-admin/**/*.scss'
168
+
169
+ ])
170
+
171
+ .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
172
+
173
+ .pipe(sourcemaps.init())
174
+
175
+ .pipe(gulpSass({
176
+
177
+ includePaths: bourbon.includePaths,
178
+
179
+ outputStyle: 'expanded'
180
+
181
+ }))
182
+
183
+ .pipe(gulpPostcss(processors))
184
+
185
+ .pipe(sourcemaps.write('./maps'))
186
+
187
+ .pipe(gulp.dest(setting.assetDistDir + 'css'));
188
+
189
+ };
190
+
191
+ exports.sassCompile = sassCompile;
192
+
193
+
194
+
195
+
196
+
197
+ /**
198
+
199
+ * 画像圧縮
200
+
201
+ */
202
+
203
+ const imageMin = () => {
204
+
205
+ return gulp
206
+
207
+ .src(setting.assetSrcDir + 'img/**')
208
+
209
+ // .pipe(changed(setting.assetDistDir + 'img'))
210
+
211
+ .pipe(
212
+
213
+ gulpImagemin([
214
+
215
+ pngquant({
216
+
217
+ quality: [.60, .70], // 画質
218
+
219
+ speed: 1 // スピード
220
+
221
+ }),
222
+
223
+ mozjpeg({quality: 65}), // 画質
224
+
225
+ gulpImagemin.svgo(),
226
+
227
+ gulpImagemin.optipng(),
228
+
229
+ gulpImagemin.gifsicle({optimizationLevel: 3}) // 圧縮率
230
+
231
+ ])
232
+
233
+ )
234
+
235
+ .pipe(gulp.dest(setting.assetDistDir + 'img'));
236
+
237
+ }
238
+
239
+ exports.imageMin = imageMin;
240
+
241
+
242
+
243
+
244
+
245
+ /**
246
+
247
+ * 圧縮済み画像全削除
248
+
249
+ */
250
+
251
+ const imageDel = () => {
252
+
253
+ return del(setting.assetDistDir + 'img')
254
+
255
+ }
256
+
257
+ exports.imageDel = imageDel;
258
+
259
+
260
+
261
+
262
+
263
+ /**
264
+
265
+ * ejs task
266
+
267
+ */
268
+
269
+ const ejsCompile = () => {
270
+
271
+ return gulp.src(ejs_src)
272
+
273
+ .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
274
+
275
+ .pipe(ejs({json: json_src}))
276
+
277
+ .pipe(rename({extname: '.html'}))
278
+
279
+ .pipe(htmlbeautify({
280
+
281
+ "indent_size": 4,
282
+
283
+ "indent_char": " ",
284
+
285
+ "max_preserve_newlines": 0,
286
+
287
+ "preserve_newlines": false,
288
+
289
+ "extra_liners": [],
290
+
291
+ }))
292
+
293
+ .pipe(gulp.dest(setting.destDir));
294
+
295
+ }
296
+
297
+ exports.ejsCompile = ejsCompile;
298
+
299
+
300
+
301
+
302
+
303
+ /**
304
+
305
+ * 出力されたHTML全削除
306
+
307
+ */
308
+
309
+ const htmlDel = () => {
310
+
311
+ return del(setting.destDir + '*.html')
312
+
313
+ }
314
+
315
+ exports.htmlDel = htmlDel;
316
+
317
+
318
+
319
+
320
+
321
+ /**
322
+
323
+ * Webpack JSトランスパイル
324
+
325
+ * @returns {*}
326
+
327
+ */
328
+
329
+ const webpackJs = () => {
330
+
331
+ // webpackStreamの第2引数にwebpackを渡す
332
+
333
+ return webpackStream(setting.webpack, webpack)
334
+
335
+ .pipe(gulp.dest(setting.assetDistDir + 'js'));
336
+
337
+ };
338
+
339
+ exports.webpackJs = webpackJs;
340
+
341
+
342
+
343
+
344
+
345
+ /**
346
+
347
+ * オートリロード
348
+
349
+ * @param done - コールバック
350
+
351
+ */
352
+
353
+ const sync = done => {
354
+
355
+ const initObj = {
356
+
357
+ port: 8080,
358
+
359
+ server: setting.destRoot,
360
+
361
+ reloadOnRestart: true,
362
+
363
+ notify: false,
364
+
365
+ ghostMode: false
366
+
367
+ };
368
+
369
+ bs.init(initObj);
370
+
371
+ done();
372
+
373
+ };
374
+
375
+
376
+
377
+ const browserReload = done => {
378
+
379
+ bs.reload();
380
+
381
+ done();
382
+
383
+ console.log('Browser reload completed');
384
+
385
+ };
386
+
387
+
388
+
389
+ /**
390
+
391
+ * ファイル監視
392
+
393
+ * @param done - コールバック
394
+
395
+ */
396
+
397
+ const watchFiles = done => {
398
+
399
+ gulp.watch([setting.assetSrcDir + 'img/**/*'], {interval: 500}, gulp.series(imageMin, browserReload));
400
+
401
+ gulp.watch([setting.assetSrcDir + 'js/**/*.js'], {interval: 500}, gulp.series(webpackJs, browserReload));
402
+
403
+ gulp.watch([setting.tmplDir + '**/*.ejs'], {interval: 500}, gulp.series(ejsCompile, browserReload));
404
+
405
+ gulp.watch([
406
+
407
+ setting.assetSrcDir + 'scss/**/*.scss',
408
+
409
+ '!' + setting.assetSrcDir + 'scss/lib-admin/**/*.scss'
410
+
411
+ ], {interval: 200}, gulp.series(sassCompile, browserReload));//lintSass,
412
+
413
+ done();
414
+
415
+ };
416
+
417
+
418
+
419
+ /**
420
+
421
+ * デフォルト処理
422
+
423
+ */
424
+
425
+ exports.default = gulp.series(
426
+
427
+ gulp.parallel(
428
+
429
+ gulp.series(lintSass, sassCompile),
430
+
431
+ gulp.series(htmlDel, ejsCompile),
432
+
433
+ sync
434
+
435
+ ), watchFiles
436
+
437
+ );
438
+
439
+
440
+
441
+ ```
442
+
3
443
  mixinファイル
4
444
 
5
445
  ```ここに言語を入力

1

修正

2021/10/12 13:49

投稿

KKsall
KKsall

score23

test CHANGED
File without changes
test CHANGED
@@ -86,28 +86,6 @@
86
86
 
87
87
  }
88
88
 
89
- }$breakpoints: (
90
-
91
- "xsm":"screen and (min-width: 320px)",
92
-
93
- "sm":"screen and (min-width: 576px)",
94
-
95
- "md":"screen and (min-width: 768px)",
96
-
97
- "lg":"screen and (min-width: 1000px)",
98
-
99
- ) !default;
100
-
101
-
102
-
103
- @mixin mq($breakpoint: xsm) {
104
-
105
- @media #{map-get( $breakpoints, $breakpoint )} {
106
-
107
- @content;
108
-
109
- }
110
-
111
89
  }
112
90
 
113
91
  ```