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

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

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

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

gulp

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

Q&A

1回答

786閲覧

gulp-autoprefixerがうまく機能しない

k-nirvana-69

総合スコア10

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

gulp

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

0グッド

0クリップ

投稿2023/03/22 05:01

編集2023/03/22 05:42

実現したいこと

  • 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のバージョンを安定版に変更して再度パッケージをインストール、などを行いましたが同じ状態です。

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

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

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

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

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

guest

回答1

0

liner-gradientやgrid、transformなどには付与されません。

もはや、現代のブラウザではそれらに対するベンダプレフィックスは不要となっています。

これらにベンダプレフィックスが必要なぐらい古いブラウザをターゲットとする必要があるのであれば、その旨を明示的に指定する必要があります。

投稿2023/03/22 05:51

maisumakun

総合スコア145779

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

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

maisumakun

2023/03/22 05:52

Can I useのようなサイトで、(ベンダプレフィックスの必要性を含めた)ブラウザの対応状況を確認できます。 https://caniuse.com
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問