【gulp4】gulpfile.jsのテンプレートサンプル紹介【web制作】

html/css
この記事は約16分で読めます。
スポンサーリンク

はじめに

今回はgulpfile.jsのテンプレートサンプルを紹介していきます。

久しぶりにgulpを触ったのでまとめておこうと思います。

gulpを導入したけどどういうプラグインを導入すればいいか分からない、どのように構築していけばいいか分からないといった方に見ていただけるとうれしいです。

web制作をしている方はgulpを使えるようになるとできる幅が広がるのでぜひ参考にしてください。

対象者
  • web制作をしている方
  • gulp導入したての方

gulpのおすすめのプラグインはこちら

gulpの使い方まとめについてはこちら。

それでは説明に移ります。

スポンサーリンク

ディレクトリ構成

gulpfile.jsのテンプレートを紹介するにあたって、以下のようなディレクトリ構成を想定しています。

test
├ node_modules
├ dist
├ src
│ ├ css
│ │ └ style.css
│ │ 	
│ ├ font
│ │ └ aaa.ttf
│ │ 	
│ ├ image
│ │ ├ aaa.png
│ │ └ bbb.jpeg
│ │ 	
│ ├ js
│ │ └ index.js
│ │ 	
│ ├ scss
│ │ ├ flocss
│ │ │ ├ _aaa.scss
│ │ │ └ _bbb.scss
│ │ └ style.scss
│ │ 	
│ ├ vendor
│ │ 	
│ ├ index.html
│ └ aaa.html
|	
├ gulpfile.js
├ package-lock.json
└ package.json

書き出してみると様々なフォルダがありますね。

今回は大きく分けて以下4つのことをgulpを使って処理していこうと思います。

  • srcフォルダの中のフォルダ1つに対してそれぞれ1つの処理を定義する
  • 開発環境用と本番環境用でgulpの処理を切り分ける
  • 開発環境用ではコンパイルやbrowser-syncの起動などをする
  • 本番環境用ではsrcフォルダ群をベースに圧縮処理をかけてdistフォルダに出力する
スポンサーリンク

テンプレートサンプル紹介

それではテンプレートを紹介します。

今回紹介するgulpfile.jsでは開発環境用と本番環境用のタスクを作成し、環境ごとにそれぞれのフォルダに対してどういう処理をするかという書き方で記述しています。

以下にgulpfile.jspackage.jsonを紹介するのでご自身の環境に入れてみてください。

gulpfile.js

//----------------------------------------------------------------------
//  mode
//----------------------------------------------------------------------
'use strict';

//----------------------------------------------------------------------
//  require
//----------------------------------------------------------------------
const gulp = require('gulp');
const { src, dest, series, parallel, watch } = require('gulp');

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

const del = require('del');
const bs = require('browser-sync');
const pngquant = require('imagemin-pngquant');
const mozjpeg = require('imagemin-mozjpeg');

const $ = require('gulp-load-plugins')();

//----------------------------------------------------------------------
//  path
//----------------------------------------------------------------------
const proj = {
	dev: './src',
	pro: './dist',
};

const paths = {
	clean: {
		src: `${proj.pro}/**`,
	},

	css: {
		src: `${proj.dev}/css/**`,
		dest: `${proj.pro}/css`,
	},
	font: {
		src: `${proj.dev}/font/**`,
		dest: `${proj.pro}/font`,
	},
	html: {
		src: `${proj.dev}/**/*.html`,
		dest: `${proj.pro}/`,
	},
	image: {
		src: `${proj.dev}/image/**`,
		dest: `${proj.pro}/image`,
	},
	js: {
		src: `${proj.dev}/js/**/*.js`,
		dest: `${proj.pro}/js`,
	},
	scss: {
		src: `${proj.dev}/scss/**.scss`,
		dest: `${proj.dev}/css/`,
	},
	vendor: {
		src: `${proj.dev}/vendor/**`,
		dest: `${proj.pro}/vendor`,
	},

	watch: {
		src: [`${proj.dev}/**`, `!${proj.dev}/css/**`],
	},
};

const bsConf = {
	base: `./`,
	start: `${proj.dev}/index.html`,
};

//----------------------------------------------------------------------
//  task
//----------------------------------------------------------------------
const clean = (done) => {
	del(paths.clean.src);

	done();
};

const development = (done) => {
	// css
	// 処理なし

	// font
	// 処理なし

	// html
	// 処理なし

	// image
	// 処理なし

	// js
	// 処理なし

	// sass
	src(paths.scss.src) // コンパイル
		.pipe($.plumber())
		.pipe($.sassGlobUseForward())
		.pipe(dartSass())
		.pipe($.autoprefixer())
		.pipe(dest(paths.scss.dest));

	// vendor
	// 処理なし

	done();
};

const production = (done) => {
	// css
	src(paths.css.src) // パージ、圧縮、コピー
		.pipe($.plumber())
		.pipe(
			$.purgecss({
				content: [paths.html.src, paths.js.src],
			})
		)
		.pipe($.cleanCss())
		.pipe(dest(paths.css.dest));

	// font
	src(paths.font.src) // コピー
		.pipe($.plumber())
		.pipe(dest(paths.font.dest));

	// html
	src(paths.html.src) // コピー
		.pipe($.plumber())
		.pipe(dest(paths.html.dest));

	// image
	src(paths.image.src) // 圧縮、コピー
		.pipe($.plumber())
		.pipe($.changed(paths.image.dest))
		.pipe(
			$.imagemin([
				pngquant({
					quality: [0.6, 0.7],
					speed: 1,
				}),
				mozjpeg({ quality: 65 }),
				$.imagemin.svgo(),
				$.imagemin.optipng(),
				$.imagemin.gifsicle({
					optimizationLevel: 3,
				}),
			])
		)
		.pipe(dest(paths.image.dest));

	// js
	src(paths.js.src) // 圧縮、コピー
		.pipe($.plumber())
		.pipe($.uglify())
		.pipe(dest(paths.js.dest));

	// sass
	// 処理なし

	// vendor
	src(paths.vendor.src) // コピー
		.pipe($.plumber())
		.pipe(dest(paths.vendor.dest));

	done();
};

const bsInit = (done) => {
	bs.init({
		server: {
			baseDir: bsConf.base,
		},
		startPath: bsConf.start,
		notify: false,
		open: 'external',
	});

	done();
};

const bsReload = (done) => {
	bs.reload();

	done();
};

//----------------------------------------------------------------------
//  watchTask
//----------------------------------------------------------------------
const watchTask = (done) => {
	watch(paths.watch.src, series(development, bsReload));

	done();
};

//----------------------------------------------------------------------
//  export
//----------------------------------------------------------------------
exports.clean = clean;
exports.development = series(development, bsInit, bsReload, watchTask);
exports.production = series(production);

/************************************************************************/
/*  END OF FILE                                                         */
/************************************************************************/

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "test",

  "scripts": {
    "dev": "npx gulp clean && npx gulp development",
    "pro": "npx gulp clean && npx gulp production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.27.7",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-changed": "^4.0.3",
    "gulp-clean-css": "^4.3.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-load-plugins": "^2.0.7",
    "gulp-plumber": "^1.2.1",
    "gulp-purgecss": "^4.1.3",
    "gulp-sass": "^5.1.0",
    "gulp-sass-glob-use-forward": "^0.1.3",
    "gulp-uglify": "^3.0.2",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.2",
    "sass": "^1.49.7"
  },
  "browserslist": [
    "last 2 versions",
    "ie >= 11",
    "Android >= 4"
  ]
}

gulpfile.jsは人によっていろんな書き方があります。

他人が作ったgulpfile.jsや過去に自分が作成したgulpfile.jsを見るといろんなタスクが乱立していて何しているか分からないということがよくありますよね。

紹介する記述ではそれぞれのフォルダに対してどういう処理がされているか一目で分かるので非常に見通しがよくなるかと思います。

特に特殊な書き方はしていないつもりです。

もし書き方が分からない場合や知らないプラグインがある場合は以下あたりを参考にしてください。

スポンサーリンク

インストール手順

先ほど紹介したgulpfile.jspackage.jsonをベースに新規にプロジェクトを作成する場合はターミナルに以下コマンドを入力してください。

npm i

package.jsonに記載されたプラグインがnode_modulesにインストールされます。

スポンサーリンク

開発環境用と本番環境用で実行する

プラグインのインストールが完了して、フォルダやファイルの作成が終わったらgulpのタスクを実行していきましょう。

開発環境用の場合

npm run dev

以下のような表示になれば正しく動作しています。

PS C:\Users\shuuk\OneDrive\デスクトップ\test> npm run dev

> test@1.0.0 dev
> npx gulp clean && npx gulp development

[00:00:00] Using gulpfile ~\OneDrive\デスクトップ\test\gulpfile.js
[00:00:00] Starting 'clean'...
[00:00:00] Finished 'clean' after 7.45 ms
[00:00:00] Using gulpfile ~\OneDrive\デスクトップ\test\gulpfile.js
[00:00:00] Starting 'development'...
[00:00:00] Starting 'development'...
[00:00:00] Finished 'development' after 1.01 s
[00:00:00] Starting 'bsInit'...
[00:00:00] Finished 'bsInit' after 57 ms
[00:00:00] Starting 'bsReload'...
[00:00:00] Finished 'bsReload' after 1.96 ms
[00:00:00] Starting 'watchTask'...
[00:00:00] Finished 'watchTask' after 22 ms
[00:00:00] Finished 'development' after 1.09 s
[Browsersync] Access URLs:
 --------------------------------------------------------
       Local: http://localhost:3000/./src/index.html
    External: http://192.168.10.102:3000/./src/index.html
 --------------------------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------------------------
[Browsersync] Serving files from: ./

本番環境用の場合

npm run pro

以下のような表示になれば正しく動作しています。

PS C:\Users\shuuk\OneDrive\デスクトップ\test> npm run pro

> test@1.0.0 pro
> npx gulp clean && npx gulp production

[00:00:00] Using gulpfile ~\OneDrive\デスクトップ\test\gulpfile.js
[00:00:00] Starting 'clean'...
[00:00:00] Finished 'clean' after 4.89 ms
[00:00:00] Using gulpfile ~\OneDrive\デスクトップ\test\gulpfile.js
[00:00:00] Starting 'production'...
[00:00:00] Starting 'production'...
[00:00:00] Finished 'production' after 1.13 s
[00:00:00] Finished 'production' after 1.14 s
[00:00:00] gulp-imagemin: Minified 20 images (saved 4.61 MB - 86.8%)
スポンサーリンク

おわりに

以上gulpfile.jsのテンプレートサンプルを紹介していきました。

いかがだったでしょうか。

gulpを扱えるようになるとweb制作でのできる幅が広がるのでぜひ導入を検討してみてください。

コメント

タイトルとURLをコピーしました