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

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

新規登録して質問してみよう
ただいま回答率
85.35%
コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

Sass

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

CSS

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

gulp

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

Q&A

解決済

1回答

1735閲覧

gulpでSassをコンパイル時にCSSが一行になってしまう。

AyaWeb4

総合スコア4

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

Sass

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

CSS

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

gulp

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

0グッド

0クリップ

投稿2020/11/09 23:52

前提・実現したいこと

転職活動のため、ポートフォリオとして簡単な画像投稿サイトを作ろうとしています。
Sassで記述して、gulpでコンパイルを自動化させるところまではできたのですが、
試しに_base.scssを書いてstyle.scssにインポートしてコンパイルしてみたところ出力されたcssが一行になってしまいます。
gulpfile.jsでoutputStyleをexpandedに設定しているのですが、
なぜこうなるのか原因がわかりません。

発生している問題・エラーメッセージ

css

1//コンパイルされたstyle.css 2@charset "UTF-8";html{font-size:100%}html body{font-family:"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;line-height:1.5;color:#222}html body a{text-decoration:none}html body img{max-width:100%}

該当のソースコード

scss

1//style.scss 2@import "foundation/base";

scss

1//foundation/_base.scss 2html { 3 font-size: 100%; 4  body { 5 font-family: "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; 6 line-height: 1.5; 7 color: #222; 8  a { 9 text-decoration: none; 10  } 11  img { 12 max-width: 100%; 13  } 14  } 15} 16

js

1//gulpfile.js 2const gulp = require("gulp"); 3const sass = require("gulp-sass"); 4const plumber = require('gulp-plumber'); 5const pug = require("gulp-pug"); 6const autoprefixer =require('gulp-autoprefixer'); 7const cssmin = require('gulp-cssmin'); 8const uglify = require('gulp-uglify'); 9const browserSync = require('browser-sync'); 10const notify = require('gulp-notify'); 11 12 13const paths = { 14 src: 'src', 15 dest: 'dest' 16}; 17 18//Sass 19gulp.task('sass', function () { 20 return gulp.src([ 21 paths.src + '/scss/**/*.scss', 22 '!' + 'paths.src' +'/scss/**/_*.scss' 23 ]) 24 .pipe(sass({ 25 outputStyle: 'expanded' 26 })) 27 .pipe(plumber({ 28 errorHandler: notify.onError("Error: <%= error.message %>") 29 })) 30 .pipe(autoprefixer({ 31 overrideBrowserslist: 'last 2 versions' 32 })) 33 .pipe(cssmin()) 34 .pipe(gulp.dest(paths.dest + '/css')) 35 }); 36 37//Pug 38gulp.task('pug', function () { 39 return gulp.src([ 40 paths.src + '/pug/**/*.pug', 41 '!' + 'paths.src' + '/pug/**/_*.pug' 42 ]) 43 .pipe(plumber({ 44 errorHandler: notify.onError("Error: <%= error.message %>") 45 })) 46 .pipe(pug({pretty: true})) 47 .pipe(gulp.dest(paths.dest)) 48 }); 49 50//JS Compress 51gulp.task('js', function () { 52 return gulp.src( 53 paths.src + '/js/**/*' 54 ) 55 .pipe(plumber()) 56 .pipe(uglify()) 57 .pipe(gulp.dest(paths.dest + '/js')) 58 }); 59 60//Image File 61gulp.task('image', () => { 62 return gulp.src( 63 paths.src + '/img/**/*' 64 ) 65 .pipe(gulp.dest(paths.dest + '/img')) 66}); 67 68// browser-sync 69gulp.task('browser-sync', function(done) { 70 browserSync({ 71 server: { 72 baseDir: paths.dest 73 }}); 74 done(); 75}); 76 77//watch 78gulp.task('watch', function() { 79 const reload = () => { 80 browserSync.reload(); 81 }; 82 gulp.watch([paths.src + '/scss/**/*']).on('change', gulp.series('sass', reload)); 83 gulp.watch([paths.src + '/js/**/*']).on('change', gulp.series('js', reload)); 84 gulp.watch([paths.src + '/pug/**/*']).on('change', gulp.series('pug', reload)); 85 gulp.watch([paths.src + '/img/**/*']).on('change', gulp.series('image', reload)); 86}); 87 88gulp.task('default', gulp.series(gulp.parallel('sass','pug','js','image','watch','browser-sync'))); 89

ディレクトリ構成

イメージ説明

試したこと

同じようなエラー情報や対策法がないか日本語と英語とで検索していますが、見つかりません。
コンパイルはできているようなので、何度かCSSを削除して、コンパイルしなおしてみましたが
改善されませんでした。

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

テキストエディタ: Atom
Gulp Version: Local version: 4.0.2

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

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

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

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

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

maisumakun

2020/11/10 00:29

1行になって、何が問題なのでしょうか?
AyaWeb4

2020/11/10 00:45

ご返信ありがとうございます。 問題点としては 1. 一行で出力されるということはgulpfile.jsのoutputStyleの設定が効いていないように思うので何が問題なのか解決したい 2. ポートフォリオ作品のためコードを企業に見せる可能性があるため、可読性を担保しておきたい の2点が挙げられます。出来るだけファイル容量を軽くしたい場合なら今のように圧縮された状態でもいいのかもしれませんが、今はそれを意図していないため改善したいです。
miyabi_takatsuk

2020/11/10 02:13

ポートフォリオだからこそ、 一行の方がポイント高いように思いますが。 ブラウザのデベロッパーツールでコード変換で、改行を入れたものも見れますし、 当たっているスタイル自体を改行入った状態で参照できるので。 逆に、そこを知らないエンジニアしかいない企業なのであれば、微妙な気もします。 (最後の一文は個人的な感想なのであしからず)
guest

回答1

0

ベストアンサー

const cssmin = require('gulp-cssmin');
これが原因かと思います。cssを短く、つまり余計な改行などは取っ払って1行にするプラグインではないかと

投稿2020/11/10 00:48

Jon_do

総合スコア1373

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

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

AyaWeb4

2020/11/10 01:10

ご回答ありがとうございます。 私もcssminのプラグインを疑って一度消してから コンパイルを試したのですが、 現状から変わりませんでした。
miyabi_takatsuk

2020/11/10 02:07

監視の再起動はしましたか? gulp.jsは、監視の開始時の初動でしか参照されませんので、 gulp.jsを変えた場合は、 監視の再起動が必要です。
AyaWeb4

2020/11/10 02:18

miyabi_takatsuk様 ご回答ありがとうございます!監視の再起動が盲点でした!! cssminをjsから削除して監視の方を再起動したらexpandedのスタイルで cssが出力されました。 今後はコマンドの扱いにも注意を払っていくようにします。 本当に助かりました。 Jon_do様、miyabi_takatsuk様 アドバイスありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問