実現したいこと
- gulp-autoprefixerを正常に動作するようにする
前提
gulpを使用して、Sassのコンパイル環境を作りました。cssへのコンパイルはできた状態です。そしてベンダープレフィックスを自動で付与したいと思い、gulp-autoprefixerをインストールし使用したところ、object-fitにしかベンダープレフィックスが付与されず、liner-gradientやgrid、transformなどには付与されません。object-fit以外にもベンダープレフィックスを付与したいです。下記のコードで何か間違っていればご指摘いただきたいです。ヒント、またはアドバイスなどいただけると幸いです。
該当のソースコード
package.json
1{ 2 "name": "_gulp", 3 "version": "1.0.0", 4 "description": "", 5 "main": "gulpfile.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC", 12 "dependencies": { 13 "autoprefixer": "^10.4.14", 14 "browser-sync": "^2.29.0", 15 "gulp": "^4.0.2", 16 "gulp-autoprefixer": "^8.0.0", 17 "gulp-dart-sass": "^1.0.2", 18 "gulp-notify": "^4.0.0", 19 "gulp-plumber": "^1.2.1", 20 "gulp-postcss": "^9.0.1" 21 }, 22 "browserslist": [ 23 "last 10 versions", 24 "ie >= 11", 25 "Android >= 4" 26 ] 27}
gulpfile.js
1const gulp = require('gulp');//gulp本体 2 3//scss 4const sass = require('gulp-dart-sass');//Dart Sass はSass公式が推奨 @use構文などが使える 5const plumber = require("gulp-plumber"); // エラーが発生しても強制終了させない 6const notify = require("gulp-notify"); // エラー発生時のアラート出力 7const browserSync = require("browser-sync"); //ブラウザリロード 8const autoprefixer = require("gulp-autoprefixer"); 9 10 11 12// 入出力するフォルダを指定 13const srcBase = '../_static/src'; 14const assetsBase = '../_assets'; 15const distBase = '../_static/dist'; 16 17 18const srcPath = { 19 'scss': assetsBase + '/scss/**/*.scss', 20 'html': srcBase + '/**/*.html' 21}; 22 23const distPath = { 24 'css': distBase + '/css/', 25 'html': distBase + '/' 26}; 27 28 29/** 30 * sass 31 * 32 */ 33const cssSass = () => { 34 return gulp.src(srcPath.scss, { 35 sourcemaps: true 36 }) 37 .pipe( 38 //エラーが出ても処理を止めない 39 plumber({ 40 errorHandler: notify.onError('Error:<%= error.message %>') 41 })) 42 .pipe(sass({ outputStyle: 'expanded' })) //指定できるキー expanded compressed 43 .pipe(autoprefixer()) 44 .pipe(gulp.dest(distPath.css, { sourcemaps: './' })) //コンパイル先 45 .pipe(browserSync.stream()) 46 .pipe(notify({ 47 message: 'Sassをコンパイルしました!', 48 onLast: true 49 })) 50} 51 52 53/** 54 * html 55 */ 56const html = () => { 57 return gulp.src(srcPath.html) 58 .pipe(gulp.dest(distPath.html)) 59} 60 61/** 62 * ローカルサーバー立ち上げ 63 */ 64const browserSyncFunc = () => { 65 browserSync.init(browserSyncOption); 66} 67 68const browserSyncOption = { 69 server: distBase 70} 71 72/** 73 * リロード 74 */ 75const browserSyncReload = (done) => { 76 browserSync.reload(); 77 done(); 78} 79 80/** 81 * 82 * ファイル監視 ファイルの変更を検知したら、browserSyncReloadでreloadメソッドを呼び出す 83 * series 順番に実行 84 * watch('監視するファイル',処理) 85 */ 86const watchFiles = () => { 87 gulp.watch(srcPath.scss, gulp.series(cssSass)) 88 gulp.watch(srcPath.html, gulp.series(html, browserSyncReload)) 89} 90 91/** 92 * seriesは「順番」に実行 93 * parallelは並列で実行 94 */ 95exports.default = gulp.series( 96 gulp.parallel(html, cssSass), 97 gulp.parallel(watchFiles, browserSyncFunc) 98);
scss
1header { 2 display: flex; 3 background-image: linear-gradient(to bottom, #8BCC8E 0%, #A7F5AB 100%); 4 object-fit: cover; 5 display: grid; 6 transform: translateY(-50%); 7 align-items: center; 8 }
以下、上記scssをコンパイルしたcssです。
css
1header { 2 display: flex; 3 background-image: linear-gradient(to bottom, #8BCC8E 0%, #A7F5AB 100%); 4 -o-object-fit: cover; 5 object-fit: cover; 6 display: grid; 7 transform: translateY(-50%); 8 align-items: center; 9}
試したこと
postcssのautoprefixerの使用、browserslistの記述変更、Node.jsのバージョンを安定版に変更して再度パッケージをインストール、などを行いましたが同じ状態です。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/03/22 05:52