見出し画像

PCファーストで組んでるページ(めっちゃ多い)から最終的にメディアクエリ切ったSP用記述だけのファイルを書き出してって言われたよどら〇もーん!!!!

ぐぬぬ、転んでも…転んでもただでは起きんぞ!!!
目視なんて地獄はいやじゃ!!!ゆえに!文明の利器に頼る!!!

gulp先生お願いします

ってことでさっくりgulp先生に頼る。
一応scssで複数人でコーディングしてるんだけども、用件はこちら
・PCファーストになっている
・ブレークポイントは一つ(結果的にそうなった)
・制作はほぼ終盤…のはずなんだけど
・sp用クラスというかそういうのの処理については今は置いとく!(htmlの編集にもかかわってくるから)
・ie用のcssハックも入ってる(SP用はもちろんこの記述を切る)

処理の基本方針

処理の順番としてはscss編集→css書き出し→sp用css加工別ディレクトリへ保存
加工の方針としては
1.cssへの書き出しの段階でメディアクエリをまとめるpostcssのmqpacker突っ込んでメディアクエリをそれぞれひとまとめにする
2.まとまったcssを元に文字列置換を行い(正規表現も使う)不要なメディアクエリは中身もろとも削除(例えばPC幅でしか効かせない部分とかcssハックの部分とか)
3.sp用のメディアクエリはメディアクエリの殻だけ削除(殻て)
4.メディアクエリのなくなったcssを重複分をまとめたりして
5.整形して吐き出し
とまあこんな感じ。

gulp先生と7人の用心棒の先生方(つまり追加パッケージ)

gulp先生は当然として頼れる用心棒の先生たちがこちら

scssのコンパイルの時にお世話になります(ところどころいつメンが)

gulp-sass(scssをコンパイルしたきゃこいつを持ってきな!(ほかにもあるけど))
gulp-postcss(mqpackerを使いたかったらインスコ必要)
css-mqpacker(メディアクエリをまとめてくれる)
gulp-autoprefixer(ベンダープレフィックスを自動で入れてくれる)

今回の肝といってもいいcssを加工するのはお願いしました!

gulp-cssbeautify(文字列置換の下準備として記述をキレイキレイします)
gulp-replace(いらんメディアクエリを中身ごとバッサアしたり殻だけ割ったり)
gulp-csso(最終的に重複分はこの人がまとめてくれます)

こんな感じの頼れる先生方の力をお借りします。

実際の処理

//全体
const gulp = require('gulp'),
			plumber = require('gulp-plumber'),
			notify = require('gulp-notify');

//scssコンパイル関連
const sass = require('gulp-sass'),
			autoprefixer = require('gulp-autoprefixer'),
			postcss = require('gulp-postcss'),
			mqpacker = require('css-mqpacker');

//sp用style加工
const replace = require('gulp-replace'),
			cssbeautify = require('gulp-cssbeautify'),
			csso = require('gulp-csso');

//パス
const paths = {
	'scss':'src/scss/**/*.scss',
	'css':'src/css',
	'app':'./app'
}

//scssのコンパイル(メディアクエリ整列とベンダープレフィックス追加とソースマップ出力)
function style() {
	return gulp
		.src(paths.scss,{ sourcemaps: true })
		.pipe(plumber({
       errorHandler: notify.onError('<%= error.message %>'),
     }),
   )
		.pipe(sass({outputStyle: 'expanded'}))
		.pipe(postcss([mqpacker()]))
		.pipe(autoprefixer({
			cascade: false,
			grid: "autoplace" // gridの値に"autoplace"を指定する
		}))
		.pipe(gulp.dest(paths.css,{ sourcemaps: './maps' }))
}

function replacecss(){
	return gulp
		.src(paths.css+'/style.css')
		.pipe(cssbeautify({
				indent: '  '
		}))
		.pipe(replace(/^@media screen and *\(min-width: *641px\)(\s|\S)*?^\}/m, ''))//641px以上のメディアクエリ削除
		.pipe(replace(/^@media all and *\(-ms-high-contrast: *none\)(\s|\S)*?^\}/m, ''))//ie用ハック部分削除
		.pipe(replace(/^@media screen and *\(max-width: *640px\) *\{((\s|\S)*)?^\}/m, '$1'))//spメディアクエリの囲い削除
		.pipe(csso())
		.pipe(cssbeautify({
				indent: '  '
		}))
		.pipe(gulp.dest(paths.app));
}

exports.style = style;
exports.replacecss = replacecss;

exports.default = gulp.series(
	gulp.series(style, replacecss)
);

とまあこんな感じでタスクを組み立てます。
replace3行のうち頭2行は完全削除、最後1行は殻だけ削除。
正規表現まったく得意ではないのでめっちゃ調べた。
正規表現のフラグとかその辺については各自調べて
タスク名関数名(function名って言ったほうがいいのかな?)についてはてっきとーにつけておりますのでまあ御察しで。
ちなみにbrowserslistはふっつーにこんな感じ

 "browserslist": [
   "last 2 versions",
   "ie >= 11",
   "Android >= 4",
   "ios_saf >= 8"
 ]

最後に

と、とりあえずは何とかなりそうな目途がたったぜふーい。
…え、なに?htmlについても同じようなオーダー来るんじゃないかって?
うっふふふよくお分かりですねその通りです(吐血)
そっちも一応何とかなりそうなタスクを組めたのでまた別個記事にしようかしらんと。


もしも、「サポートしたい」と、思ってくださったのなら、本当にありがたいことでございますが、どうかご無理はなさらぬよう…