今回はgulpのファイル構成の一例をまとめます。
〇下記のようなファイル構成でプロジェクト作成します。
プロジェクトファイル
|___ 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
| |___file01
| |___index.css
|
|___images
| |___demo.jpg
| |___file01
| |___demo01.jpg
|
|___index.html
|___file01
|___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');
//sass
gulp.task("sass", function() {
return gulp.src('sass/**/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer({
cascade: false/*整形off*/
}))
.pipe(gulp.dest("www/css"));
});
//pug
gulp.task("pug", function() {
return gulp.src('pug/**/[^_]*.pug')
.pipe(plumber())
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest("www"));
});
//images
gulp.task('imagemin',function(){
return gulp.src(['images/**/*'])
.pipe(imagemin(
[
pngquant({
quality: [ 0.65, 0.8 ],
speed: 1
}),
mozjpeg({ quality: 80 }),
imagemin.svgo(),
imagemin.gifsicle()
]
))
.pipe(gulp.dest('www/images'));
});
//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'));
<ポイント>
・pug、sass、imagesのいずれも処理をpipeで繋いでいるだけなので、シンプルな関数です。
・それぞれの出力先をdestで記述している。pugはwww、sassはwww/css、imagesはwww/imagesに出力。
○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=`${path}`+"css/index.css")
block mainContents
main(ontouchstart="")
.block
p.title トップなうだよ
img(src=`${path}`+"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=`${path}`+"css/file01/index.css")
block mainContents
main(ontouchstart="")
.block
p.title ファイル01なうだよ
img(src=`${path}`+"images/file01/demo01.jpg")
a(href=`${path}`+"index.html") トップページ
a(href="index.html") ファイル01
<ポイント>
・プロジェクトが複雑化すれば、ディレクトリは階層が深くなっていきます。その際に、パスをいちいち指定していては大変なので、変数を利用して一括で設定します。
– var path =”;で変数を定義
①一番上の階層にあるindex.pugの際は、pathは何も入力しなくてOKです。
②次にfile01の階層にあるindex.pugの際は、一番の上の階層より一つ下の階層にあたるのでpathに ‘../’ を設定する。※file01/index.pugから見ると_layout.pugは一つ上の階層にあるので一行目の_layoutにも../をつけるの忘れずに。
③あとは、ディレクトリの記述が必要な箇所には `${path}`+“〇〇” でパスを指定してあげれば一括でパスの設定が可能です。
これで、gulpでプロジェクトもさくさくつくれますね。
細かい設定が分からない場合はこちらの過去記事を読んでみてください。
今回は以上です。