質問編集履歴

2

修正の為

2018/09/09 06:21

投稿

_bg
_bg

スコア13

test CHANGED
File without changes
test CHANGED
@@ -30,9 +30,9 @@
30
30
 
31
31
  ```
32
32
 
33
- ### 該当のソースコード
33
+ ### main.js
34
-
34
+
35
- ```javsScript
35
+ ```
36
36
 
37
37
  //jquery
38
38
 
@@ -56,7 +56,7 @@
56
56
 
57
57
  ```
58
58
 
59
- ```javsScript
59
+ ```
60
60
 
61
61
  import scrollTriggers from 'scroll-triggers';
62
62
 
@@ -86,6 +86,582 @@
86
86
 
87
87
  ```
88
88
 
89
+
90
+
91
+ ###gulpfile.js
92
+
93
+ ```
94
+
95
+ const fs = require('fs')
96
+
97
+ const gulp = require('gulp')
98
+
99
+ const sass = require('gulp-sass')
100
+
101
+ const postcss = require('gulp-postcss')
102
+
103
+ const autoprefixer = require('autoprefixer')
104
+
105
+ const plumber = require('gulp-plumber');
106
+
107
+ const sourcemaps = require('gulp-sourcemaps');
108
+
109
+ const flexBugsFixies = require('postcss-flexbugs-fixes')
110
+
111
+ const cssWring = require('csswring')
112
+
113
+ const ejs = require('gulp-ejs')
114
+
115
+ const data = require('gulp-data')
116
+
117
+ const imagemin = require('gulp-imagemin')
118
+
119
+ const browserSync = require('browser-sync').create()
120
+
121
+ const uglify = require('gulp-uglify');// js圧縮
122
+
123
+ const concat = require("gulp-concat");
124
+
125
+ const wait = require('gulp-wait');
126
+
127
+ const bulkSass = require('gulp-sass-bulk-import');
128
+
129
+ const ftp = require('vinyl-ftp')//ftpアップロード
130
+
131
+ const fancyLog = require('fancy-log')//アップロードのログ表示
132
+
133
+ const srcset = require('gulp-sugar-srcset')//retina対応
134
+
135
+ const webpack = require("webpack");//gulpでwebpackを使用
136
+
137
+ const webpackStream = require("webpack-stream");
138
+
139
+ const webpackConfig = require("./webpack.config");
140
+
141
+ const cleanCSS = require("gulp-clean-css");
142
+
143
+ const rename = require("gulp-rename");
144
+
145
+
146
+
147
+
148
+
149
+
150
+
151
+
152
+
153
+ // const configJsonData = fs.readFileSync('./src/config.json')
154
+
155
+ // const configObj = JSON.parse(configJsonData)
156
+
157
+
158
+
159
+ // const PostcssMixins = require('postcss-mixins');
160
+
161
+ // const PostcssImport = require('postcss-import');
162
+
163
+
164
+
165
+ const autopreFixerOption = {
166
+
167
+ grid : true
168
+
169
+ }
170
+
171
+
172
+
173
+ // const ejsDataOption = {
174
+
175
+ // config:configObj
176
+
177
+ // }
178
+
179
+
180
+
181
+ const ejsSettingOptions = {
182
+
183
+ ext:'.html'
184
+
185
+ }
186
+
187
+
188
+
189
+ const postcssOption = [
190
+
191
+ flexBugsFixies,
192
+
193
+ // PostcssMixins,
194
+
195
+ // PostcssImport,
196
+
197
+ autoprefixer({
198
+
199
+ browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
200
+
201
+ cascade:false
202
+
203
+ })
204
+
205
+ //cssWring
206
+
207
+ ]
208
+
209
+
210
+
211
+ const browserSyncOption = {
212
+
213
+ server:'./public'
214
+
215
+ }
216
+
217
+
218
+
219
+ var paths = {
220
+
221
+ 'scss': './src/sass/',
222
+
223
+ // 'css': './dist/css/',
224
+
225
+ // 'js': './dist/js/',
226
+
227
+ 'ejs': './view/'
228
+
229
+ }
230
+
231
+
232
+
233
+ //sass
234
+
235
+ gulp.task('sass',()=>{
236
+
237
+ return gulp.src('./src/assets/sass/*.scss')
238
+
239
+ .pipe(bulkSass())//フォルダごとにimportされているものもコンパイル化
240
+
241
+ .pipe(plumber())
242
+
243
+ .pipe(sourcemaps.init())
244
+
245
+ .pipe(sass().on('error',sass.logError))
246
+
247
+ .pipe(postcss(postcssOption))
248
+
249
+ .pipe(gulp.dest('./public/assets/css/'))
250
+
251
+ })
252
+
253
+
254
+
255
+
256
+
257
+ //ejs
258
+
259
+ gulp.task('ejs',()=>{
260
+
261
+ return gulp.src(['./src/view/page/**/*.ejs','./src/view/page/*.ejs','!'+'./src/view/page/**/_*.ejs'])
262
+
263
+ .pipe(ejs({},{},ejsSettingOptions))
264
+
265
+ .pipe(gulp.dest('./public'))
266
+
267
+ })
268
+
269
+
270
+
271
+
272
+
273
+ //img圧縮
274
+
275
+ // gulp.task('imagemin',()=>{
276
+
277
+ // return gulp
278
+
279
+ // .src('./src/img/*')
280
+
281
+ // .pipe(imagemin())
282
+
283
+ // .pipe(gulp.dest('./public/assets/img/'))
284
+
285
+ // })
286
+
287
+
288
+
289
+ //JS圧縮
290
+
291
+ gulp.task('minify-js', function() {
292
+
293
+ var files = []
294
+
295
+ return gulp.src(["./src/assets/js/vendor/*.js","!"+"./src/assets/js/vendor/jquery.min.js"])
296
+
297
+ .pipe(uglify())
298
+
299
+ .pipe(concat('bundle.js'))
300
+
301
+ .pipe(gulp.dest('./public/assets/js/vendor/'));
302
+
303
+ });
304
+
305
+
306
+
307
+ // gulp.task("minify-css", function() {
308
+
309
+ // return gulp.src('./src/assets/css/**/*.css')
310
+
311
+ // .pipe(cleanCSS())
312
+
313
+ // .pipe(rename({
314
+
315
+ // extname: '.commoncustom.css'
316
+
317
+ // }))
318
+
319
+ // .pipe(gulp.dest('./public/assets/css/'));
320
+
321
+ // });
322
+
323
+
324
+
325
+ //ftpアップロード
326
+
327
+ gulp.task('ftp',function(){
328
+
329
+ const ftpConfig = {
330
+
331
+ host:'gulp.gulp.jp',
332
+
333
+ user:'gulp',
334
+
335
+ password:'gulp',
336
+
337
+ log:fancyLog
338
+
339
+ }
340
+
341
+ const connect = ftp.create(ftpConfig)
342
+
343
+ const ftpUploadFiles = './public.**/*'
344
+
345
+ const ftpUploadConfig = {
346
+
347
+ buffer:false
348
+
349
+ }
350
+
351
+ const remoteDistDir = 'public_html'
352
+
353
+
354
+
355
+ return gulp.src(ftpUploadFiles,ftpUploadConfig)
356
+
357
+ .pipe(connect.newer(remoteDistDir))
358
+
359
+ .pipe(connect.dest(remoteDistDir))
360
+
361
+ })
362
+
363
+
364
+
365
+ //retina対応
366
+
367
+ // gulp.task('sugar-srcset',function(){
368
+
369
+ // return gulp.src('./src/assets/img/*')
370
+
371
+ // .pipe(srcset())
372
+
373
+ // .pipe(gulp.dest('./public/assets/img/'))
374
+
375
+ // })
376
+
377
+
378
+
379
+
380
+
381
+ // ローカルサーバー
382
+
383
+ gulp.task('server', (done) => {
384
+
385
+ browserSync.init(browserSyncOption);
386
+
387
+ done();
388
+
389
+ });
390
+
391
+
392
+
393
+ //ブラウザリロード
394
+
395
+ gulp.task('watch',(done)=>{
396
+
397
+ const browserReload = (done) =>{
398
+
399
+ browserSync.reload()
400
+
401
+ done();
402
+
403
+ }
404
+
405
+
406
+
407
+
408
+
409
+ gulp.src('./src/assets/img/**/*')
410
+
411
+ .pipe(gulp.dest('./public/assets/img/'))//imgをそのままpublicに書き出し
412
+
413
+
414
+
415
+ gulp.watch("./src/view/page/**/*.ejs",gulp.series('ejs'));
416
+
417
+
418
+
419
+ gulp.watch("./src/assets/sass/**/*.scss",gulp.series('sass'));
420
+
421
+ // gulp.watch("./src/assets/css/**/*.css",gulp.series('minify-css'));
422
+
423
+
424
+
425
+ gulp.watch('./src/assets/js/main.js/',gulp.series('webpack'));
426
+
427
+
428
+
429
+ gulp.src('./dist/bundle.js')
430
+
431
+ .pipe(gulp.dest('./public/assets/js/vendor/'))//main.jsをそのままpublicに書き出し
432
+
433
+
434
+
435
+ // gulp.src(["./src/assets/js/vendor/*.js","!"+"./src/assets/js/vendor/jquery.min.js"])
436
+
437
+ // .pipe(uglify())
438
+
439
+ // .pipe(concat('bundle.js'))
440
+
441
+ // .pipe(gulp.dest('./public/assets/js/vendor/'));//その他jsを圧縮してpublicに書き出し
442
+
443
+
444
+
445
+
446
+
447
+
448
+
449
+
450
+
451
+ gulp.watch('./src/**/*',browserReload)
452
+
453
+ })
454
+
455
+
456
+
457
+ gulp.task('webpack',function(){
458
+
459
+ return webpackStream(webpackConfig, webpack)
460
+
461
+ .pipe(gulp.dest("./public/assets/js/vendor/"));
462
+
463
+ });
464
+
465
+
466
+
467
+
468
+
469
+ //タスク実行
470
+
471
+ gulp.task('default',gulp.series('server','watch'))
472
+
473
+ ```
474
+
475
+ ###webpack.config.js
476
+
477
+ ```
478
+
479
+ module.exports = {
480
+
481
+ mode: "production",
482
+
483
+ entry:'./src/assets/js/main.js',
484
+
485
+ output:{
486
+
487
+ filename:'bundle.js'
488
+
489
+ },
490
+
491
+ module:{
492
+
493
+ rules:[
494
+
495
+ {
496
+
497
+ test:/.js$/,
498
+
499
+ use:{
500
+
501
+ loader:'babel-loader',
502
+
503
+ options:{
504
+
505
+ presets:['@babel/preset-env']
506
+
507
+ }
508
+
509
+ }
510
+
511
+ },
512
+
513
+ {
514
+
515
+ test: /.css$/,
516
+
517
+ use: ['style-loader', 'css-loader']
518
+
519
+ },
520
+
521
+ {
522
+
523
+ test: /.gif|png|jpg|eot|wof|woff|ttf|svg$/,
524
+
525
+ use: ['url-loader']
526
+
527
+ }
528
+
529
+ ]
530
+
531
+ }
532
+
533
+ }
534
+
535
+
536
+
537
+ ```
538
+
539
+ ###package.json
540
+
541
+ ```
542
+
543
+ {
544
+
545
+ "name": "gulp-tutorial",
546
+
547
+ "version": "1.0.0",
548
+
549
+ "description": "",
550
+
551
+ "main": "index.js",
552
+
553
+ "scripts": {
554
+
555
+ "test": "echo \"Error: no test specified\" && exit 1",
556
+
557
+ "prod": "webpack --mode production",
558
+
559
+ "dev": "webpack --mode development -w"
560
+
561
+ },
562
+
563
+ "keywords": [],
564
+
565
+ "author": "",
566
+
567
+ "license": "ISC",
568
+
569
+ "devDependencies": {
570
+
571
+ "@babel/core": "^7.0.0-rc.1",
572
+
573
+ "@babel/preset-env": "^7.0.0-rc.1",
574
+
575
+ "autoprefixer": "^9.1.0",
576
+
577
+ "babel-loader": "^8.0.0-beta.4",
578
+
579
+ "browser-sync": "^2.24.6",
580
+
581
+ "css-loader": "^1.0.0",
582
+
583
+ "csswring": "^7.0.0",
584
+
585
+ "fancy-log": "^1.3.2",
586
+
587
+ "gulp": "^4.0.0",
588
+
589
+ "gulp-clean-css": "^3.10.0",
590
+
591
+ "gulp-concat": "^2.6.1",
592
+
593
+ "gulp-data": "^1.3.1",
594
+
595
+ "gulp-ejs": "^3.1.3",
596
+
597
+ "gulp-htmlmin": "^4.0.0",
598
+
599
+ "gulp-imagemin": "^4.1.0",
600
+
601
+ "gulp-plumber": "^1.2.0",
602
+
603
+ "gulp-postcss": "^8.0.0",
604
+
605
+ "gulp-rename": "^1.4.0",
606
+
607
+ "gulp-sass": "^4.0.1",
608
+
609
+ "gulp-sass-bulk-import": "^1.0.1",
610
+
611
+ "gulp-sass-glob": "^1.0.9",
612
+
613
+ "gulp-sourcemaps": "^2.6.4",
614
+
615
+ "gulp-sugar-srcset": "^0.4.1",
616
+
617
+ "gulp-uglify": "^3.0.1",
618
+
619
+ "gulp-wait": "0.0.2",
620
+
621
+ "imagemin-pngquant": "^6.0.0",
622
+
623
+ "postcss-flexbugs-fixes": "^4.1.0",
624
+
625
+ "postcss-import": "^12.0.0",
626
+
627
+ "postcss-mixins": "^6.2.0",
628
+
629
+ "style-loader": "^0.23.0",
630
+
631
+ "url-loader": "^1.1.1",
632
+
633
+ "vinyl-ftp": "^0.6.1",
634
+
635
+ "webpack": "^4.17.1",
636
+
637
+ "webpack-cli": "^3.1.0",
638
+
639
+ "webpack-stream": "^5.1.1"
640
+
641
+ },
642
+
643
+ "dependencies": {
644
+
645
+ "animate.css": "^3.7.0",
646
+
647
+ "jquery": "^3.3.1",
648
+
649
+ "luxy.js": "^0.1.0",
650
+
651
+ "scrolltrigger": "^1.0.1",
652
+
653
+ "scrolltrigger-classes": "^0.3.6",
654
+
655
+ "slick-carousel": "^1.8.1",
656
+
657
+ "useragent": "^2.3.0"
658
+
659
+ }
660
+
661
+ }
662
+
663
+ ```
664
+
89
665
  ### 不明点
90
666
 
91
667
  jqueryやslick.jsは上記の記述で問題なくインポートできており、動いています。

1

一部内容修正の為

2018/09/09 06:21

投稿

_bg
_bg

スコア13

test CHANGED
File without changes
test CHANGED
@@ -15,6 +15,8 @@
15
15
  ※下記コード参考元です。
16
16
 
17
17
  [https://www.npmjs.com/package/scrolltrigger-classes](https://www.npmjs.com/package/scrolltrigger-classes)
18
+
19
+ [https://www.npmjs.com/package/scroll-triggers](https://www.npmjs.com/package/scroll-triggers)
18
20
 
19
21
 
20
22
 
@@ -50,15 +52,35 @@
50
52
 
51
53
  //scrolltrigger
52
54
 
53
- import 'scrolltrigger-classes'
55
+ import 'scroll-triggers'
54
56
 
55
57
  ```
56
58
 
57
59
  ```javsScript
58
60
 
59
- document.addEventListener('DOMContentLoaded', function(){
61
+ import scrollTriggers from 'scroll-triggers';
60
62
 
61
- var trigger = new ScrollTrigger();
63
+ scrollTriggers({
64
+
65
+ '.some-selector': {
66
+
67
+ start: '.selector',
68
+
69
+ end: '.selector',
70
+
71
+ className: 'class-to-add',
72
+
73
+ image: 'image/path.jpg',
74
+
75
+ position: 'top|middle|bottom',
76
+
77
+ progress: true|false,
78
+
79
+ inView: function(el, options) {},
80
+
81
+ outOfView: function(el, options) {}
82
+
83
+ }
62
84
 
63
85
  });
64
86