Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門 公式サポートサイト

CHAPTER5 実践gulp

SECTION 25 gulpによる処理の流れ

📖 106ページ

gulpfile.js

const gulp = require('gulp')

gulp.task('sass', () => {
  gulp.src('./src/sass/common.scss')
})

📖 106ページ

gulpfile.js

const gulp = require('gulp')

gulp.task('sass', () => {
  console.log(gulp.src('./src/sass/common.scss'))
})

📖 108ページ

gulpfile.js

const gulp = require('gulp')
const sass = require('gulp-sass')

gulp.task('sass', () => {
  gulp.src('./src/sass/common.scss')
  .pipe(sass())
})

📖 109ページ

gulpfile.js

const gulp = require('gulp')
const sass = require('gulp-sass')

gulp.task('sass', () => {
  gulp.src('./src/sass/common.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist'))
}

📖 110ページ

gulpfile.js

const gulp = require('gulp')
const sass = require('gulp-sass')

gulp.task('sass', () => {
  return gulp.src('./src/sass/common.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist'))
})

SECTION 26 PostCSSを利用しよう

📖 112ページ

gulpfile.js

const gulp = require('gulp')
const sass = require('gulp-sass')
const postcss = require('gulp-postcss')

gulp.task('sass', () => {
  return gulp.src('./src/scss/common.scss')
    .pipe(sass())
    .pipe(postcss())
    .pipe(gulp.dest('./dist'))
})

📖 116ページ

package.json

{
  "browserslist": [
    "last 2 Chrome versions",
    "last 2 Firefox versions",
    "last 2 Safari versions",
    "last 2 ChromeAndroid versions",
    "last 2 iOS versions",
    "last 2 Edge versions",
    "ie 11"
  ],
  "devDependencies": {
  // 省略
  }
}

📖 117ページ

gulpfile.js

const gulp = require('gulp')
const sass = require('gulp-sass')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')
const postcssOption = [ autoprefixer ]

gulp.task('sass', () => {
  return gulp.src('./src/scss/common.scss')
    .pipe(sass())
    .pipe(postcss(postcssOption))
    .pipe(gulp.dest('./dist'))
})

📖 118ページ

gulpfile.js

const gulp = require('gulp')
const sass = require('gulp-sass')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')
const autoprefixerOption = {
  grid: true
}
const postcssOption = [ autoprefixer(autoprefixerOption) ]

gulp.task('sass', () => {
  return gulp.src('./src/scss/common.scss')
    .pipe(sass())
    .pipe(postcss(postcssOption))
    .pipe(gulp.dest('./dist'))
})

📖 118ページ

common.scss

.sample {
  display: grid;
}

📖 120ページ

gulpfile.js

const gulp = require('gulp')
const sass = require('gulp-sass')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')
const flexBugsFixes = require('postcss-flexbugs-fixes')

const autoprefixerOption = {
  grid: true
}

const postcssOption = [
  flexBugsFixes,
  autoprefixer(autoprefixerOption)
]

gulp.task('sass', () => {
  return gulp.src('./src/scss/common.scss')
    .pipe(sass())
    .pipe(postcss(postcssOption))
    .pipe(gulp.dest('./dist'))
})

📖 120ページ

common.scss

.foo {
  flex: 1;
}
.bar {
  flex: 1 1;
}
.foz {
  flex: 1 1 0;
}
.baz {
  flex: 1 1 0px;
}

📖 122ページ

gulpfile.js

const gulp = require('gulp')
const sass = require('gulp-sass')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')
const flexBugsFixies = require('postcss-flexbugs-fixes')
const cssWring = require('csswring')

const autoprefixerOption = {
  grid: true
}

const postcssOption = [
  flexBugsFixies,
  autoprefixer(autoprefixerOption),
  cssWring
]

gulp.task('sass', () => {
  return gulp.src('./src/scss/common.scss')
    .pipe(sass())
    .pipe(postcss(postcssOption))
    .pipe(gulp.dest('./dist'))
})

📖 122ページ

common.scss

.foo {
  flex: 1 1;
}
.bar {
  flex: 1 1;
}
.foz {
  flex: 1 1;
}
.baz {
  flex: 1 1;
}

SECTION 27 自動でタスクを実行するようにしよう

📖 125ページ

gulpfile.js

（省略）

gulp.task('sass', () => {
  return gulp.src('./src/sass/common.scss')
    .pipe(sass())
    .pipe(postcss( postcssOption))
    .pipe(gulp.dest('./dist'))
})

gulp.task('watch', () => {
  return gulp.watch('./src/sass/**/*.scss', gulp.series('sass'))
})

SECTION 28 EJSを利用しよう

📖 129ページ

head.ejs

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>◯◯株式会社</title>
</head>

📖 129ページ

index.ejs

<!DOCTYPE html>
<html lang="ja">
  <% include('./_partial/head') %>
  <body>

  </body>
</html>

📖 130ページ

index.ejs

<%
  var pageTitle
%>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= pageTitle %> - ◯◯株式会社</title>
</head>

📖 131ページ

index.ejs

<%
var pageData = {
  pageTitle: "お問い合わせ"
}
%>

<!DOCTYPE html>
<html lang="ja">
  <%- include('./_partial/head', pageData) %>
<body>

</body>
</html>

📖 132ページ

index.ejs

<%
  var pageTitle
%>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
  <% if(pageTitle) {%>
    <%= pageTitle %> - ○◯株式会社
  <% } else { %>
    ○◯株式会社
  <% } %>
</title>
<meta
name="description"
content="<%= config.default.description %>"
>
<meta
name="author"
content="<%= config.default.author %>"
>
<meta
property="og:type"
content="website"
>
<meta
property="og:site_name"
content="<%= config.default.title %>"
>
<meta
  property="og:title"
  content="
  <% if (key !== 'index') { %>
    <%= pagetitle + ' | ' %>
  <% } %>
  <%= config.default.title %>"
>
<meta
  property="og:description"
  content="<%= config.default.description %>"
>
<meta
  property="og:url"
  content="<%= config.default.publicPath %>"
>
<meta
  property="og:image"
  content="<%= config.default.publicPath %>/img/facebook.png"
>
</head>

📖 135ページ

config.json

{
  "author" : "中村勇希",
  "title" : "タイトルのサンプルです",
  "description": "説明文のサンプルです",
  "public": "http://sample.sample"
}

📖 134ページ

gulpfile.js

const gulp = require('gulp')
const ejs = require("gulp-ejs")

// ejsのコンパイル設定用のオブジェクト
const ejsSettingOption = {
  ext: '.html'
}

// ejsをコンパイルするタスク
gulp.task('ejs', () => {
  return gulp
    .src('./src/html/*.ejs')
    .pipe(ejs({}, {}, ejsSettingOption))
    .pipe(gulp.dest('./dist'))
})

📖 136ページ

gulpfile.js

const fs = require('fs')
const gulp = require('gulp')
const ejs = require("gulp-ejs")
const configJsonData = fs.readFileSync('./src/ejs/config.json')
const configObj = JSON.parse(configJsonData)

// ejsのデータ読み込み設定
const ejsDataOption = {
  config: configObj
}

// ejsのコンパイル設定用のオブジェクト
const ejsSettingOption = {
  ext: '.html'
}

// ejsをコンパイルするタスク
gulp.task('ejs', () => {
  return gulp
    .src('./src/html/*.ejs')
    .pipe(ejs(ejsDataOption, {}, ejsSettingOption))
    .pipe(gulp.dest('./dist'))
})

📖 139ページ

gulpfile.js

const fs = require('fs')
const gulp = require('gulp')
const ejs = require('gulp-ejs')
const htmlmin = require('gulp-htmlmin')

// JSONファイルの読み込みと変換
const configJsonData = fs.readFileSync('./src/html/config.json')
const configObj = JSON.parse(configJsonData)

// ejsのデータ読み込み設定
const ejsDataOption = {
  config: configObj
}

// ejsのコンパイル設定
const ejsSettingOption = {
  ext: '.html'
}

// htmlminの設定
const htmlminOption = {
  collapseWhitespace: true
}

// ejsのタスク
gulp.task('ejs', () => {
  return gulp
    .src('./src/html/*.ejs')
    .pipe(ejs(ejsDataOption, {}, ejsSettingOption))
    .pipe(htmlmin(htmlminOption))
    .pipe(gulp.dest('./dist'))
})

📖 140ページ

gulpfile.js

gulp.task('watch', () => {
  gulp.watch('./src/sass/**/*.scss', gulp.series('sass'))
  gulp.watch('./src/html/**/*.ejs', gulp.series('ejs')
})

SECTION 29 画像処理を行おう

📖 142ページ

gulpfile.js

const gulp = require('gulp')

gulp.task('sass', () => {
  gulp.src('./src/sass/common.scss')
})

📖 146ページ

gulpfile.js

const gulp = require('gulp')
const imagemin = require('gulp-imagemin')
const imageminPngquant = require('imagemin-pngquant')

const imageminOption = [
  imageminPngquant({ quality: '65-80' }),
  imagemin.gifsicle(),
  imagemin.jpegtran(),
  imagemin.optipng(),
  imagemin.svgo()
]

gulp.task('imagemin', () => {
  return gulp
    .src('src/images/*')
    .pipe(imagemin(imageminOption))
    .pipe(gulp.dest('dist/images'))
})

📖 147ページ

gulpfile.js

const gulp = require('gulp')
const imagemin = require('gulp-imagemin')
const imageminPngquant = require('imagemin-pngquant')
const imageminMozjpeg = require('imagemin-mozjpeg')

const imageminOption = [
  imageminPngquant({ quality: '65-80' }),
  imageminMozjpeg({ quality: 80 }),
  imagemin.gifsicle(),
  imagemin.jpegtran(),
  imagemin.optipng(),
  imagemin.svgo()
]

gulp.task('imagemin', () => {
  return gulp
    .src('src/images/*')
    .pipe(imagemin(imageminOption))
    .pipe(gulp.dest('dist/images'))
})

SECTION 30 ブラウザを自動更新しよう

📖 150ページ

gulpfile.js

const gulp = require('gulp')

// ローカルサーバー起動、自動更新用タスク
gulp.task('browser-sync', () => {})

📖 150ページ

gulpfile.js

const gulp = require('gulp')
const browserSync = require('browser-sync').create()

// ローカルサーバー起動、自動更新用タスク
gulp.task('browser-sync', () => {
  browserSync.init()
})

📖 153ページ

gulpfile.js

const gulp = require('gulp')
const browserSync = require('browser-sync').create()

const browserSyncOption = {
  server: './dist'
}

gulp.task('serve', (done) => {
  browserSync.init(browserSyncOption)
  done()
})

gulp.task('watch', (done) => {
  const browserReload = (done) => {
    browserSync.reload()
    done()
  }

  gulp.watch('./dist/**/*', browserReload)
})

📖 154ページ

gulpfile.js

const gulp = require('gulp')
const browserSync = require('browser-sync').create()

const browserSyncOption = {
  server: './dist'
}

gulp.task('serve', (done) => {
  browserSync.init(browserSyncOption)
  done()
})

gulp.task('watch', (done) => {
  const browserReload = (done) => {
    browserSync.reload()
    done()
  }

  gulp.watch('./dist/**/*', browserReload)
})

gulp.task('default', gulp.series('serve', 'watch'))

SECTION 31 FTPアップロードを自動化しよう

📖 157ページ

gulpfile.js

const gulp = require('gulp')

gulp.task('ftp', () => { })

📖 157ページ

gulpfile.js

const gulp = require('gulp')
const ftp = require('vinyl-ftp')

gulp.task('ftp', () => {
  const ftpConfig = {
    host: 'gulp.gulp.jp',
    user: 'gulp',
    password: 'gulp',
  }

const connect = ftp.create(ftpConfig)
const ftpUploadFiles = './dist/**/*'
const remoteDistDir = 'public_html'

return gulp.src(ftpUploadFiles)
  .pipe(connect.dest(remoteDistDir))
})

📖 159ページ

gulpfile.js

const gulp = require('gulp')
const ftp = require('vinyl-ftp')
const fancyLog = require('fancy-log') // 追記

gulp.task('ftp', () => {
  const ftpConfig = {
    host: 'gulp.gulp.jp',
    user: 'gulp',
    password: 'gulp',
    log: fancyLog // 追記
  }

  const connect = ftp.create(ftpConfig)
  const ftpUploadFiles = './dist/**/*'
  const remoteDistDir = 'public_html'

  return gulp.src(ftpUploadFiles)
    .pipe(connect.dest(remoteDistDir))
})

📖 161ページ

gulpfile.js

const gulp = require('gulp')
const ftp = require('vinyl-ftp')
const fancyLog = require('fancy-log')

gulp.task('ftp', () => {
  const ftpConfig = {
    host: 'gulp.gulp.jp',
    user: 'gulp',
    password: 'gulp',
    log: fancyLog // 追記
  }

  const connect = ftp.create(ftpConfig)
  const ftpUploadFiles = './dist/**/*'

  const ftpUploadConfig = { // 追記
    buffer: false
  }

  const remoteDistDir = 'public_html'

  return gulp.src(ftpUploadFiles, ftpUploadConfig) // 追記
    .pipe(connect.dest(remoteDistDir))
})

📖 162ページ

gulpfile.js

const gulp = require('gulp')
const ftp = require('vinyl-ftp')
const fancyLog = require('fancy-log')

gulp.task('ftp', () => {
  const ftpConfig = {
    host: 'gulp.gulp.jp',
    user: 'gulp',
    password: 'gulp',
    log: fancyLog
  }

  const connect = ftp.create(ftpConfig)
  const ftpUploadFiles = './dist/**/*'

  const ftpUploadConfig = {
    buffer: false
  }

  const remoteDistDir = 'public_html'

  return gulp.src(ftpUploadFiles, ftpUploadConfig)
    .pipe(connect.newer(remoteDistDir)) // 追記
    .pipe(connect.dest(remoteDistDir))
})