pugで効率化【実用編4】

珍しく、連続で投稿です。

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】と比較して好きな方を使えば良いかと。

細かい設定が分からない場合はこちらの過去記事を読んでみてください。

今回は以上です。