#WordPressにおけるgulpfile.jsについて
いつもありがとうございます。
WordPressの中のgulpfile.jsで Sassにある.scssファイルをCSSディレクトリに
- コンパイルしてchild-theme.css
- Autoprefixerでベンダープレフィクスを付与
- child-theme.min.cssに圧縮
と考えているのですが、動いてくれてないです。
node_modulesはgulpfile.jsがある階層と同じところにあります。
gulp-clean-css
gulp-rename
を入れる前には動いていたのですが、圧縮化と.minを付ける前は一応動いていました。
是非アドバイスをいただければと思います。
よろしくおねがいします。
gulpfile.js
1 2const gulp = require("gulp"); 3 4const sass = require("gulp-sass"); 5 6const postcss = require("gulp-postcss"); 7 8const cleanCSS = require("gulp-clean-css"); 9//圧縮化 10const rename = require("gulp-rename"); 11//.minを付与してリネーム 12const autoprefixer = require("autoprefixer"); 13 14// style.scssの監視タスクを作成する 15gulp.task("sass", function() { 16 17 return gulp.watch("sass/child-theme.scss", function() { 18 19 return ( 20 gulp 21 .src("sass/child-theme.scss") 22 // Sassのコンパイルを実行 23 24 .pipe( 25 sass({ 26 outputStyle: "expanded" 27 }) 28 29 .on("error", sass.logError) 30 ) 31 32 .pipe( 33 postcss([ 34 autoprefixer({ 35 // ☆IEは11以上、Androidは4.4以上 36 // その他は最新2バージョンで必要なベンダープレフィックスを付与する設定 37 browsers: ["last 2 versions", "ie >= 11", "Android >= 4"], 38 cascade: false 39 }) 40 ]) 41 ) 42 .pipe(cleanCSS()) 43 .pipe( 44 rename({ 45 extname: ".min.css" 46 }) 47 ) 48 49 // cssフォルダー以下に保存 50 .pipe(gulp.dest("css")) 51 ); 52 }); 53}); 54
あなたの回答
tips
プレビュー