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

質問編集履歴

1

gulpfile.jsの中身をすべて追記しました

2019/08/21 08:42

投稿

makaruon22
makaruon22

スコア2

title CHANGED
File without changes
body CHANGED
@@ -25,15 +25,120 @@
25
25
 
26
26
 
27
27
  ▼gulpfile.js
28
+ const gulp = require('gulp');
29
+ const sass = require('gulp-sass');
30
+ const sassGlob = require("gulp-sass-glob");
31
+ const notify = require("gulp-notify");
32
+ const plumber = require("gulp-plumber");
33
+ const autoprefixer = require('gulp-autoprefixer');
34
+ const uglify = require('gulp-uglify');
35
+ const changed = require('gulp-changed');
36
+ const browserSync = require('browser-sync').create();
37
+ const sourcemaps = require('gulp-sourcemaps');
38
+ const queries = require('gulp-group-css-media-queries');
39
+ const imagemin = require('gulp-imagemin');
40
+ const pngquant = require('imagemin-pngquant');
41
+ const jpegtran = require('imagemin-jpegtran');
42
+
43
+ //setting : paths
44
+ const paths = {
45
+ 'allDist': './oscf/dist/*',
46
+ 'scss' : './src/scss/',
47
+ 'css' : './oscf/dist/css/',
48
+ 'jsSrc' : './src/js/',
49
+ 'jsDist' : './oscf/dist/js/',
50
+ 'imgSrc' : './src/img/',
51
+ 'imgDist': './oscf/dist/img/'
52
+ }
53
+
54
+ //setting : Sass Options
55
+ const sassOptions = {
56
+ outputStyle: 'compressed',
57
+ }
58
+
59
+ //gulpコマンドの省略
60
+ const { watch, series, task, src, dest } = require('gulp');
61
+
28
- //ejs
62
+ //Sass
29
- task('ejs', function() {
63
+ task('sass', function () {
30
- return(
64
+ return (
31
- src(paths.ejs + '**/*.ejs','!' + paths.ejs + '**/_*.ejs')
32
- .pipe(rename({ extname: '.html' }))
65
+ src(paths.scss + '**/*.scss')
66
+ .pipe(plumber({ errorHandler: notify.onError({
67
+ title: "Sassエラー発見!",
68
+ message: "<%= error.message %>"
69
+ })
70
+ }))
71
+ .pipe(sourcemaps.init())
72
+ .pipe(sass(sassOptions))
73
+ .pipe(sassGlob())
74
+ .pipe(queries())
75
+ .pipe(autoprefixer())
76
+ .pipe(sourcemaps.write())
77
+ .pipe(changed(paths.allDist))
33
- .pipe(dest(paths.html))
78
+ .pipe(dest(paths.css))
79
+ .pipe(browserSync.stream())
34
80
  );
35
81
  });
36
82
 
83
+
84
+ //JS Compress
85
+ task('js', function () {
86
+ return (
87
+ src(paths.jsSrc + '**/*.js')
88
+ .pipe(plumber({
89
+ errorHandler: notify.onError({
90
+ title: "JavaScriptエラー発見!",
91
+ message: "<%= error.message %>"
92
+ })
93
+ }))
94
+ .pipe(uglify())
95
+ .pipe(dest(paths.jsDist))
96
+ );
97
+ });
98
+
99
+
100
+ //jpg,png,svg,gif Compress
101
+ task('imagemin', function () {
102
+ return (
103
+ src(paths.imgSrc + '**/*.{jpg,jpeg,png,gif,svg}')
104
+ .pipe(imagemin(
105
+ [
106
+ pngquant({ quality: [.7, .85], speed: 1 }),
107
+ jpegtran({ quality: 80 }),
108
+ imagemin.svgo(),
109
+ imagemin.gifsicle()
110
+ ]
111
+ ))
112
+ .pipe(gulp.dest(paths.imgDist))
113
+ );
114
+ });
115
+
116
+
117
+ //browser auto reload
118
+ task('server', function() {
119
+ return (
120
+ browserSync.init({
121
+ server: {
122
+ baseDir: './oscf/',
123
+ }
124
+ })
125
+ );
126
+ });
127
+
128
+ task('browser-reload', function () {
129
+ return (
130
+ browserSync.reload()
131
+ );
132
+ });
133
+
134
+
135
+
136
+ //watch
137
+ watch([paths.scss + '**/*.scss'], task('sass'));
138
+ watch([paths.jsSrc + '**/*.js'], task('js'));
139
+ watch(['./oscf/**/*'], task('browser-reload'));
140
+ task('default', series('sass', 'js', 'server', 'browser-reload'));
141
+
37
142
  //const paths = {'ejs' : './src/ejs/'}
38
143
 
39
144