前提
現在、web制作をしており、コーディングの際にgulpを使い、scssをcssにコンパイルしています。
ファイルが増加し、1度のコンパイルに数分時かかるため、gulp-cachedの使用を検討していますが、使い方がいまいちわかりません。
実現したいこと
・数分かかっているコンパイル時間を短縮したい
該当のソースコード(javascriptとありますが、gulpです)
javascript
1// ---------パスの設定---------- 2 3// コンパイルもとのscssファイルの指定 4const PathScss = './src/sass/**/*.scss'; 5 6// scssをコンパイルしたcssファイルの格納先 7const PathCssFolder = './public/css'; 8 9// 監視対象のjsファイルを指定 10const PathJS = './src/js/**/*.js'; 11 12// .jsの圧縮ファイルである.minを格納するフォルダの指定 13const PathminJS = './public/js'; 14 15// 監視対象のimgフォルダの指定 16const PathImage = './src/img/**/*'; 17 18// imgファイルを格納するフォルダの指定 19const PathImageFolder = './public/img/'; 20 21// 監視対象のHTMLファイルの指定 22const Pugfile = './src/**/*.pug'; 23 24 25// .pugはscssのようにファイルを分割して効率化していくので、余計な.pugファイルをコンパイルしないように _***.pug のように先頭にアンダーバーがある.pugに関しては対象から除く指定をする 26const Pugfile_nocompile = '!./src/**/_*.pug'; 27 28 29 30 31// ガルプの読み込み 32const gulp = require('gulp'); 33const sass = require('gulp-sass')(require('sass')); 34const postcss = require('gulp-postcss'); 35const autoprefixer = require('autoprefixer'); 36const cssSorter = require('css-declaration-sorter'); 37const mmq = require('gulp-merge-media-queries'); 38const browserSync = require('browser-sync'); 39const cleanCss = require('gulp-clean-css'); 40const uglify = require('gulp-uglify'); 41const rename = require('gulp-rename'); 42const htmlBeatutify = require('gulp-html-beautify'); 43const cache = require('gulp-cached'); 44 45// pugの読み込み 46const pug = require('gulp-pug'); 47 48 49 50// 関数を作成し、処理を記述 51// ガルプでは明示的に処理の終了を示すためにdoneをいれる 52// function test(done) { 53// console.log('hello gulp'); 54// done(); 55// } 56 57// sassをcssにコンパイルする関数 58function compileSass() { 59 60 // srcの中のフォルダの中まで辿り、.scss拡張子をコンパイルできるような記述 61 return gulp.src(PathScss) 62 63 // 追加 2022/12/3 64 // .pipe(cache()) 65 66 // コンパイルの処理を記述 67 .pipe(sass()) 68 .pipe(postcss([autoprefixer(), cssSorter({ 69 order: 'concentric-css' 70 })])) 71 .pipe(mmq()) 72 73 // 出力先のフォルダ 74 .pipe(gulp.dest(PathCssFolder)) 75 76 .pipe(cleanCss()) 77 .pipe(rename({ 78 suffix: '.min' 79 })) 80 81 .pipe(gulp.dest(PathCssFolder)) 82} 83 84// pugのコンパイル関数 85function compilePug() { 86 // コンパイル元のファイルまたはフォルダを指定 87 88 // .pugをコンパイル指定しつつ、アンダーバーから始まる.pugは除く 89 return gulp.src([Pugfile, Pugfile_nocompile]) 90 91 // コンパイルの処理を記述 92 93 // pugのパッケージの読み込み 94 // pretty: trueは改行してコンパイルしてくれるオプション 95 .pipe(pug({ 96 pretty: true 97 })) 98 99 // コンパイル先のフォルダの指定 100 .pipe(gulp.dest('./public')) 101} 102 103// この関数で、指定ファイルを監視できる 104function watch() { 105 // 監視対象ファイルに変更があればcompileSassを実行 106 // gulp.series(compileSass, browserReload)は左から順に実行されていく 107 // scssが更新されたら、コンパイルを実行⇒ブラウザを反映するためリロード 108 gulp.watch(PathScss, gulp.series(compileSass, browserReload)); 109 110 gulp.watch(PathJS, gulp.series(minJS, browserReload)); 111 112 gulp.watch(PathImage, gulp.series(copyImage, browserReload)); 113 114 // gulp.watch(Pugfile, gulp.series(formatHTML, browserReload)); 115 gulp.watch(Pugfile, gulp.series(compilePug, browserReload)); 116 117} 118 119// ブラウザを開く関数 120function browserInit(done) { 121 browserSync.init({ 122 server: { 123 baseDir: './public' 124 } 125 }); 126 127 done(); 128} 129 130// これでリロードできる 131function browserReload(done) { 132 browserSync.reload(); 133 134 done(); 135} 136 137// 圧縮したjsファイルを生成 138function minJS() { 139 return gulp.src(PathJS) 140 .pipe(uglify()) 141 .pipe(rename({ 142 suffix: '.min' 143 })) 144 .pipe(gulp.dest(PathminJS)) 145} 146 147// フォーマットが崩れていてもきれいに生成し直す関数 148function formatHTML() { 149 return gulp.src(Pugfile) 150 151 // パラメータを複数入れられる 152 .pipe(htmlBeatutify({ 153 indent_size: 2, 154 indent_with_tabs: true, 155 })) 156 .pipe(gulp.dest('./public')) 157} 158 159// src/assets/img/にあるファイルをすべてpublic/assets/imgに入れる関数 160function copyImage() { 161 return gulp.src(PathImage) 162 .pipe(gulp.dest(PathImageFolder)) 163} 164 165// ターミナルで実行するための記述 166// ターミナルでnpx gulp test で実行する 167// exports.test = test; 168exports.compileSass = compileSass; 169exports.watch = watch; 170exports.browserInit = browserInit; 171 172// gulp.parallel(browserInit, watch)は同時に実行する 173exports.dev = gulp.parallel(browserInit, watch); 174exports.minJS = minJS; 175// exports.formatHTML = formatHTML; 176 177// exports.build = gulp.parallel(formatHTML, minJS, compileSass, copyImage); 178 179exports.build = gulp.parallel(compilePug, minJS, compileSass, copyImage); 180 181 182// コマンドから使えるようにする 183exports.compilePug = compilePug;
試したこと
https://www.npmjs.com/package/gulp-cached
https://dev.classmethod.jp/articles/gulp-solo-adv-cal-14/
こちらを参考にしてみましたが、パラメータになにを記述すればよいのかわかりませんでした。
補足情報(FW/ツールのバージョンなど)
今回はコンパイル時間の短縮が目的なので、gulp-cachedに限らずほかの手段があれば教えていただけると幸いです。
あなたの回答
tips
プレビュー