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

質問編集履歴

12

タイトル名のgulpのバージョンを追記

2019/05/13 03:37

投稿

wa_
wa_

スコア55

title CHANGED
@@ -1,1 +1,1 @@
1
- 【追記】gulpを使用して同階層でdestフォルダにsassとpugを自動コンパイルさせたい
1
+ 【追記】gulp4を使用して同階層でdestフォルダにsassとpugを自動コンパイルさせたい
body CHANGED
File without changes

11

マルチポスト先のURL間違いを修正

2019/05/13 03:37

投稿

wa_
wa_

スコア55

title CHANGED
File without changes
body CHANGED
@@ -394,7 +394,7 @@
394
394
  npm v6.4.1
395
395
 
396
396
  ### マルチポスト先
397
- [スタックオーバー](https://stackexchange.com/users/15803793/wa?tab=inbox)
397
+ [スタックオーバー](https://ja.stackoverflow.com/users/34049/wa)
398
398
 
399
399
 
400
400
  ここにより詳細な情報を記載してください。

10

スタックオーバーで質問したものは全てこの質問に属します

2019/05/06 02:57

投稿

wa_
wa_

スコア55

title CHANGED
File without changes
body CHANGED
@@ -393,5 +393,8 @@
393
393
  node v10.15.3
394
394
  npm v6.4.1
395
395
 
396
+ ### マルチポスト先
397
+ [スタックオーバー](https://stackexchange.com/users/15803793/wa?tab=inbox)
396
398
 
399
+
397
400
  ここにより詳細な情報を記載してください。

9

試したことを追記しました。

2019/05/06 02:49

投稿

wa_
wa_

スコア55

title CHANGED
File without changes
body CHANGED
@@ -168,7 +168,7 @@
168
168
  /**
169
169
  * ローカルサーバーを起動します。
170
170
  */
171
- function browser-sync() {
171
+ function browsersync() {
172
172
  browserSync({
173
173
  server: {
174
174
  baseDir: dest.root,
@@ -376,9 +376,15 @@
376
376
  ・変数名が間違えているのかチェック
377
377
  ・package.jsonのアップデート
378
378
  ・gulpfile.jsのwatch部分の記述を変更
379
- フォルダ対してgulpをアップデート
379
+ 以下サイト従っパッケージのgulpをアップデートするが
380
+  package.jsonではgulp 4.01
381
+ コマンドプロンプトでgulp -vをするとなぜか
382
+  CLI version 2.1.0
383
+  Local version 3.9.1
384
+  となってしまう
385
+  https://kenyo--c.com/css/1572/
386
+
380
387
 
381
-
382
388
  ### 補足情報(FW/ツールのバージョンなど)
383
389
  gulpのバージョン
384
390
  CLI version 2.1.0

8

タグの追加

2019/04/24 05:08

投稿

wa_
wa_

スコア55

title CHANGED
File without changes
body CHANGED
File without changes

7

タイトル変更

2019/04/24 02:13

投稿

wa_
wa_

スコア55

title CHANGED
@@ -1,1 +1,1 @@
1
- 【追記】gulpを使用して同階層でdestフォルダにsassを自動コンパイルするとエラーになる
1
+ 【追記】gulpを使用して同階層でdestフォルダにsassとpugを自動コンパイルさせたい
body CHANGED
File without changes

6

初心者マークを付与

2019/04/24 01:38

投稿

wa_
wa_

スコア55

title CHANGED
File without changes
body CHANGED
File without changes

5

追記完了

2019/04/24 01:34

投稿

wa_
wa_

スコア55

title CHANGED
@@ -1,1 +1,1 @@
1
- gulpfile.jsのsassでエラーになる
1
+ 【追記】gulpを使用して同階層destフォルダにsassを自動コンパイルするとエラーになる
body CHANGED
@@ -376,6 +376,7 @@
376
376
  ・変数名が間違えているのかチェック
377
377
  ・package.jsonのアップデート
378
378
  ・gulpfile.jsのwatch部分の記述を変更
379
+ ・このフォルダに対してgulpをアップデート
379
380
 
380
381
 
381
382
  ### 補足情報(FW/ツールのバージョンなど)

4

表記が崩れていたので修正しました。

2019/04/24 01:32

投稿

wa_
wa_

スコア55

title CHANGED
File without changes
body CHANGED
@@ -267,9 +267,9 @@
267
267
 
268
268
  include /_includes/_footer
269
269
  include /_includes/_script
270
+ ```
270
271
 
271
272
 
272
-
273
273
  ### base.scss
274
274
  ```scss
275
275
  $pc: 1024px; // PC

3

新たにエラーが出たのでgulpfile.jsとpackage.jsonを変更しました。文字数がオーバーしたのでmeta.pugは消去しました。

2019/04/23 06:22

投稿

wa_
wa_

スコア55

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,8 @@
1
1
  ### 前提・実現したいこと
2
+ 【実現したいこと】
3
+ pug、css、sassを同階層でdestフォルダにリアルタイムで自動コンパイルと
4
+ cssファイルはコピーさせること
5
+
2
6
  【問題】
3
7
  js,gulpに関して初心者です。
4
8
  gulpを使ってsassを同じ階層で自動コンパイルするとエラーが出る。
@@ -8,7 +12,6 @@
8
12
  肉付けしていきました。
9
13
  sassを入れる前はpugなど、全て自動コンパイルが出来ていました。
10
14
 
11
-
12
15
  【参考サイト】
13
16
  https://www.tam-tam.co.jp/tipsnote/html_css/post10973.html
14
17
  http://hiromode.hatenablog.com/entry/2018/07/29/154522
@@ -16,12 +19,32 @@
16
19
 
17
20
 
18
21
  ### 発生している問題・エラーメッセージ
22
+ ```エラー
23
+ gulp.task('default', gulp.series(gulp.parallel(html, sass_style, css, js), gulp.series(browsersync, watchFiles)));
24
+ ^
19
25
 
26
+ TypeError: gulp.parallel is not a function
27
+ at Object.<anonymous> (C:\Users\Documents\pug-sass-test\gulpfile.js:139:39)
28
+ at Module._compile (internal/modules/cjs/loader.js:701:30)
29
+ at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
30
+ at Module.load (internal/modules/cjs/loader.js:600:32)
31
+ at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
32
+ at Function.Module._load (internal/modules/cjs/loader.js:531:3)
33
+ at Module.require (internal/modules/cjs/loader.js:637:17)
34
+ at require (internal/modules/cjs/helpers.js:22:18)
35
+ at Liftoff.handleArguments (C:\Users\Documents\pug-sass-test\node_modules\gulp\bin\gulp.js:116:3)
36
+ at Liftoff.execute (C:\Users\Documents\pug-sass-test\node_modules\liftoff\index.js:203:12)
37
+ npm ERR! code ELIFECYCLE
38
+ npm ERR! errno 1
39
+ npm ERR! gulp-pug-test@1.0.0 start: `gulp`
40
+ npm ERR! Exit status 1
41
+ npm ERR!
20
- ![エラーメッセージ](2eb3860dff57e39ed2709cea4161082f.jpeg)
42
+ npm ERR! Failed at the gulp-pug-test@1.0.0 start script.
43
+ npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
21
44
 
22
- 【log】
45
+ ```
23
- ![ログ](4b381022ac1162b3d067958e51bbb930.jpeg)
24
46
 
47
+
25
48
  ### ディレクトリ構造
26
49
  ![ディレクトリ構造](4129bd673fb6b6f2166bf86181cec354.jpeg)
27
50
 
@@ -56,7 +79,7 @@
56
79
  // JSONファイルのディレクトリを変数化。
57
80
  'json': 'src/_data/',
58
81
  'css': 'src/**/*.css',
59
- 'sass': ['src/**/*.scss', '!' + 'src/**/_*.scss'],
82
+ 'sass_style': ['src/**/*.scss', '!' + 'src/**/_*.scss'],
60
83
  //'styleguideWatch': 'src/**/*.scss',
61
84
  'js': 'src/**/*.js'
62
85
  };
@@ -112,7 +135,7 @@
112
135
  /**
113
136
  * sassファイルをdestディレクトリに同じ階層として出力(コピー)します。
114
137
  */
115
- function sass() {
138
+ function sass_style() {
116
139
  const plugins = [flexBugsFixes(), autoprefixer()];
117
140
  return gulp.src(src.scss, {base: src.root})
118
141
  .pipe(sassGlob())
@@ -133,47 +156,45 @@
133
156
  .pipe(browserSync.reload({ stream: true }));
134
157
  }
135
158
 
136
-
137
-
138
159
  /**
139
160
  * jsファイルをdestディレクトリに出力(コピー)します。
140
161
  */
141
- gulp.task('js', function() {
162
+ function js() {
142
163
  return gulp.src(src.js, {base: src.root})
143
164
  .pipe(gulp.dest(dest.root))
144
165
  .pipe(browserSync.reload({stream: true}));
145
- });
166
+ }
146
167
 
147
168
  /**
148
169
  * ローカルサーバーを起動します。
149
170
  */
150
- gulp.task('browser-sync', function() {
171
+ function browser-sync() {
151
172
  browserSync({
152
173
  server: {
153
174
  baseDir: dest.root,
154
175
  index: "index.html"
155
176
  }
156
177
  });
157
- });
178
+ };
158
179
 
159
180
  /**
160
181
  * PugのコンパイルやCSSとjsの出力、browser-syncのリアルタイムプレビューを実行します。
161
182
  */
162
- gulp.task('watch', ['html', 'sass', 'css', 'js', 'browser-sync'], function() {
183
+ function watchFiles(done) {
163
- gulp.watch(src.html, gulp.task('html'));
184
+ gulp.watch(src.html).on('change', gulp.series(html, browserReload));
185
+ gulp.watch(src.scss).on('change', gulp.series(sass_style, browserReload));
186
+ gulp.watch(src.css).on('change', gulp.series(css, browserReload));
164
- gulp.watch(src.scss, gulp.task('sass'));
187
+ gulp.watch(src.js).on('change', gulp.series(js, browserReload));
165
- gulp.watch(src.css, gulp.task('css'));
166
- gulp.watch(src.js, gulp.task('js'));
167
- //gulp.watch(src.styleguideWatch, ['styleguide']);
168
- });
188
+ }
169
189
 
190
+ gulp.task('default', gulp.series(gulp.parallel(html, sass_style, css, js), gulp.series(browsersync, watchFiles)));
191
+
170
192
  /**
171
193
  * 開発に使うタスクです。
172
194
  * package.jsonに設定をして、`npm run default`で実行できるようにしています。
173
195
  */
174
196
  gulp.task('default', ['watch']);
175
197
 
176
-
177
198
  ```
178
199
  ### index.pug
179
200
  ```pug
@@ -247,56 +268,8 @@
247
268
  include /_includes/_footer
248
269
  include /_includes/_script
249
270
 
250
- ```
251
- ### _meta.pug
252
- ```pug
253
- meta(charset="UTF-8")
254
- meta(http-equiv="X-UA-Compatible" content="IE=edge")
255
- meta(name="viewport" content="width=device-width, initial-scale=1.0")
256
- meta(name="format-detection" content="telephone=no")
257
- if pageTitle
258
- title #{pageTitle} | #{site.name}
259
- else
260
- title #{site.name}
261
- meta(name="description" content=pageDescription)
262
- meta(name="keywords" content=pageKeywords)
263
271
 
264
- block css
265
- link(rel="stylesheet" href="/assets/css/base/reset.css")
266
- link(rel="stylesheet" href="/assets/css/base/common.css")
267
272
 
268
- //- OGP
269
- if pageOgpTitle
270
- meta(property="og:title" content=pageOgpTitle + ' | ' + site.name)
271
- else
272
- meta(property="og:title" content=site.name)
273
- meta(property="og:type" content=pageOgpType)
274
- meta(property="og:image" content=pageOgpImage)
275
- meta(property="og:url" content=site.rootUrl + pageUrl)
276
- meta(property="og:description" content=pageDescription)
277
- meta(property="og:site_name" content=site.name)
278
- meta(property="og:locale" content=pageLang)
279
-
280
- //- OGP Facebook insights
281
- meta(property="fb:admins" content="")
282
- meta(property="fb:app_id" content="")
283
- //- /OGP Facebook insights
284
-
285
- //- OGP Twitter Cards
286
- meta(name="twitter:card" content="summary")
287
- meta(name="twitter:site" content="@")
288
- //- /OGP Twitter Cards
289
-
290
- //- /OGP
291
-
292
- ```
293
- ### _scriput.pug
294
- ```pug
295
- block js
296
- script(src="/assets/js/common.js")
297
-
298
- ```
299
-
300
273
  ### base.scss
301
274
  ```scss
302
275
  $pc: 1024px; // PC
@@ -377,33 +350,34 @@
377
350
  "author": "テンプレ作成者名",
378
351
  "license": "MIT",
379
352
  "devDependencies": {
380
- "browser-sync": "^2.26.3",
353
+ "browser-sync": "^2.26.4",
381
- "gulp": "^3.9.1",
354
+ "gulp": "^4.0.1",
382
- "gulp-autoprefixer": "^6.0.0",
355
+ "gulp-autoprefixer": "^6.1.0",
383
356
  "gulp-clean-css": "^4.0.0",
384
357
  "gulp-data": "^1.3.1",
385
- "gulp-notify": "^2.2.0",
358
+ "gulp-notify": "^3.2.0",
386
359
  "gulp-plumber": "^1.2.1",
387
360
  "gulp-postcss": "^8.0.0",
388
- "gulp-pug": "^3.3.0",
361
+ "gulp-pug": "^4.0.1",
389
362
  "gulp-rename": "^1.4.0",
390
363
  "gulp-sass": "^4.0.2",
391
364
  "gulp-sass-glob": "^1.0.9",
392
365
  "postcss-flexbugs-fixes": "^4.1.0"
393
366
  }
394
367
  }
395
-
396
-
397
368
  ```
398
369
 
399
370
  ### 試したこと
400
371
 
401
- gulpのバージョン違いによるものかと考えたので
372
+ gulpのバージョン違いによるものかと考えたので
402
373
  参考サイトに従い、変更すべきところを変更しました。
403
374
  https://qiita.com/hibikikudo/items/493fbfbbea183c94b38b
404
375
 
405
- 変数名が間違えているのかチェック
376
+ 変数名が間違えているのかチェック
377
+ ・package.jsonのアップデート
378
+ ・gulpfile.jsのwatch部分の記述を変更
406
379
 
380
+
407
381
  ### 補足情報(FW/ツールのバージョンなど)
408
382
  gulpのバージョン
409
383
  CLI version 2.1.0

2

概要を追記

2019/04/23 06:19

投稿

wa_
wa_

スコア55

title CHANGED
@@ -1,1 +1,1 @@
1
- gulpfile.jsのsassでエラーに関す質問
1
+ gulpfile.jsのsassでエラーに
body CHANGED
@@ -6,6 +6,7 @@
6
6
  【概要】
7
7
  とあるサイトからテンプレートをダウンロードして、自分のしたいことを
8
8
  肉付けしていきました。
9
+ sassを入れる前はpugなど、全て自動コンパイルが出来ていました。
9
10
 
10
11
 
11
12
  【参考サイト】

1

ディレクトリ構造、他のファイル情報を追加

2019/04/23 01:58

投稿

wa_
wa_

スコア55

title CHANGED
File without changes
body CHANGED
@@ -16,76 +16,16 @@
16
16
 
17
17
  ### 発生している問題・エラーメッセージ
18
18
 
19
- ```
20
- function sass() {
19
+ ![エラーメッセージ](2eb3860dff57e39ed2709cea4161082f.jpeg)
21
- ^
22
20
 
23
- SyntaxError: Identifier 'sass' has already been declared
24
- at new Script (vm.js:80:7)
25
- at createScript (vm.js:274:10)
26
- at Object.runInThisContext (vm.js:326:10)
27
- at Module._compile (internal/modules/cjs/loader.js:664:28)
28
- at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
29
- at Module.load (internal/modules/cjs/loader.js:600:32)
30
- at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
31
- at Function.Module._load (internal/modules/cjs/loader.js:531:3)
32
- at Module.require (internal/modules/cjs/loader.js:637:17)
33
- at require (internal/modules/cjs/helpers.js:22:18)
34
- npm ERR! code ELIFECYCLE
35
- npm ERR! errno 1
36
- npm ERR! gulp-pug-test@1.0.0 start: `gulp`
37
- npm ERR! Exit status 1
38
- npm ERR!
39
- npm ERR! Failed at the gulp-pug-test@1.0.0 start script.
40
- npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
41
-
42
- npm ERR! A complete log of this run can be found in:
43
- npm ERR! C:\Users\ユーザー名\AppData\Roaming\npm-cache\_logs\2019-04-22T02_35_47_045Z-debug.log
44
-
45
21
  【log】
46
- 0 info it worked if it ends with ok
47
- 1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
48
- 1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
49
- 1 verbose cli 'start' ]
50
- 2 info using npm@6.4.1
51
- 3 info using node@v10.15.3
52
- 4 verbose run-script [ 'prestart', 'start', 'poststart' ]
53
- 5 info lifecycle gulp-pug-test@1.0.0~prestart: gulp-pug-test@1.0.0
54
- 6 info lifecycle gulp-pug-test@1.0.0~start: gulp-pug-test@1.0.0
55
- 7 verbose lifecycle gulp-pug-test@1.0.0~start: unsafe-perm in lifecycle true
56
- 8 verbose lifecycle gulp-pug-test@1.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\ユーザー名\Documents\ディレクトリ名\ディレクトリ名\ディレクトリ名\ディレクトリ名\pug-sass-test\node_modules.bin;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\tidy2_x64;C:\xampp\php;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\nodejs\;C:\ProgramData\ComposerSetup\bin;C:\Program Files\Git\cmd;C:\Users\polyphony10\AppData\Local\Microsoft\WindowsApps;C:\Users\polyphony10\AppData\Roaming\npm;C:\Users\polyphony10\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\polyphony10\AppData\Roaming\Composer\vendor\bin
57
- 9 verbose lifecycle gulp-pug-test@1.0.0~start: CWD: C:\Users\ユーザー名\Documents\ディレクトリ名\ディレクトリ名\ディレクトリ名\ディレクトリ名\pug-sass-test
58
- 10 silly lifecycle gulp-pug-test@1.0.0~start: Args: [ '/d /s /c', 'gulp' ]
59
- 11 silly lifecycle gulp-pug-test@1.0.0~start: Returned: code: 1 signal: null
60
- 12 info lifecycle gulp-pug-test@1.0.0~start: Failed to exec start script
61
- 13 verbose stack Error: gulp-pug-test@1.0.0 start: `gulp`
62
- 13 verbose stack Exit status 1
63
- 13 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
64
- 13 verbose stack at EventEmitter.emit (events.js:189:13)
65
- 13 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
66
- 13 verbose stack at ChildProcess.emit (events.js:189:13)
67
- 13 verbose stack at maybeClose (internal/child_process.js:970:16)
68
- 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
69
- 14 verbose pkgid gulp-pug-test@1.0.0
70
- 15 verbose cwd C:\Users\ユーザー名\Documents\ディレクトリ名\ディレクトリ名\ディレクトリ名\ディレクトリ名\pug-sass-test
71
- 16 verbose Windows_NT 10.0.17763
72
- 17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
73
- 18 verbose node v10.15.3
74
- 19 verbose npm v6.4.1
75
- 20 error code ELIFECYCLE
76
- 21 error errno 1
77
- 22 error gulp-pug-test@1.0.0 start: `gulp`
78
- 22 error Exit status 1
79
- 23 error Failed at the gulp-pug-test@1.0.0 start script.
80
- 23 error This is probably not a problem with npm. There is likely additional logging output above.
81
- 24 verbose exit [ 1, true ]
22
+ ![ログ](4b381022ac1162b3d067958e51bbb930.jpeg)
82
23
 
83
- ```
24
+ ### ディレクトリ構造
25
+ ![ディレクトリ構造](4129bd673fb6b6f2166bf86181cec354.jpeg)
84
26
 
27
+ ### gulpfile.jsのソースコード
85
28
 
86
-
87
- ### 該当のソースコード
88
-
89
29
  ```JavaScript
90
30
  const gulp = require('gulp');
91
31
 
@@ -129,6 +69,36 @@
129
69
  };
130
70
 
131
71
  /**
72
+ * `.pug`をコンパイルしてから、destディレクトリに出力します。
73
+ * JSONの読み込み、ルート相対パス、Pugの整形に対応しています。
74
+ */
75
+ function html() {
76
+ // JSONファイルの読み込み。
77
+ var locals = {
78
+ 'site': JSON.parse(fs.readFileSync(src.json + 'site.json'))
79
+ }
80
+ return gulp.src(src.html)
81
+ // コンパイルエラーを通知します。
82
+ .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
83
+ // 各ページごとの`/`を除いたルート相対パスを取得します。
84
+ .pipe(data(function(file) {
85
+ locals.relativePath = path.relative(file.base, file.path.replace(/.pug$/, '.html'));
86
+ return locals;
87
+ }))
88
+ .pipe(pug({
89
+ // JSONファイルとルート相対パスの情報を渡します。
90
+ locals: locals,
91
+ // Pugファイルのルートディレクトリを指定します。
92
+ // `/_includes/_layout`のようにルート相対パスで指定することができます。
93
+ basedir: 'src',
94
+ // Pugファイルの整形。
95
+ pretty: true
96
+ }))
97
+ .pipe(gulp.dest(dest.html))
98
+ .pipe(browserSync.reload({stream: true}));
99
+ }
100
+
101
+ /**
132
102
  * cssファイルをdestディレクトリに出力(コピー)します。
133
103
  */
134
104
  function css() {
@@ -137,6 +107,7 @@
137
107
  .pipe(browserSync.reload({stream: true}));
138
108
  }
139
109
 
110
+
140
111
  /**
141
112
  * sassファイルをdestディレクトリに同じ階層として出力(コピー)します。
142
113
  */
@@ -161,7 +132,30 @@
161
132
  .pipe(browserSync.reload({ stream: true }));
162
133
  }
163
134
 
135
+
136
+
164
137
  /**
138
+ * jsファイルをdestディレクトリに出力(コピー)します。
139
+ */
140
+ gulp.task('js', function() {
141
+ return gulp.src(src.js, {base: src.root})
142
+ .pipe(gulp.dest(dest.root))
143
+ .pipe(browserSync.reload({stream: true}));
144
+ });
145
+
146
+ /**
147
+ * ローカルサーバーを起動します。
148
+ */
149
+ gulp.task('browser-sync', function() {
150
+ browserSync({
151
+ server: {
152
+ baseDir: dest.root,
153
+ index: "index.html"
154
+ }
155
+ });
156
+ });
157
+
158
+ /**
165
159
  * PugのコンパイルやCSSとjsの出力、browser-syncのリアルタイムプレビューを実行します。
166
160
  */
167
161
  gulp.task('watch', ['html', 'sass', 'css', 'js', 'browser-sync'], function() {
@@ -177,8 +171,230 @@
177
171
  * package.jsonに設定をして、`npm run default`で実行できるようにしています。
178
172
  */
179
173
  gulp.task('default', ['watch']);
174
+
175
+
180
176
  ```
177
+ ### index.pug
178
+ ```pug
179
+ extend /_includes/_layout
180
+ append variables
181
+ //- Required
182
+ - var pageTitle= "";
183
+ - var pageDescription= site.description;
184
+ - var pageKeywords= site.keywords;
185
+ //- Optional
186
+ - var pageOgpTitle= "";
187
+ - var pageOgpImage= site.ogpImage
188
+ - var pageLang= "ja";
189
+ - var pageOgpType= "website";
190
+ //- Not modified
191
+ - var pageUrl= relativePath;
181
192
 
193
+ //- 固定ページにのみ追加のCSS
194
+ append css
195
+ link(rel="stylesheet" href="/about/css/about.css")
196
+
197
+ //- 固定ページにのみ追加のJS
198
+ append js
199
+ script(src="/assets/js/common2.js")
200
+
201
+ block content
202
+ // contents
203
+ p Contents変更しますよ
204
+ // /contents
205
+
206
+ ```
207
+
208
+ ### _footer.pug
209
+ ```pug
210
+ // footer
211
+ footer
212
+ p: small copyright m-field
213
+ // /footer
214
+
215
+ ```
216
+
217
+ ### _header.pug
218
+ ```pug
219
+ // header
220
+ header
221
+ h1.site-name Pugで作ったサイト
222
+
223
+ nav.global-nav
224
+ ul
225
+ li: a(href="#") トップ
226
+ li: a(href="#") メニュー01
227
+ li: a(href="#") メニュー02
228
+ li: a(href="#") メニュー03
229
+ li: a(href="#") メニュー04
230
+ // /header
231
+
232
+ ```
233
+ ### _layout.pug
234
+ ```pug
235
+ block variables
236
+ doctype html
237
+ html(lang=pageLang)
238
+ head(prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# " + pageOgpType + ": http://ogp.me/ns/" + pageOgpType + "#")
239
+ include /_includes/_meta
240
+
241
+ body
242
+ include /_includes/_header
243
+
244
+ block content
245
+
246
+ include /_includes/_footer
247
+ include /_includes/_script
248
+
249
+ ```
250
+ ### _meta.pug
251
+ ```pug
252
+ meta(charset="UTF-8")
253
+ meta(http-equiv="X-UA-Compatible" content="IE=edge")
254
+ meta(name="viewport" content="width=device-width, initial-scale=1.0")
255
+ meta(name="format-detection" content="telephone=no")
256
+ if pageTitle
257
+ title #{pageTitle} | #{site.name}
258
+ else
259
+ title #{site.name}
260
+ meta(name="description" content=pageDescription)
261
+ meta(name="keywords" content=pageKeywords)
262
+
263
+ block css
264
+ link(rel="stylesheet" href="/assets/css/base/reset.css")
265
+ link(rel="stylesheet" href="/assets/css/base/common.css")
266
+
267
+ //- OGP
268
+ if pageOgpTitle
269
+ meta(property="og:title" content=pageOgpTitle + ' | ' + site.name)
270
+ else
271
+ meta(property="og:title" content=site.name)
272
+ meta(property="og:type" content=pageOgpType)
273
+ meta(property="og:image" content=pageOgpImage)
274
+ meta(property="og:url" content=site.rootUrl + pageUrl)
275
+ meta(property="og:description" content=pageDescription)
276
+ meta(property="og:site_name" content=site.name)
277
+ meta(property="og:locale" content=pageLang)
278
+
279
+ //- OGP Facebook insights
280
+ meta(property="fb:admins" content="")
281
+ meta(property="fb:app_id" content="")
282
+ //- /OGP Facebook insights
283
+
284
+ //- OGP Twitter Cards
285
+ meta(name="twitter:card" content="summary")
286
+ meta(name="twitter:site" content="@")
287
+ //- /OGP Twitter Cards
288
+
289
+ //- /OGP
290
+
291
+ ```
292
+ ### _scriput.pug
293
+ ```pug
294
+ block js
295
+ script(src="/assets/js/common.js")
296
+
297
+ ```
298
+
299
+ ### base.scss
300
+ ```scss
301
+ $pc: 1024px; // PC
302
+ $tab: 680px; // タブレット
303
+ $sp: 480px; // スマホ
304
+
305
+ @mixin pc {
306
+ @media (max-width: ($pc)) {
307
+ @content;
308
+ }
309
+ }
310
+ @mixin tab {
311
+ @media (max-width: ($tab)) {
312
+ @content;
313
+ }
314
+ }
315
+ @mixin sp {
316
+ @media (max-width: ($sp)) {
317
+ @content;
318
+ }
319
+ }
320
+
321
+ .box {
322
+ @include pc {
323
+ background-color: red;
324
+ };
325
+ @include tab {
326
+ background-color: blue;
327
+ };
328
+ @include sp {
329
+ background-color: yellow;
330
+ };
331
+ }
332
+
333
+ @import "a";
334
+ @import "b";
335
+
336
+ ```
337
+
338
+ ### _a.scss
339
+ ```_a.scss
340
+ .classA {
341
+ background-color: red;
342
+ }
343
+
344
+ ```
345
+
346
+ ### _b.scss
347
+ ```_b.scss
348
+ .classB {
349
+ background-color: blue;
350
+ }
351
+
352
+ ```
353
+
354
+ ### common.js
355
+ ```js
356
+ (function() {
357
+ console.log('Hello!!');
358
+ }());
359
+
360
+ ```
361
+
362
+ ### package.json
363
+ ```json
364
+ {
365
+ "name": "gulp-pug-test",
366
+ "version": "1.0.0",
367
+ "description": "GulpでPugを実行するためのテスト環境です。",
368
+ "main": "index.js",
369
+ "scripts": {
370
+ "start": "gulp"
371
+ },
372
+ "keywords": [
373
+ "gulp",
374
+ "pug"
375
+ ],
376
+ "author": "テンプレ作成者名",
377
+ "license": "MIT",
378
+ "devDependencies": {
379
+ "browser-sync": "^2.26.3",
380
+ "gulp": "^3.9.1",
381
+ "gulp-autoprefixer": "^6.0.0",
382
+ "gulp-clean-css": "^4.0.0",
383
+ "gulp-data": "^1.3.1",
384
+ "gulp-notify": "^2.2.0",
385
+ "gulp-plumber": "^1.2.1",
386
+ "gulp-postcss": "^8.0.0",
387
+ "gulp-pug": "^3.3.0",
388
+ "gulp-rename": "^1.4.0",
389
+ "gulp-sass": "^4.0.2",
390
+ "gulp-sass-glob": "^1.0.9",
391
+ "postcss-flexbugs-fixes": "^4.1.0"
392
+ }
393
+ }
394
+
395
+
396
+ ```
397
+
182
398
  ### 試したこと
183
399
 
184
400
  gulpのバージョン違いによるものかと考えたので