質問編集履歴

2

修正

2018/06/19 08:15

投稿

may88seiji
may88seiji

スコア79

test CHANGED
File without changes
test CHANGED
@@ -14,337 +14,117 @@
14
14
 
15
15
  ```sass.js
16
16
 
17
- // @file config.js
17
+ var gulp = require('gulp');
18
18
 
19
+ var gulpif = require('gulp-if');
20
+
21
+ var sass = require("gulp-sass");
22
+
23
+ var minify = require('gulp-minify-css');
24
+
25
+ var plumber = require('gulp-plumber');
26
+
27
+ var notify = require('gulp-notify');
28
+
29
+ var concat = require('gulp-concat');
30
+
31
+ var bourbon = require('node-bourbon');
32
+
19
- var path = require('path');
33
+ var neat = require('node-neat');
34
+
35
+ var config = require('../config').sass;
20
36
 
21
37
 
22
38
 
23
- var dest = './gulp/dest'; // 出力先ディレクトリ
39
+ var cache = require('gulp-cached');
24
40
 
25
- var src = './gulp/src'; // ソースディレクトリ
26
-
27
- var pub = './public'
41
+ var progeny = require('gulp-progeny');
28
-
29
- var relativeSrcPath = path.relative('.', src);
30
-
31
- var current = process.cwd();
32
-
33
- var spriteImageVersion = '20171206'; // スプライト画像キャッシュクリア用version
34
42
 
35
43
 
36
44
 
37
- var fs = require('fs');
38
-
39
- // themeをtheme.txtに追加しておく
40
-
41
- var thmes_text = fs.readFileSync('./gulp/themes.txt', 'utf-8');
45
+ bourbon.with('./public/assets/stylesheets/', './gulp/assets/stylesheets/**/!(_)*.scss');
42
-
43
- // ASPでサービスを追加するthemeを配列で取得
44
-
45
- var themes = thmes_text.split(/\r\n|\r|\n/);
46
46
 
47
47
 
48
48
 
49
- module.exports = {
49
+ gulp.task("sass-pc", function() {
50
50
 
51
- // 出力先の指定
51
+ gulp.src(config.pc.src)
52
52
 
53
- dest: dest,
53
+ .pipe(plumber({
54
54
 
55
- themes: themes,
55
+ errorHandler: notify.onError('Error: <%= error.message %>') // デスクトップに通知を出すよ
56
56
 
57
- sass: {
57
+ }))
58
58
 
59
- pc : {
59
+ .pipe(sass({
60
60
 
61
- src: [
61
+ includePaths: neat.includePaths
62
62
 
63
- src + '/stylesheets/pc/**/!(_)*.scss'
63
+ }))
64
64
 
65
- ],
65
+ //.pipe(concat(config.output))
66
66
 
67
- dest: dest + '/stylesheets/pc/',
67
+ .pipe(gulpif(config.minify, minify()))
68
68
 
69
- },
69
+ .pipe(gulp.dest(config.pc.dest));
70
70
 
71
- sp : {
72
-
73
- src: [
74
-
75
- src + '/stylesheets/sp/**/!(_)*.scss'
76
-
77
- ],
78
-
79
- dest: dest + '/stylesheets/sp/',
80
-
81
- },
71
+ });
82
-
83
- theme : {
84
-
85
- src: [
86
-
87
- src + '/stylesheets/themes/**/!(_)*.scss'
88
-
89
- ],
90
-
91
- dest: dest + '/stylesheets/themes/',
92
-
93
- },
94
-
95
- minify: true
96
-
97
- },
98
72
 
99
73
 
100
74
 
101
- sprite: {
75
+ gulp.task("sass-sp", function() {
102
76
 
103
- pc : {
77
+ gulp.src(config.sp.src)
104
78
 
105
- src: [
79
+ .pipe(plumber({
106
80
 
107
- src + '/images/pc/sprite/**.png'
81
+ errorHandler: notify.onError('Error: <%= error.message %>') // デスクトップに通知を出すよ
108
82
 
109
- ],
83
+ }))
110
84
 
111
- destCss: src + '/stylesheets/pc',
85
+ .pipe(sass({
112
86
 
113
- imgName: 'sprite_pc.png', //スプライトの画像
87
+ includePaths: neat.includePaths
114
88
 
115
- imgPath: '/sprite_pc.png?' + spriteImageVersion //生成されるscssに記載されるパス
89
+ }))
116
90
 
117
- },
91
+ //.pipe(concat(config.output))
118
92
 
119
- sp : {
93
+ .pipe(gulpif(config.minify, minify()))
120
94
 
121
- src: [
95
+ .pipe(gulp.dest(config.sp.dest));
122
96
 
123
- src + '/images/sp/sprite/**.png'
124
-
125
- ],
126
-
127
- destCss: src + '/stylesheets/sp',
128
-
129
- imgName: 'sprite_sp.png', //スプライトの画像
130
-
131
- imgPath: '/sprite_sp.png?' + spriteImageVersion //生成されるscssに記載されるパス
132
-
133
- },
97
+ });
134
-
135
- spriteImageVersion: spriteImageVersion,
136
-
137
- src: src,
138
-
139
- destImg: pub + '/',
140
-
141
- cssName: '_sprite.scss', //生成されるscss
142
-
143
- cssFormat: 'scss' //フォーマット
144
-
145
- },
146
98
 
147
99
 
148
100
 
149
- icons: {
101
+ gulp.task("sass-theme", function() {
150
102
 
151
- pc: {
103
+ gulp.src(config.theme.src)
152
104
 
153
- src: src + '/icons/pc/**',
105
+ .pipe(plumber({
154
106
 
155
- dest: dest + '/fonts/pc/'
107
+ errorHandler: notify.onError('Error: <%= error.message %>') // デスクトップに通知を出すよ
156
108
 
157
- },
109
+ }))
158
110
 
159
- sp: {
111
+ .pipe(sass({
160
112
 
161
- src: src + '/icons/sp/**',
113
+ includePaths: neat.includePaths
162
114
 
163
- dest: dest + '/fonts/sp/'
115
+ }))
164
116
 
165
- }
117
+ //.pipe(concat(config.output))
166
118
 
119
+ .pipe(gulpif(config.minify, minify()))
120
+
121
+ .pipe(gulp.dest(config.theme.dest));
122
+
167
- },
123
+ });
168
124
 
169
125
 
170
126
 
171
- images: {
172
-
173
- src: src + '/images/**',
174
-
175
- dest: dest + '/images/'
176
-
177
- },
178
-
179
-
180
-
181
- // jsのビルド設定
182
-
183
- js: {
184
-
185
- pc: {
186
-
187
- src: src + '/javascripts/**',
188
-
189
- dest: dest + '/javascripts/pc/'
190
-
191
- },
192
-
193
- sp: {
194
-
195
- src: src + '/javascripts/**',
196
-
197
- dest: dest + '/javascripts/sp'
198
-
199
- },
200
-
201
- lib: {
202
-
203
- pc: {
204
-
205
- src: src + '/javascripts/pc/lib/**',
206
-
207
- dest: dest + '/javascripts/pc/lib/'
208
-
209
- },
210
-
211
- sp: {
212
-
213
- src: src + '/javascripts/sp/lib/**',
214
-
215
- dest: dest + '/javascripts/sp/lib/'
216
-
217
- },
218
-
219
- output: 'lib.bundle.js'
220
-
221
- },
222
-
223
- uglify: true
224
-
225
- },
226
-
227
-
228
-
229
- // webpackの設定
230
-
231
- webpack: {
232
-
233
- pc: {
234
-
235
- entry: {
236
-
237
- customer: src + '/javascripts/pc/customer.js',
238
-
239
- backend: src + '/javascripts/pc/backend.js'
240
-
241
- },
242
-
243
- output: {
244
-
245
- filename: '[name].bundle.js',
246
-
247
- publicPath: '/assets/pc/'
248
-
249
- },
250
-
251
- resolve: {
252
-
253
- extensions: ['', '.js'],
254
-
255
- root: [
256
-
257
- path.join(current, src + '/javascripts/pc/component'),
258
-
259
- path.join(current, src + '/javascripts/pc')
260
-
261
- ]
262
-
263
- },
264
-
265
- externals: { jquery: "jQuery" },
266
-
267
- module: {
268
-
269
- loaders: [
270
-
271
- { test: /.html$/, loader: 'html?minimize' },
272
-
273
- { test: /.scss$/, loader: 'style!css!sass?sourceMap' },
274
-
275
- { test: /.css$/, loaders: ['style-loader','css-loader'] }
127
+ gulp.task('sass', ['sass-pc', 'sass-sp', 'sass-theme']);
276
-
277
- ]
278
-
279
- }
280
-
281
- },
282
-
283
- sp: {
284
-
285
- entry: {
286
-
287
- customer: src + '/javascripts/sp/customer.js'
288
-
289
- },
290
-
291
- output: {
292
-
293
- filename: '[name].js'
294
-
295
- },
296
-
297
- resolve: {
298
-
299
- extensions: ['', '.js'],
300
-
301
- root: [
302
-
303
- path.join(current, src + '/javascripts/common/lib'),
304
-
305
- path.join(current, src + '/javascripts/sp/lib'),
306
-
307
- path.join(current, src + '/javascripts/sp'),
308
-
309
- path.join(current, src + '/javascripts/pc')
310
-
311
- ]
312
-
313
- },
314
-
315
- externals: { jquery: "jQuery" },
316
-
317
- module: {
318
-
319
- loaders: [
320
-
321
- { test: /.html$/, loader: 'html?minimize' },
322
-
323
- { test: /.scss$/, loader: "style!css!sass?indentedSyntax=sass" }
324
-
325
- ]
326
-
327
- }
328
-
329
- }
330
-
331
- },
332
-
333
-
334
-
335
- watch: {
336
-
337
- js: relativeSrcPath + '/javascripts/**/**',
338
-
339
- sass: relativeSrcPath + '/stylesheets/**/**',
340
-
341
- images: relativeSrcPath + '/images/**/**'
342
-
343
- }
344
-
345
- }
346
-
347
-
348
128
 
349
129
  ```
350
130
 

1

誤字

2018/06/19 08:15

投稿

may88seiji
may88seiji

スコア79

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  差分のみをコンパイルできるように設定を変更したいです。
6
6
 
7
- gulpファイル設定の経験がなく、お教いただけると幸いです。
7
+ gulpファイル設定の経験がなく、何かアドバイスをもらえると助かります。
8
8
 
9
9
 
10
10