該当のソースコード
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"
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。