gulp-cachedの使い方がわからない

前提

現在、web制作をしており、コーディングの際にgulpを使い、scssをcssにコンパイルしています。
ファイルが増加し、1度のコンパイルに数分時かかるため、gulp-cachedの使用を検討していますが、使い方がいまいちわかりません。

実現したいこと

・数分かかっているコンパイル時間を短縮したい

該当のソースコード(javascriptとありますが、gulpです)

javascript

// ---------パスの設定---------- // コンパイルもとのscssファイルの指定const PathScss = './src/sass/**/*.scss'; // scssをコンパイルしたcssファイルの格納先const PathCssFolder = './public/css'; // 監視対象のjsファイルを指定const PathJS = './src/js/**/*.js'; // .jsの圧縮ファイルである.minを格納するフォルダの指定const PathminJS = './public/js'; // 監視対象のimgフォルダの指定const PathImage = './src/img/**/*'; // imgファイルを格納するフォルダの指定const PathImageFolder = './public/img/'; // 監視対象のHTMLファイルの指定const Pugfile = './src/**/*.pug'; // .pugはscssのようにファイルを分割して効率化していくので、余計な.pugファイルをコンパイルしないように _***.pug のように先頭にアンダーバーがある.pugに関しては対象から除く指定をするconst Pugfile_nocompile = '!./src/**/_*.pug'; // ガルプの読み込みconst gulp = require('gulp');const sass = require('gulp-sass')(require('sass'));const postcss = require('gulp-postcss');const autoprefixer = require('autoprefixer');const cssSorter = require('css-declaration-sorter');const mmq = require('gulp-merge-media-queries');const browserSync = require('browser-sync');const cleanCss = require('gulp-clean-css');const uglify = require('gulp-uglify');const rename = require('gulp-rename');const htmlBeatutify = require('gulp-html-beautify');const cache = require('gulp-cached'); // pugの読み込みconst pug = require('gulp-pug'); // 関数を作成し、処理を記述// ガルプでは明示的に処理の終了を示すためにdoneをいれる// function test(done) {// console.log('hello gulp');// done();// } // sassをcssにコンパイルする関数function compileSass() { // srcの中のフォルダの中まで辿り、.scss拡張子をコンパイルできるような記述 return gulp.src(PathScss) // 追加 2022/12/3 // .pipe(cache()) // コンパイルの処理を記述 .pipe(sass()) .pipe(postcss([autoprefixer(), cssSorter({ order: 'concentric-css' })])) .pipe(mmq()) // 出力先のフォルダ .pipe(gulp.dest(PathCssFolder)) .pipe(cleanCss()) .pipe(rename({ suffix: '.min' })) .pipe(gulp.dest(PathCssFolder))} // pugのコンパイル関数function compilePug() { // コンパイル元のファイルまたはフォルダを指定 // .pugをコンパイル指定しつつ、アンダーバーから始まる.pugは除く return gulp.src([Pugfile, Pugfile_nocompile]) // コンパイルの処理を記述 // pugのパッケージの読み込み // pretty: trueは改行してコンパイルしてくれるオプション .pipe(pug({ pretty: true })) // コンパイル先のフォルダの指定 .pipe(gulp.dest('./public'))} // この関数で、指定ファイルを監視できるfunction watch() { // 監視対象ファイルに変更があればcompileSassを実行 // gulp.series(compileSass, browserReload)は左から順に実行されていく // scssが更新されたら、コンパイルを実行⇒ブラウザを反映するためリロード gulp.watch(PathScss, gulp.series(compileSass, browserReload)); gulp.watch(PathJS, gulp.series(minJS, browserReload)); gulp.watch(PathImage, gulp.series(copyImage, browserReload)); // gulp.watch(Pugfile, gulp.series(formatHTML, browserReload)); gulp.watch(Pugfile, gulp.series(compilePug, browserReload)); } // ブラウザを開く関数function browserInit(done) { browserSync.init({ server: { baseDir: './public' } }); done();} // これでリロードできるfunction browserReload(done) { browserSync.reload(); done();} // 圧縮したjsファイルを生成function minJS() { return gulp.src(PathJS) .pipe(uglify()) .pipe(rename({ suffix: '.min' })) .pipe(gulp.dest(PathminJS))} // フォーマットが崩れていてもきれいに生成し直す関数function formatHTML() { return gulp.src(Pugfile) // パラメータを複数入れられる .pipe(htmlBeatutify({ indent_size: 2, indent_with_tabs: true, })) .pipe(gulp.dest('./public'))} // src/assets/img/にあるファイルをすべてpublic/assets/imgに入れる関数function copyImage() { return gulp.src(PathImage) .pipe(gulp.dest(PathImageFolder))} // ターミナルで実行するための記述// ターミナルでnpx gulp test で実行する// exports.test = test;exports.compileSass = compileSass;exports.watch = watch;exports.browserInit = browserInit; // gulp.parallel(browserInit, watch)は同時に実行するexports.dev = gulp.parallel(browserInit, watch);exports.minJS = minJS;// exports.formatHTML = formatHTML; // exports.build = gulp.parallel(formatHTML, minJS, compileSass, copyImage); exports.build = gulp.parallel(compilePug, minJS, compileSass, copyImage); // コマンドから使えるようにするexports.compilePug = compilePug;

試したこと

https://www.npmjs.com/package/gulp-cached
https://dev.classmethod.jp/articles/gulp-solo-adv-cal-14/
こちらを参考にしてみましたが、パラメータになにを記述すればよいのかわかりませんでした。

補足情報(FW/ツールのバージョンなど)

今回はコンパイル時間の短縮が目的なので、gulp-cachedに限らずほかの手段があれば教えていただけると幸いです。

コメントを投稿

0 コメント