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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

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

Q&A

解決済

1回答

493閲覧

sassのコンパイル後に、圧縮前のstyle.css、圧縮後のstyle.min.css両方を生成したいです。

sakura-h

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

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

0グッド

0クリップ

投稿2022/04/29 03:02

該当のソースコード

javascript###

1const { src, dest, watch, series, parallel, lastRun } = require("gulp"); 2const sass = require("gulp-sass")(require("sass")); 3const postcss = require("gulp-postcss"); 4const cssnano = require("cssnano"); 5const rename = require("gulp-rename"); 6 7const compileSass = (done) => { 8 const postcssPlugins = [ 9 autoprefixer({ 10 grid: "autoplace", 11 cascade: false, 12 }), 13 cssdeclsort({ order: "alphabetical" }), 14 ]; 15 src("./src/assets/scss/**/*.scss", { sourcemaps: true }) 16 .pipe( 17 plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) 18 ) 19 .pipe(sass({ outputStyle: "expanded" })) 20 .pipe(postcss(postcssPlugins)) 21 .pipe(mode.production(gcmq())) 22 .pipe(dest("./dist/assets/css", { sourcemaps: "./sourcemaps" })) 23 .on("end", done); 24}; 25 26// minify 27const minifyCss = (done) => { 28 src(["./dist/assets/css/**.css", "!./dist/assets/css/**.min.css"], { 29 sourcemaps: true, 30 }) 31 .pipe(postcss(cssnano))ボールドテキスト 32 .pipe( 33 rename({ 34 suffix: ".min", 35 }) 36 ) 37 .pipe(dest("./dist/assets/css", { sourcemaps: "sourcemaps" })); 38 39 done(); 40}; 41 42module.exports = { 43 sass: compileSass, 44 minify: minifyCss, 45 build: series(compileSass, minifyCss) 46}; 47

試したこと

sassのコンパイル → minifyを順番通りに行いたく下記記事を参考に、
参考記事
cssnano、gulp-renameを新たにインストールをし、gulpfile.jsに該当コードを追記しました。

gulpコマンドを実行しましても、今まで通りsassのコンパイルが行われるのみでminファイルが生成されませんでした。ハマってしまいなかなか抜け出せません。

書き方がちがうのか、なにかもれているのか…
お知恵を拝借いただけませんでしょうか。

インストール済みパッケージのバージョン

cssnano: 5.1.7
gulp-rename: 2.0.0
gulp-postcss" 9.0.0
gulp: 4.0.2"

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

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

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

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

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

guest

回答1

0

自己解決

自己解決しました。

ファイル後ろに記載していた、module.exportsで上書きされて実行されていないようでした。
minifyCssを下記へ追加したところ、実行されました!

javascript

1コード 2module.exports = { 3 sass: compileSass, 4 pug: compilePug, 5 bundle: bundleJs, 6 tinypng: tinyPng, 7 webp: generateWebp, 8 image: series(tinyPng, generateWebp, copyImages), 9 cache: cacheBusting, 10 build: series( 11 parallel(compileSass, bundleJs, compilePug), 12 minifyCss, 13 tinyPng, 14 generateWebp, 15 copyImages, 16 cacheBusting 17 ), 18 default: parallel(buildServer, watchFiles), 19}; 20 21

投稿2022/04/29 07:31

sakura-h

総合スコア13

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問