質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

1回答

3378閲覧

gulpの処理が遅い

job_ao

総合スコア5

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2020/03/02 06:20

gulp4を使って、でejsのhtml出力、sassのcss出力をしています。
出力するファイルが多くなると処理時間が増えてしまい、画面の更新が遅くなってしまいました。

出力するhtmlファイルが2ファイルですと2.69sですが、4ファイルになると12sかかっています。
処理を早くする方法はありますか?

gulpfileは以下のURLを参考にしました。
https://yumegori.com/gulp4-setting20191025

gulpfile

1//gulpとgulpのパッケージを読み込み 2const { src, dest, watch, lastRun, parallel, series } = require("gulp"); 3const sass = require("gulp-sass"); 4const glob = require("gulp-sass-glob"); 5const postcss = require("gulp-postcss"); 6const autoprefixer = require("autoprefixer"); 7const plumber = require("gulp-plumber"); 8const notify = require("gulp-notify"); 9const htmlmin = require("gulp-htmlmin"); 10const del = require("del"); 11const ejs = require("gulp-ejs"); 12// const fs = require('fs'); 13// const data = require('gulp-data'); 14const concat = require("gulp-concat"); 15const order = require("gulp-order"); 16const rename = require("gulp-rename"); 17const cleanCSS = require("gulp-clean-css"); 18const pngquant = require("imagemin-pngquant"); 19const imagemin = require("gulp-imagemin"); 20const mozjpeg = require("imagemin-mozjpeg"); 21const uglify = require("gulp-uglify"); 22const browserSync = require("browser-sync"); 23const replace = require("gulp-replace"); 24 25//開発と本番で処理を分ける 26//今回はhtmlの処理のところで使っています 27const mode = require("gulp-mode")({ 28 modes: ["production", "development"], 29 default: "development", 30 verbose: false 31}); 32 33//読み込むパスと出力するパスを指定 34const srcPath = { 35 html: { 36 src: ["./src/_ejs/**/*.ejs", "!" + "./src/_ejs/**/_*.ejs"], 37 dist: "./dist/" 38 }, 39 ejs: { 40 src: ["./src/_ejs/**/*.ejs"], 41 }, 42 styles: { 43 src: "./src/_scss/**/*.scss", 44 dist: "./dist/assets/css/", 45 map: "./dist/assets/css/map" 46 }, 47 scripts: { 48 src: "./src/_js/**/*.js", 49 dist: "./dist/assets/js/", 50 map: "./dist/assets/js/map", 51 core: "src/js/core/**/*.js", 52 app: "src/js/app/**/*.js" 53 }, 54 images: { 55 src: "./src/img/**/*.{jpg,jpeg,png,gif,svg}", 56 dist: "./dist/assets/img/" 57 } 58}; 59 60//htmlの処理自動化 61const htmlFunc = () => { 62 return src(srcPath.html.src) 63 .pipe( 64 plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) 65 ) 66 .pipe(ejs({}, {}, { ext: ".html" })) //ejsを纏める 67 .pipe(rename({ extname: ".html" })) //拡張子をhtmlに 68 .pipe( 69 mode.production( 70 //本番環境のみ 71 htmlmin({ 72 //htmlの圧縮 73 collapseWhitespace: true, // 余白を除去する 74 preserveLineBreaks: true, //改行を詰める 75 minifyJS: true, // jsの圧縮 76 removeComments: true // HTMLコメントを除去する 77 }) 78 ) 79 ) 80 81 .pipe(replace(/[\s\S]*?(<!DOCTYPE)/, "$1")) 82 .pipe(dest(srcPath.html.dist)) 83 .pipe(browserSync.reload({ stream: true })); 84}; 85 86//Sassの処理自動化(開発用) 87const stylesFunc = () => { 88 return src(srcPath.styles.src, { sourcemaps: true }) 89 .pipe( 90 plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) 91 ) 92 .pipe(glob()) 93 .pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError)) 94 .pipe( 95 postcss([ 96 autoprefixer({ 97 // IEは11以上、Androidは4、ios safariは8以上 98 // その他は最新2バージョンで必要なベンダープレフィックスを付与する 99 //指定の内容はpackage.jsonに記入している 100 cascade: false, 101 grid: true 102 }) 103 ]) 104 ) 105 .pipe(dest(srcPath.styles.dist, { sourcemaps: "./map" })) 106 .pipe(browserSync.reload({ stream: true })); 107}; 108 109//Sassの処理自動化(本番用) 110const stylesCompress = () => { 111 return src(srcPath.styles.src) 112 .pipe( 113 plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) 114 ) 115 .pipe(glob()) 116 .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError)) 117 .pipe( 118 postcss([ 119 autoprefixer({ 120 //上の指定と同じ 121 cascade: false, 122 grid: true 123 }) 124 ]) 125 ) 126 .pipe(cleanCSS()) 127 .pipe(dest(srcPath.styles.dist)) 128 .pipe(browserSync.reload({ stream: true })); 129}; 130 131//scriptの処理自動化 132const scriptFunc = () => { 133 return src(srcPath.scripts.src, { sourcemaps: true }) 134 .pipe(order([srcPath.scripts.core, srcPath.scripts.app], { base: "./" })) 135 .pipe( 136 plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) 137 ) 138 .pipe(concat("init.js")) 139 .pipe(uglify({ output: { comments: /^!/ } })) 140 .pipe( 141 rename({ 142 suffix: ".min" 143 }) 144 ) 145 .pipe(dest(srcPath.scripts.dist, { sourcemaps: "./map" })) 146 .pipe(browserSync.reload({ stream: true })); 147}; 148 149//画像圧縮の定義 150const imagesBase = [ 151 pngquant({ 152 quality: [0.7, 0.85] 153 }), 154 imagemin.gifsicle(), 155 imagemin.mozjpeg({ 156 quality: 85, 157 progressive: true 158 }), 159 imagemin.optipng(), 160 imagemin.svgo({ 161 removeViewBox: false 162 }) 163]; 164 165//画像の処理自動化 166const imagesFunc = () => { 167 return src(srcPath.images.src, { since: lastRun(imagesFunc) }) 168 .pipe(plumber({ errorHandler: notify.onError("<%= error.message %>") })) 169 .pipe(imagemin(imagesBase)) 170 .pipe(dest(srcPath.images.dist)); 171}; 172 173// マップファイル除去 174const cleanMap = () => { 175 return del([srcPath.styles.map, srcPath.scripts.map]); 176}; 177 178// ブラウザの読み込み処理 179const browserSyncFunc = () => { 180 browserSync({ 181 server: { 182 baseDir: "./dist/", 183 index: "index.html" 184 }, 185 reloadOnRestart: true 186 }); 187}; 188 189// ファイルに変更があったら反映 190const watchFiles = () => { 191 watch(srcPath.html.src, htmlFunc); 192 // watch(srcPath.ejs.src, htmlFunc);//pertial 193 watch(srcPath.styles.src, stylesFunc); 194 watch(srcPath.scripts.src, scriptFunc); 195 watch(srcPath.images.src, imagesFunc); 196}; 197 198exports.default = parallel(watchFiles, browserSyncFunc); //gulpの初期処理 199exports.build = parallel(htmlFunc, stylesFunc, scriptFunc, imagesFunc); 200 201exports.sasscompress = stylesCompress; 202exports.cleanmap = cleanMap;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

これに関しては私も色々苦労がありましたね。。。
今まで解決した方法として私は2つありました。

gulp-cachedを使う

https://www.npmjs.com/package/gulp-cached
1度、全体をBuildしたあとは、ファイルの内容をキャッシュし、その後は変更差分があったファイルのみをBuildするというプラグインです。
初回はキャッシュがないため、初回のBuild時のみ時間がかかります。
(私はPugで数百ファイル管理していたのでBuild時間は5分くらいかかってました^^;)

watchで検知したパスのみをBuild対象として扱う

最終的にはこれに行き着きました。
厳密にはこれだけではうまく行かず、pathをhtmlFunkの先であれこれ調整する必要があるかも知れません。
例えばwatch時とbuild時でpathの指定を変えるなど。

javascript

1// watch側 2watch(srcPath.html.src) 3.on('change', path => htmlFunc(path)); 4 5// htmlFunc側 6const htmlFunc = (path) => { 7 return src(path) 8 〜以下省略〜

その他で思ったこと

4ファイルになると12s

それにしても処理が遅すぎますね。。。
ejsの書き方の方でも何か効率が悪いことをしてないか気になりました。

投稿2021/06/13 18:07

編集2021/06/13 18:31
runnynose

総合スコア497

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問