{"id":3690,"date":"2026-11-01T10:04:18","date_gmt":"2026-11-01T01:04:18","guid":{"rendered":"https:\/\/qol-kk.com\/wp2\/?p=3690"},"modified":"2026-11-01T10:04:18","modified_gmt":"2026-11-01T01:04:18","slug":"20261024-00mvlly3","status":"publish","type":"post","link":"https:\/\/qol-kk.com\/wp2\/blog\/2026\/11\/01\/20261024-00mvlly3\/","title":{"rendered":"gulp\u3067Sass\u30b3\u30f3\u30d1\u30a4\u30eb\u3068\u753b\u50cf\u5727\u7e2e\u306e\u30d3\u30eb\u30c9\u30bf\u30b9\u30af\u3092\u7d44\u3080"},"content":{"rendered":"<h2>\u6982\u8981<\/h2>\n<p>\u9759\u7684\u30b5\u30a4\u30c8\u3084CMS\u30c6\u30fc\u30de\u306e\u5236\u4f5c\u3067\u306f\u3001Sass\uff08SCSS\uff09\u306e\u30b3\u30f3\u30d1\u30a4\u30eb\u3068\u753b\u50cf\u306e\u6700\u9069\u5316\u304c\u6bce\u56de\u767a\u751f\u3057\u307e\u3059\u3002\u624b\u4f5c\u696d\u3067\u3084\u3063\u3066\u3044\u308b\u3068\u6642\u9593\u304c\u304b\u304b\u308a\u3001\u3084\u308a\u5fd8\u308c\u3082\u8d77\u304d\u304c\u3061\u3067\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001gulp\uff085\u7cfb\uff09\u3092\u4f7f\u3063\u3066\u4ee5\u4e0b\u30921\u3064\u306e\u30d3\u30eb\u30c9\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306b\u307e\u3068\u3081\u308b\u624b\u9806\u3092\u3001\u30cf\u30f3\u30ba\u30aa\u30f3\u5f62\u5f0f\u3067\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n<ul>\n<li>SCSS \u2192 CSS \u306e\u30b3\u30f3\u30d1\u30a4\u30eb<\/li>\n<li>\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u306e\u81ea\u52d5\u4ed8\u4e0e<\/li>\n<li>CSS \u306e\u5727\u7e2e\uff08minify\uff09<\/li>\n<li>\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u51fa\u529b<\/li>\n<li>\u753b\u50cf\uff08PNG \/ JPEG \/ GIF \/ SVG\uff09\u306e\u5727\u7e2e<\/li>\n<li>\u30d5\u30a1\u30a4\u30eb\u5909\u66f4\u306e\u76e3\u8996\uff08watch\uff09<\/li>\n<\/ul>\n<p>Vite \u3084 Webpack \u304c\u4e3b\u6d41\u306e\u4eca\u3067\u3082\u3001\u300c\u6271\u3046\u306e\u306f CSS \u3068\u753b\u50cf\u304c\u30e1\u30a4\u30f3\u300d\u3068\u3044\u3046\u9759\u7684\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3084\u30c6\u30fc\u30de\u958b\u767a\u3067\u306f\u3001\u8efd\u91cf\u306b\u7d44\u3081\u308b gulp \u304c\u6709\u52b9\u306a\u9078\u629e\u80a2\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<h2>\u74b0\u5883<\/h2>\n<ul>\n<li>Node.js 20 \/ 22 \/ 24 \u306e\u3044\u305a\u308c\u304b\u306e LTS<\/li>\n<li>gulp 5<\/li>\n<li>npm<\/li>\n<\/ul>\n<p>\u203b\u30d0\u30fc\u30b8\u30e7\u30f3\u306f\u57f7\u7b46\u6642\u70b9\u306e\u3082\u306e\u3067\u3059\u3002<code>npm install gulp<\/code> \u3067\u5165\u308b\u306e\u306f\u73fe\u5728 gulp 5 \u7cfb\u3067\u3059\u3002\u76f4\u5217\u30fb\u4e26\u5217\u5b9f\u884c\u3092 <code>series<\/code> \/ <code>parallel<\/code> \u3067\u8a18\u8ff0\u3059\u308b\u70b9\u306f gulp 4 \u3068\u540c\u3058\u3067\u3001<code>src<\/code> \/ <code>dest<\/code> \/ <code>series<\/code> \/ <code>parallel<\/code> \u306e\u516c\u958b API \u306f 4\u21925 \u3067\u5909\u308f\u3063\u3066\u3044\u307e\u305b\u3093\u3002\u305d\u306e\u305f\u3081\u672c\u8a18\u4e8b\u306e gulpfile \u306f gulp 5 \u3067\u3082\u305d\u306e\u307e\u307e\u52d5\u304d\u307e\u3059\u3002<\/p>\n<p>\u4e00\u70b9\u3060\u3051\u6ce8\u610f\u304c\u3042\u308a\u307e\u3059\u3002\u5f8c\u8ff0\u3059\u308b <code>gulp-imagemin<\/code> \u304c\u73fe\u5728\u306f <strong>ESM \u5c02\u7528\uff08pure ESM\uff09<\/strong> \u306b\u306a\u3063\u3066\u3044\u308b\u305f\u3081\u3001\u672c\u8a18\u4e8b\u306e gulpfile \u306f ESM\uff08<code>import<\/code> \u69cb\u6587\uff09\u3067\u66f8\u304d\u307e\u3059\u3002ESM \u3092\u6271\u3046\u90fd\u5408\u4e0a\u3001Node \u306f\u65b0\u3057\u3081\u306e LTS\uff0820 \u4ee5\u4e0a\uff09\u3092\u524d\u63d0\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u306a\u304a Node 18 \u306f 2025 \u5e74 4 \u6708\u306b EOL \u6e08\u307f\u3067\u3001\u73fe\u5728\u306f\u63a8\u5968\u3055\u308c\u307e\u305b\u3093\u3002<\/p>\n<h2>\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210<\/h2>\n<pre class=\"lang:default decode:true\">project\/\n\u251c\u2500\u2500 gulpfile.js\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 scss\/\n\u2502   \u2502   \u251c\u2500\u2500 style.scss\n\u2502   \u2502   \u2514\u2500\u2500 _variables.scss\n\u2502   \u2514\u2500\u2500 images\/\n\u2514\u2500\u2500 dist\/        \u2190 \u30d3\u30eb\u30c9\u7d50\u679c\n    \u251c\u2500\u2500 css\/\n    \u2514\u2500\u2500 images\/<\/pre>\n<h2>\u8d77\u304d\u304c\u3061\u306a\u554f\u984c<\/h2>\n<p>\u624b\u4f5c\u696d\u904b\u7528\u3067\u306f\u6b21\u306e\u3088\u3046\u306a\u554f\u984c\u304c\u767a\u751f\u3057\u307e\u3059\u3002<\/p>\n<ul>\n<li>SCSS \u3092\u4fdd\u5b58\u3059\u308b\u305f\u3073\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u5fd8\u308c\u3066\u300c\u53cd\u6620\u3055\u308c\u306a\u3044\u300d\u3068\u60a9\u3080<\/li>\n<li>\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u306e\u4ed8\u3051\u5fd8\u308c\u3067\u4e00\u90e8\u30d6\u30e9\u30a6\u30b6\u3060\u3051\u5d29\u308c\u308b<\/li>\n<li>\u7121\u5727\u7e2e\u753b\u50cf\u3092\u30b3\u30df\u30c3\u30c8\u3057\u3066\u8ee2\u9001\u91cf\u304c\u81a8\u3089\u3080<\/li>\n<li>\u8907\u6570\u4eba\u4f5c\u696d\u3067\u30d3\u30eb\u30c9\u624b\u9806\u304c\u3070\u3089\u3064\u304f<\/li>\n<\/ul>\n<p>\u3053\u308c\u3089\u306f\u300c\u4fdd\u5b58\u3057\u305f\u3089\u81ea\u52d5\u3067\u30d3\u30eb\u30c9\u3055\u308c\u308b\u300d\u72b6\u614b\u3092\u4f5c\u308b\u3053\u3068\u3067\u89e3\u6d88\u3067\u304d\u307e\u3059\u3002<\/p>\n<h2>\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h2>\n<p>\u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u5c0e\u5165\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">npm init -y\nnpm install --save-dev gulp \\\n  gulp-sass sass \\\n  gulp-autoprefixer \\\n  gulp-clean-css \\\n  gulp-sourcemaps \\\n  gulp-imagemin \\\n  gulp-plumber<\/pre>\n<table>\n<thead>\n<tr>\n<th>\u30d1\u30c3\u30b1\u30fc\u30b8<\/th>\n<th>\u5f79\u5272<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>gulp<\/code><\/td>\n<td>\u30bf\u30b9\u30af\u30e9\u30f3\u30ca\u30fc\u672c\u4f53\uff085\u7cfb\uff09<\/td>\n<\/tr>\n<tr>\n<td><code>gulp-sass<\/code> + <code>sass<\/code><\/td>\n<td>Dart Sass \u3067\u30b3\u30f3\u30d1\u30a4\u30eb<\/td>\n<\/tr>\n<tr>\n<td><code>gulp-autoprefixer<\/code><\/td>\n<td>\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u81ea\u52d5\u4ed8\u4e0e<\/td>\n<\/tr>\n<tr>\n<td><code>gulp-clean-css<\/code><\/td>\n<td>CSS \u5727\u7e2e<\/td>\n<\/tr>\n<tr>\n<td><code>gulp-sourcemaps<\/code><\/td>\n<td>\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u51fa\u529b<\/td>\n<\/tr>\n<tr>\n<td><code>gulp-imagemin<\/code><\/td>\n<td>\u753b\u50cf\u5727\u7e2e\uff08\u73fe\u884c\u306f ESM \u5c02\u7528\uff09<\/td>\n<\/tr>\n<tr>\n<td><code>gulp-plumber<\/code><\/td>\n<td>watch \u306e\u7570\u5e38\u7d42\u4e86\u9632\u6b62<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>gulpfile \u3092 ESM \u3067\u66f8\u304f\u305f\u3081\u3001<code>package.json<\/code> \u306b <code>\"type\": \"module\"<\/code> \u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">{\n  \"type\": \"module\"\n}<\/pre>\n<p><code>\"type\": \"module\"<\/code> \u3092\u8db3\u3057\u305f\u304f\u306a\u3044\u5834\u5408\u306f\u3001gulpfile \u306e\u30d5\u30a1\u30a4\u30eb\u540d\u3092 <code>gulpfile.mjs<\/code> \u306b\u3057\u3066\u3082 ESM \u3068\u3057\u3066\u6271\u308f\u308c\u307e\u3059\u3002<\/p>\n<p>\u73fe\u5728\u306e <code>gulp-sass<\/code> \u306f\u5185\u90e8\u3067\u4f7f\u3046 Sass \u30b3\u30f3\u30d1\u30a4\u30e9\u3092\u81ea\u5206\u3067\u6e21\u3059\u5f62\u5f0f\u3067\u3059\u3002<code>node-sass<\/code> \u306f\u975e\u63a8\u5968\u306e\u305f\u3081\u3001Dart Sass\uff08<code>sass<\/code> \u30d1\u30c3\u30b1\u30fc\u30b8\uff09\u3092\u4f7f\u3063\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h3>CommonJS \u306e\u307e\u307e\u66f8\u304d\u305f\u3044\u5834\u5408\u306e\u9003\u3052\u9053<\/h3>\n<p>\u4e8b\u60c5\u304c\u3042\u3063\u3066 <code>require<\/code> \u5f62\u5f0f\uff08CommonJS\uff09\u3092\u7dad\u6301\u3057\u305f\u3044\u5834\u5408\u306f\u3001<code>gulp-imagemin<\/code> \u304c CommonJS \u3067\u63d0\u4f9b\u3055\u308c\u3066\u3044\u305f\u6700\u5f8c\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3067\u3042\u308b <strong>7.1.0<\/strong> \u3092\u56fa\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"lang:default decode:true\">npm install --save-dev gulp-imagemin@7.1.0<\/pre>\n<p>v8.0.0 \u4ee5\u964d\u306f ESM \u5c02\u7528\u306b\u306a\u3063\u3066\u304a\u308a\u3001<code>const imagemin = require('gulp-imagemin')<\/code> \u306e\u307e\u307e\u3060\u3068 <code>ERR_REQUIRE_ESM<\/code> \u3067\u843d\u3061\u307e\u3059\u3002\u65b0\u898f\u306b\u7d44\u3080\u306a\u3089\u3001\u5f8c\u8ff0\u306e ESM \u7248\u3067\u66f8\u304f\u306e\u304c\u304a\u3059\u3059\u3081\u3067\u3059\u3002<\/p>\n<h2>\u5b9f\u88c5\u4f8b<\/h2>\n<p><code>gulpfile.js<\/code> \u3092\u4f5c\u6210\u3057\u307e\u3059\uff08<code>package.json<\/code> \u306b <code>\"type\": \"module\"<\/code> \u304c\u3042\u308b\u524d\u63d0\u306e ESM \u7248\u3067\u3059\uff09\u3002<\/p>\n<pre class=\"lang:default decode:true\">import { src, dest, watch, series, parallel } from 'gulp';\n\nimport gulpSass from 'gulp-sass';\nimport * as dartSass from 'sass';\nimport autoprefixer from 'gulp-autoprefixer';\nimport cleanCSS from 'gulp-clean-css';\nimport sourcemaps from 'gulp-sourcemaps';\nimport imagemin from 'gulp-imagemin';\nimport plumber from 'gulp-plumber';\n\nconst sass = gulpSass(dartSass);\n\nconst paths = {\n  scss: {\n    src: 'src\/scss\/**\/*.scss',\n    dest: 'dist\/css',\n  },\n  images: {\n    src: 'src\/images\/**\/*.{png,jpg,jpeg,gif,svg}',\n    dest: 'dist\/images',\n  },\n};\n\n\/\/ Sass \u30b3\u30f3\u30d1\u30a4\u30eb\nfunction styles() {\n  return src(paths.scss.src)\n    .pipe(plumber())\n    .pipe(sourcemaps.init())\n    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))\n    .pipe(autoprefixer())\n    .pipe(cleanCSS())\n    .pipe(sourcemaps.write('.\/'))\n    .pipe(dest(paths.scss.dest));\n}\n\n\/\/ \u753b\u50cf\u5727\u7e2e\nfunction images() {\n  return src(paths.images.src)\n    .pipe(plumber())\n    .pipe(imagemin())\n    .pipe(dest(paths.images.dest));\n}\n\n\/\/ \u76e3\u8996\nfunction watchFiles() {\n  watch(paths.scss.src, styles);\n  watch(paths.images.src, images);\n}\n\nconst build = parallel(styles, images);\nconst dev = series(build, watchFiles);\n\nexport { styles, images, build };\nexport { dev as watch, dev as default };<\/pre>\n<p>\u30dd\u30a4\u30f3\u30c8\u306f\u3001<code>gulp-sass<\/code> \/ <code>gulp-imagemin<\/code> \u306a\u3069\u3092 <code>import<\/code> \u3067\u8aad\u307f\u8fbc\u3080\u3068\u3053\u308d\u3067\u3059\u3002<code>gulp-sass<\/code> \u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3055\u308c\u305f\u30d5\u30a1\u30af\u30c8\u30ea\u95a2\u6570\u306b Dart Sass \u3092\u6e21\u3057\u3066\u4f7f\u3046\u305f\u3081\u3001<code>gulpSass(dartSass)<\/code> \u306e\u5f62\u306b\u3057\u3066\u3044\u307e\u3059\u3002\u516c\u958b API\uff08<code>src<\/code> \/ <code>dest<\/code> \/ <code>series<\/code> \/ <code>parallel<\/code>\uff09\u81ea\u4f53\u306f gulp 4 \u3068\u540c\u3058\u306a\u306e\u3067\u3001\u30bf\u30b9\u30af\u306e\u7d44\u307f\u7acb\u3066\u65b9\u306f\u5f93\u6765\u3069\u304a\u308a\u3067\u3059\u3002<\/p>\n<h3>\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6\u306e\u6307\u5b9a<\/h3>\n<p><code>gulp-autoprefixer<\/code> \u306f <code>browserslist<\/code> \u3092\u53c2\u7167\u3057\u307e\u3059\u3002<code>package.json<\/code> \u306b\u4ee5\u4e0b\u3092\u8ffd\u52a0\u3057\u3066\u3001\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6\u3092\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5168\u4f53\u3067\u4e00\u5143\u7ba1\u7406\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">{\n  \"browserslist\": [\n    \"&gt; 0.5%\",\n    \"last 2 versions\",\n    \"not dead\"\n  ]\n}<\/pre>\n<h3>\u5727\u7e2e\u3068\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u4e21\u7acb<\/h3>\n<p>CSS \u3092\u5727\u7e2e\u3059\u308b\u3068\u884c\u756a\u53f7\u304c\u6f70\u308c\u3001DevTools \u3067\u306e\u30c7\u30d0\u30c3\u30b0\u304c\u3057\u3065\u3089\u304f\u306a\u308a\u307e\u3059\u3002<code>sourcemaps.init()<\/code> \u3092 <code>sass()<\/code> \u306e\u524d\u306b\u3001<code>sourcemaps.write()<\/code> \u3092\u6700\u5f8c\u306b\u7f6e\u304f\u3053\u3068\u3067\u3001\u5727\u7e2e\u5f8c\u3067\u3082\u5143\u306e SCSS \u306e\u884c\u307e\u3067\u305f\u3069\u308c\u307e\u3059\u3002<\/p>\n<h3>watch \u3092\u843d\u3068\u3055\u306a\u3044\u5de5\u592b<\/h3>\n<p><code>gulp-plumber<\/code> \u3068 <code>sass.logError<\/code> \u3092\u5165\u308c\u3066\u304a\u304f\u3068\u3001SCSS \u306e\u6587\u6cd5\u30a8\u30e9\u30fc\u304c\u51fa\u3066\u3082\u76e3\u8996\u30d7\u30ed\u30bb\u30b9\u304c\u6b62\u307e\u3089\u305a\u3001\u30a8\u30e9\u30fc\u5185\u5bb9\u3060\u3051\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u3053\u308c\u304c\u7121\u3044\u3068\u3001\u30bf\u30a4\u30d7\u30df\u30b9\u306e\u305f\u3073\u306b watch \u3092\u518d\u8d77\u52d5\u3059\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<h2>\u5b9f\u884c\u65b9\u6cd5<\/h2>\n<pre class=\"lang:default decode:true\"># 1\u56de\u3060\u3051\u30d3\u30eb\u30c9\nnpx gulp build\n\n# \u76e3\u8996\u30e2\u30fc\u30c9\uff08\u4fdd\u5b58\u3059\u308b\u305f\u3073\u306b\u81ea\u52d5\u30d3\u30eb\u30c9\uff09\nnpx gulp<\/pre>\n<p><code>package.json<\/code> \u306b scripts \u3092\u5b9a\u7fa9\u3057\u3066\u304a\u304f\u3068\u4fbf\u5229\u3067\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">{\n  \"scripts\": {\n    \"build\": \"gulp build\",\n    \"watch\": \"gulp\"\n  }\n}<\/pre>\n<h2>\u78ba\u8a8d\u65b9\u6cd5<\/h2>\n<ul>\n<li><code>dist\/css\/style.css<\/code> \u304c\u751f\u6210\u3055\u308c\u3001\u5727\u7e2e\u3055\u308c\u3066\u3044\u308b\u3053\u3068<\/li>\n<li><code>dist\/css\/style.css.map<\/code> \u304c\u51fa\u529b\u3055\u308c\u3001DevTools \u306e Sources \u3067\u5143 SCSS \u304c\u8868\u793a\u3055\u308c\u308b\u3053\u3068<\/li>\n<li><code>dist\/images\/<\/code> \u306e\u753b\u50cf\u30b5\u30a4\u30ba\u304c\u5143\u3088\u308a\u5c0f\u3055\u304f\u306a\u3063\u3066\u3044\u308b\u3053\u3068<\/li>\n<li>watch \u8d77\u52d5\u4e2d\u306b SCSS \u3092\u4fdd\u5b58\u3059\u308b\u3068\u3001\u81ea\u52d5\u3067 CSS \u304c\u66f4\u65b0\u3055\u308c\u308b\u3053\u3068<\/li>\n<\/ul>\n<h2>\u3064\u307e\u305a\u304d\u30dd\u30a4\u30f3\u30c8<\/h2>\n<ul>\n<li><strong><code>gulp-imagemin<\/code> \u306e <code>ERR_REQUIRE_ESM<\/code><\/strong>\uff1a\u73fe\u884c\uff08v8 \u4ee5\u964d\uff09\u306f ESM \u5c02\u7528\u3067\u3059\u3002<code>require('gulp-imagemin')<\/code> \u306e\u307e\u307e\u3060\u3068\u843d\u3061\u307e\u3059\u3002gulpfile \u3092 ESM\uff08<code>import<\/code>\uff09\u306b\u3059\u308b\u304b\u3001CommonJS \u3092\u7dad\u6301\u3059\u308b\u306a\u3089 <code>gulp-imagemin@7.1.0<\/code> \u3092\u56fa\u5b9a\u3057\u307e\u3059\u3002<\/li>\n<li><strong>\u30b3\u30f3\u30d1\u30a4\u30e9\u672a\u6307\u5b9a\u30a8\u30e9\u30fc<\/strong>\uff1a<code>gulpSass(dartSass)<\/code>\uff08CommonJS \u306a\u3089 <code>require('gulp-sass')(require('sass'))<\/code>\uff09\u306e\u3088\u3046\u306b Sass \u30b3\u30f3\u30d1\u30a4\u30e9\u3092\u6e21\u3059\u5f62\u5f0f\u3002\u53e4\u3044\u8a18\u6cd5\u3060\u3068\u52d5\u304d\u307e\u305b\u3093\u3002<\/li>\n<li><strong>gulp 3 \u7cfb\u306e\u60c5\u5831\u304c\u6df7\u3056\u308b<\/strong>\uff1a<code>gulp.task('build', ['styles'])<\/code> \u306e\u914d\u5217\u6307\u5b9a\u306f gulp 4 \/ 5 \u3067\u306f\u4f7f\u3048\u307e\u305b\u3093\u3002<code>series<\/code> \/ <code>parallel<\/code> \u3092\u4f7f\u3044\u307e\u3059\u3002<\/li>\n<li><strong>watch \u304c\u6b62\u307e\u308b<\/strong>\uff1a<code>plumber<\/code> + <code>logError<\/code> \u3067\u5bfe\u51e6\u3057\u307e\u3059\u3002<\/li>\n<li><strong>SVG \u306e\u898b\u305f\u76ee\u5909\u5316<\/strong>\uff1aimagemin \u304c\u5c5e\u6027\u3092\u524a\u308b\u3053\u3068\u304c\u3042\u308b\u305f\u3081\u3001\u30a2\u30a4\u30b3\u30f3\u7cfb\u306f\u51fa\u529b\u3092\u76ee\u8996\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<h2>\u307e\u3068\u3081<\/h2>\n<p>gulp \u3092\u4f7f\u3048\u3070\u3001Sass \u30b3\u30f3\u30d1\u30a4\u30eb\u3068\u753b\u50cf\u5727\u7e2e\u3092\u300c\u4fdd\u5b58\u3059\u308b\u3060\u3051\u3067\u8d70\u308b\u300d\u72b6\u614b\u306b\u3067\u304d\u307e\u3059\u3002\u8981\u70b9\u306f3\u3064\u3067\u3059\u3002<\/p>\n<ul>\n<li>gulp 5 \u306e <code>series<\/code> \/ <code>parallel<\/code> \u3067\u30bf\u30b9\u30af\u306e\u76f4\u5217\u30fb\u4e26\u5217\u3092\u660e\u793a\u3059\u308b\uff08API \u306f gulp 4 \u3068\u4e92\u63db\uff09<\/li>\n<li><code>plumber<\/code> + <code>logError<\/code> \u3067 watch \u3092\u843d\u3068\u3055\u306a\u3044<\/li>\n<li><code>sourcemaps<\/code> \u3092\u631f\u3093\u3067\u5727\u7e2e\u5f8c\u3082\u30c7\u30d0\u30c3\u30b0\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b<\/li>\n<\/ul>\n<p>\u8efd\u91cf\u306a\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\u3068\u3057\u3066\u3001CSS \u3068\u753b\u50cf\u3092\u6271\u3046\u9759\u7684\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3084\u30c6\u30fc\u30de\u958b\u767a\u3067\u306f\u4eca\u3067\u3082\u5341\u5206\u73fe\u5f79\u3067\u3059\u3002\u307e\u305a\u306f\u6700\u5c0f\u69cb\u6210\u3067\u7d44\u307f\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u3066 JS \u30d0\u30f3\u30c9\u30eb\u3084 WebP \u5909\u63db\u306a\u3069\u3092\u8db3\u3057\u3066\u3044\u304f\u306e\u304c\u304a\u3059\u3059\u3081\u3067\u3059\u3002WebP \u3078\u306e\u5909\u63db\u30fb\u6700\u9069\u5316\u306f imagemin \u7cfb\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u7d44\u307f\u5408\u308f\u305b\u308c\u3070\u3001\u3053\u306e\u753b\u50cf\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u5ef6\u9577\u3068\u3057\u3066\u8ffd\u52a0\u3067\u304d\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u9759\u7684\u30b5\u30a4\u30c8\u3084CMS\u30c6\u30fc\u30de\u306e\u5236\u4f5c\u3067\u306f\u3001Sass\uff08SCSS\uff09\u306e\u30b3\u30f3\u30d1\u30a4\u30eb\u3068\u753b\u50cf\u306e\u6700\u9069\u5316\u304c\u6bce\u56de\u767a\u751f\u3057\u307e\u3059\u3002\u624b\u4f5c\u696d\u3067\u3084\u3063\u3066\u3044\u308b\u3068\u6642\u9593\u304c\u304b\u304b\u308a\u3001\u3084\u308a\u5fd8\u308c\u3082\u8d77\u304d\u304c\u3061\u3067\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001gulp\uff085\u7cfb\uff09\u3092\u4f7f\u3063\u3066\u4ee5\u4e0b\u30921\u3064\u306e\u30d3\u30eb\u30c9\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306b\u307e\u3068\u3081\u308b\u624b\u9806\u2026<\/p>\n","protected":false},"author":1,"featured_media":3689,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","_veu_custom_css":"","veu_display_promotion_alert":"","vkexunit_cta_each_option":"","_lightning_design_setting":[],"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[42],"tags":[64,55,101],"class_list":["post-3690","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-memorandum","tag-api","tag-css","tag-101"],"veu_head_title_object":{"title":"","add_site_title":""},"jetpack_publicize_connections":[],"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/qol-kk.com\/wp2\/wp-content\/uploads\/2026\/11\/20261024-00mvlly3-thumbnail.jpg","_links":{"self":[{"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/posts\/3690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/comments?post=3690"}],"version-history":[{"count":1,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/posts\/3690\/revisions"}],"predecessor-version":[{"id":3691,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/posts\/3690\/revisions\/3691"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/media\/3689"}],"wp:attachment":[{"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/media?parent=3690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/categories?post=3690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/tags?post=3690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}