該当のソースコード
javascript###
const { src, dest, watch, series, parallel, lastRun } = require("gulp"); const sass = require("gulp-sass")(require("sass")); const postcss = require("gulp-postcss"); const cssnano = require("cssnano"); const rename = require("gulp-rename"); const compileSass = (done) => { const postcssPlugins = [ autoprefixer({ grid: "autoplace", cascade: false, }), cssdeclsort({ order: "alphabetical" }), ]; src("./src/assets/scss/**/*.scss", { sourcemaps: true }) .pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) ) .pipe(sass({ outputStyle: "expanded" })) .pipe(postcss(postcssPlugins)) .pipe(mode.production(gcmq())) .pipe(dest("./dist/assets/css", { sourcemaps: "./sourcemaps" })) .on("end", done); }; // minify const minifyCss = (done) => { src(["./dist/assets/css/**.css", "!./dist/assets/css/**.min.css"], { sourcemaps: true, }) .pipe(postcss(cssnano))ボールドテキスト .pipe( rename({ suffix: ".min", }) ) .pipe(dest("./dist/assets/css", { sourcemaps: "sourcemaps" })); done(); }; module.exports = { sass: compileSass, minify: minifyCss, build: series(compileSass, minifyCss) };
試したこと
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"
まだ回答がついていません
会員登録して回答してみよう