はじめに
今回はgulpfile.jsのテンプレートサンプルを紹介していきます。
久しぶりにgulpを触ったのでまとめておこうと思います。
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を使って処理していこうと思います。
テンプレートサンプル紹介
それではテンプレートを紹介します。
今回紹介するgulpfile.jsでは開発環境用と本番環境用のタスクを作成し、環境ごとにそれぞれのフォルダに対してどういう処理をするかという書き方で記述しています。
以下にgulpfile.jsとpackage.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.jsとpackage.jsonをベースに新規にプロジェクトを作成する場合はターミナルに以下コマンドを入力してください。
npm ipackage.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制作でのできる幅が広がるのでぜひ導入を検討してみてください。
コメント