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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

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

Q&A

解決済

1回答

2132閲覧

gulpで、autoprefixerを適用しているが自動でベンダープレフィックスがつかない

kaoru-drosera

総合スコア23

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

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

0グッド

0クリップ

投稿2020/03/27 23:38

###問題概要
「ctrl+sで保存ができ次第、sassで書いたスタイルを自動的にベンダープレフィックス付きでcssに起こし、ブラウザも自動的に更新する」プログラムを試しています。

なお、コードは以下サイトを参考にしております。
静的HTMLサイト制作を楽にするGulpの基本的な使い方【Webコーダー向け】
https://haniwaman.com/gulp/
https://github.com/haniwaman/template0

そこで、「ベンダープレフィックスが自動で振られない」という問題が発生しています。
今の所、「ブラウザの自動更新」「sass→cssの自動生成」はうまくいっているのですが、「ベンダープレフィックス付きにする」だけがうまくいっていない状態です。

前提・実現したいこと

「再読み込み」自動化できる作業を自動化、sassの導入。
これらをgulpを用いて実現し、コーディングでかかる手間を減らす。

現在のコード・処理経過

「ctrl+s」が終わり次第ブラウザの更新とともにcass→cssに出力される形でスタイルも更新され、その過程で自動的にベンダープレフィックスも振られる仕組みになっています。
ただし、「自動的にベンダープレフィックスも振られる仕組み」だけが作動せず、むしろ一部スチルでsass側でつけたベンダープレフィックスが消えている状態です。
そこから、「autoprefixer自体は機能している」と理解しているのですが、sass側でつけたベンダープレフィックスは一部では残っているためそれも怪しく感じています。
SASS側でつけたはずのベンダープレフィックスがCSS側で消えている
![ただし一部では残っている

ターミナル側でも特にエラーもなく、特定も難しい状況です。

linux

1XXXXXX:gulptest XXXXXX$ gulp 2[07:19:48] Using gulpfile ~/Desktop/NO-NAME/for_cording/独自/チュートリアルもの/gulptest/gulpfile.js 3[07:19:48] Starting 'default'... 4[07:19:48] Starting 'browser-sync'... 5[07:19:48] Starting 'watch'... 6[07:19:48] Finished 'browser-sync' after 138 ms 7[Browsersync] Access URLs: 8 ---------------------------- 9 Local: http://localhost:3000 10 ---------------------------- 11 UI: http://localhost:3001 12 ---------------------------- 13[Browsersync] Serving files from: ./ 14 15

gulpfile.jsとpackage.jsonが以下の通りです。
package.jsonにはautofrefixerがあることは確認できます。

javascript

1#https://github.com/haniwaman/template0 2const gulp = require("gulp"); 3 4/* sass */ 5const sass = require("gulp-sass"); 6const plumber = require("gulp-plumber"); 7const notify = require("gulp-notify"); 8const sassGlob = require("gulp-sass-glob"); 9const mmq = require("gulp-merge-media-queries"); 10const postcss = require("gulp-postcss"); 11const autoprefixer = require("autoprefixer"); 12const cssdeclsort = require("css-declaration-sorter"); 13 14/* browser-sync */ 15const browserSync = require("browser-sync"); 16 17/* imagemin */ 18const imagemin = require("gulp-imagemin"); 19const imageminPngquant = require("imagemin-pngquant"); 20const imageminMozjpeg = require("imagemin-mozjpeg"); 21const imageminOption = [ 22 imageminPngquant({ quality: [0.65, 0.8] }), 23 imageminMozjpeg({ quality: 85 }), 24 imagemin.gifsicle({ 25 interlaced: false, 26 optimizationLevel: 1, 27 colors: 256 28 }), 29 imagemin.mozjpeg(), 30 imagemin.optipng(), 31 imagemin.svgo() 32]; 33 34gulp.task("sass", function() { 35 return gulp 36 .src("./sass/**/*.scss") 37 .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })) 38 .pipe(sassGlob()) 39 .pipe(sass({ outputStyle: "expanded" })) 40 .pipe(postcss([autoprefixer()])) 41 .pipe(postcss([cssdeclsort({ order: "alphabetical" })])) 42 .pipe(mmq()) 43 .pipe(gulp.dest("./css")); 44}); 45 46gulp.task("watch", function(done) { 47 gulp.watch("./sass/**/*.scss", gulp.task("sass")); 48 gulp.watch("./sass/**/*.scss", gulp.task("bs-reload")); 49 gulp.watch("./js/*.js", gulp.task("bs-reload")); 50 gulp.watch("./*.html", gulp.task("bs-reload")); 51}); 52 53gulp.task("browser-sync", function(done) { 54 browserSync.init({ 55 server: { 56 baseDir: "./", 57 index: "index.html" 58 } 59 }); 60 done(); 61}); 62 63gulp.task("bs-reload", function(done) { 64 browserSync.reload(); 65 done(); 66}); 67 68gulp.task("imagemin", function() { 69 return gulp 70 .src("./img/**/*") 71 .pipe(imagemin(imageminOption)) 72 .pipe(gulp.dest("./img")); 73}); 74 75gulp.task("default", gulp.series(gulp.parallel("browser-sync", "watch"))); 76 77# by https://github.com/haniwaman/template0

json

1{ 2 "name": "gulptest", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC", 12 "devDependencies": { 13 "autoprefixer": "^9.7.5", 14 "browser-sync": "^2.26.7", 15 "css-declaration-sorter": "^5.1.2", 16 "gulp": "^4.0.2", 17 "gulp-ejs": "^5.0.0", 18 "gulp-imagemin": "^7.1.0", 19 "gulp-merge-media-queries": "^0.2.1", 20 "gulp-notify": "^3.2.0", 21 "gulp-plumber": "^1.2.1", 22 "gulp-postcss": "^8.0.0", 23 "gulp-rename": "^2.0.0", 24 "gulp-sass": "^4.0.2", 25 "gulp-sass-glob": "^1.1.0", 26 "gulp-stylelint": "^13.0.0", 27 "imagemin-mozjpeg": "^8.0.0", 28 "imagemin-pngquant": "^8.0.0", 29 "stylelint": "^13.2.1", 30 "stylelint-config-wordpress": "^16.0.0" 31 } 32} 33

sassファイルは以下の通りです。

sass

1*, 2*::after, 3*::before 4{ 5 box-sizing: border-box; 6 margin: 0; 7 padding: 0; 8 // line-height: 0; 9} 10img 11{ 12 width: 100%; 13} 14.rockman 15{ 16 h2 17 { 18 font-family: sans-serif; 19 font-size: 16px; 20 } 21 .cutman 22 { 23 color: #fff; 24 background-color: #f00; 25 } 26 .gutsman 27 { 28 font-family: sans-serif; 29 font-size: 12px; 30 31 color: #ff0; 32 background-color: #8b4f00; 33 } 34} 35.protoman 36{ 37 width: 100%; 38 margin: auto; 39 .roll-container 40 { 41 width: 100%; 42 max-width: 1200px; 43 margin: auto; 44 padding: 40px 30px 40px; 45 46 .roll 47 { 48 display: -webkit-flex; 49 display: -ms-flex; 50 display: flex; 51 52 width: 100%; 53 54 justify-content: space-between; 55 .rush 56 { 57 position: relative; 58 59 width: 30%; 60 padding: 15px; 61 62 transition: .2s; 63 .rush-imgwrap 64 { 65 // transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); 66 position: relative; 67 68 overflow: hidden; 69 70 width: 100%; 71 padding-top: 65%; 72 73 transition: .2s; 74 .rush-bgi 75 { 76 position: absolute; 77 // top: 50%; 78 // left: 50%; 79 top: 0; 80 left: 0; 81 82 width: 100%; 83 height: 100%; 84 85 background-image: url('../img/bg.svg'); 86 background-position: center center; 87 background-size: cover; 88 transition: .7s cubic-bezier(0, 0.01, 0, 1.02); // -webkit-transform: translate(-50%, -50%); 89 // -ms-transform: translate(-50%, -50%); 90 // transform: translate(-50%, -50%); 91 } 92 } 93 .rush-h3 94 { 95 font-size: 18px; 96 97 color: #666; 98 } 99 .rush-p 100 { 101 font-size: 14px; 102 103 color: #999; 104 } 105 .rush-hover 106 { 107 font-size: 36px; 108 109 position: absolute; 110 top: 50%; 111 left: 50%; 112 113 display: block; 114 115 width: 100%; 116 117 transition: .2s; 118 -webkit-transform: translate(-50%, -50%); 119 -ms-transform: translate(-50%, -50%); 120 transform: translate(-50%, -50%); 121 text-align: center; 122 123 color: transparent; 124 125 will-change: transform; 126 } 127 } 128 129 } 130 } 131} 132

試したこと

autoprefixerのコードの中に、以下の通りに設定を書き込んでみました。

javascript

1 .pipe(postcss([autoprefixer({ 2 "overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"], 3 cascade: false 4 })])) 5// by https://flex-box.net/gulp/ 6

結果は変わらずでした。書き込んでも、元に戻しても同じような挙動をしています。

他にはgoogleでの検索も試してみましたが、初心者向けの解説記事しか見つからず、断念いたしました。
回答者様の手を煩わせることをお許し下さい。

補足情報(FW/ツールのバージョンなど)

ブラウザ:chrome(最新のバージョン)
テキストエディタ:atom(ver:1.32.2)

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

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

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

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

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

guest

回答1

0

ベストアンサー

JS

1.pipe(postcss([autoprefixer({ 2 "overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"], 3 cascade: false 4})]))

推測も交じるので正確な説明でないかもしれませんが、

↓transformは、各ブラウザで2バージョン (last 2 versions) 時点ですでに実装されています。
https://caniuse.com/#search=transform

↓align-itemsはIE11でベンダープレフィックスをつけないと動作しません。
https://caniuse.com/#search=align-items

ベンダープレフィックスが必要な要素は追加する機能だけでなく、
不要なベンダープレフィックスを取り除くという機能を「autoprefixer」が持っているのではないでしょうか?

上記視点で、Google 検索してみるといいかもしれません。
Google 検索「autoprefixer 不要なベンダープレフィックス 取り除く」

投稿2020/03/28 00:10

new1ro

総合スコア4528

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問