珍しく、連続で投稿です。
pugで効率化【実用編3】とファイル構成の違うパターンです。
個人的にはこっちの方が好きかもです。
〇下記のようなファイル構成でプロジェクト作成します。
プロジェクトファイル
|___ package.json
|___ package-lock.json
|___ gulpfile.js
|___ node_modules
|
|___ pug
| |___ _layout.pug
| |___ _header.pug
| |___ _footer.pug
| |___ _meta.pug
| |___ index.pug
| |___ file01
| |___ index.pug
|
|___ sass
| |___ common.scss
| |___ index.scss
| |___ file01
| |___index.scss
|
|___ images
| |___demo.jpg
| |___file01
| |___demo01.jpg
|
|___ www
|___ css
| |___index.css
| |___common.css
|
|___images
| |___demo.jpg
|
|___index.html
|
|___file01
|___css
| |___index.css
|
|___images
| |___demo01.jpg
|
|___index.html
○gulpfile.js
//plug-in
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var autoprefixer = require('gulp-autoprefixer');
var sass = require("gulp-sass");
var pug = require('gulp-pug');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var mozjpeg = require('imagemin-mozjpeg');
var rename = require("gulp-rename");
//sass
gulp.task("sass", function() {
return gulp.src('sass/**/*.scss')//gulp4.0対応
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer({
cascade: false/*整形off*/
}))
.pipe(rename(function(path){
path.dirname += '/css';
}))
.pipe(gulp.dest("www"));
});
//pug
gulp.task("pug", function() {
return gulp.src('pug/**/[^_]*.pug')
.pipe(plumber())
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest("www"));
});
gulp.task('imagemin',function(){
return gulp.src(['images/**/*'])
.pipe(imagemin(
[
pngquant({
quality: [ 0.65, 0.8 ],
speed: 1
}),
mozjpeg({ quality: 80 }),
imagemin.svgo(),//imagemin同梱
imagemin.gifsicle()//imagemin同梱
]
))
.pipe(rename(function(path){
path.dirname += '/images';
}))
.pipe(gulp.dest('www'));
});
//watch
gulp.task('watch', function(){
gulp.watch('sass/**/*.scss', gulp.task('sass'));
gulp.watch('pug/**/*.pug', gulp.task('pug'));
gulp.watch('images/**/*', gulp.task('imagemin'));
});
gulp.task('default', gulp.parallel('sass', 'pug', 'imagemin', 'watch'));
<ポイント>
・sass、imagesの処理の最後にrenameを用いて、wwwフォルダに出力するファイルに名前をつけるように記述しています。sassの場合はwwwに、ソースのディレクトリ/css/〇〇.css。imagesの場合はwwwに、ソースのディレクトリ/images/〇〇.jpg。
○pug/index.pug
extends _layout.pug
block _addMeta
- var path ='';
//-meta
title タイトルだよ
meta(name="description", content="ディスクリプションだよ")
meta(name="keywords", content="キーワード1, キーワード2")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
link(rel="stylesheet" href=`${path}`+"css/common.css")
link(rel="stylesheet" href="css/index.css")
block mainContents
main(ontouchstart="")
.block
p.title トップなうだよ
img(src="images/demo.jpg")
a(href=`${path}`+"index.html") トップページ
a(href=`${path}`+"file01/index.html") ファイル01
○pug/file01/index.pug
extends ../_layout.pug
block _addMeta
- var path ='../';
//-meta
title タイトルだよ
meta(name="description", content="ディスクリプションだよ")
meta(name="keywords", content="キーワード1, キーワード2")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
link(rel="stylesheet" href=`${path}`+"css/common.css")
link(rel="stylesheet" href="css/index.css")
block mainContents
main(ontouchstart="")
.block
p.title ファイル01なうだよ
img(src="images/demo01.jpg")
a(href=`${path}`+"index.html") トップページ
a(href="index.html") ファイル01
<ポイント>
・ディレクトリと共通となるファイルパスには${path}を用いて、パスを指定します。コンテンツ固有のものには、stylesheetであればcss/〇〇.css、imgであればimages/〇〇.jpgといったように、パスを気にせずに書けます。
pugで効率化【実用編3】と比較して好きな方を使えば良いかと。
細かい設定が分からない場合はこちらの過去記事を読んでみてください。
今回は以上です。