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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

gulp

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

受付中

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

AN3000
AN3000

総合スコア37

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

gulp

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

0回答

0グッド

0クリップ

212閲覧

投稿2022/12/03 05:53

前提

現在、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に限らずほかの手段があれば教えていただけると幸いです。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

gulp

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