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

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

新規登録して質問してみよう
ただいま回答率
85.50%
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

解決済

2回答

4191閲覧

gulpでsassコンパイル後にcssを圧縮したい

usagi001

総合スコア208

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クリップ

投稿2019/08/12 04:01

前提・実現したいこと

gulpでsassコンパイル後にcssを圧縮したいです。

該当のソースコード

javascript

1var gulp = require('gulp'); 2var minifycss = require('gulp-minify-css'); 3var sass = require('gulp-sass'); 4 5// sassをコンパイル 6gulp.task('sass', function(done){ 7 gulp.src('src/scss/*.scss') 8 .pipe(sass()) 9 .pipe(gulp.dest('src/css')); 10 done(); 11}); 12 13//CSS圧縮 14gulp.task('minify-css', function(done) { 15 return gulp.src("src/css/*.css") 16 .pipe(minifycss()) 17 .pipe(gulp.dest('dist/css/')); 18 done(); 19}); 20 21gulp.task('default', gulp.series('sass', 'minify-css'), function(done) { 22 done(); 23});

試したこと

gulpfile.jsファイルに上記コードを記述し、ターミナルでgulpコマンドを実行しました。
sassのコンパイルはできたのですが、その後、cssの圧縮時にコンパイル後のcssは圧縮されずcssフォルダの他のcssファイルのみ圧縮されました。

cssの圧縮時にsassのコンパイルが終わっておらず、cssの圧縮の対象に入っていないのかなと思うのですが、sassのコンパイルを待ってcssの圧縮をする方法はあるのでしょうか?

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

gulp: 4.0.2
gulp-minify-css: 1.2.4
gulp-sass: 4.0.2

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

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

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

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

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

guest

回答2

0

ベストアンサー

私はSassコンパイルの時点で圧縮かけてしまっています。

gulp.src('./sass/*.scss') //対象のディレクトリ .pipe(sass({outputStyle: 'compressed'})) //ビルドスタイルの指定 .pipe(concat('common.css')) // ファイル連結 .pipe(gulp.dest('./css')); //ビルド先の指定

投稿2019/08/20 04:45

perpouh

総合スコア299

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

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

usagi001

2019/08/20 10:26 編集

回答ありがとうございます。gulp-sassで圧縮もできたんですね! 参考にしたとこがgulp-minify-cssで圧縮してたので分けないといけないと思ってました。 やりたいのが下記のフォルダ構成でdist/cssに圧縮したstyle.cssとreset.cssを吐き出したかったのですが ``` . ├── dist │   └── css └── src ├── css │   └── reset.css └── scss └── style.scss ``` reset.cssを削除して下記の構成にして ``` . ├── dist │   └── css └── src └── scss ├── reset.scss └── style.scss ``` gulpで下記の処理やったらやりたいことができました!! ```js gulp.task('sass', function(done){ gulp.src('./src/sass/*.scss') .pipe(sass({outputStyle: 'compressed'})) .pipe(gulp.dest('./dist/css')); done(); }); ``` ありがとうございますmm コメントはmarkdownじゃないんですね...
guest

0

直接的なお答えでなく、恐縮なのですがgulpを利用していたときは、下記ソースを利用していました。
書き方のヒントにはなるかと思うので共有いたします。

*設定はいろんなサイトを見ながら作ったので詳細な説明ができるほどではありません。
*現在のバージョンで利用できるかわかりません。

const gulp = require('gulp'); const browserSync = require('browser-sync').create(); const plumber = require('gulp-plumber'); //エラー回避 const watch = require('gulp-watch'); //sass用 const sass = require('gulp-sass'); const autoprefixer = require('gulp-autoprefixer'); const cssmin = require('gulp-cssmin'); //cssファイル圧縮 const cssnano = require('gulp-cssnano'); //cssファイル圧縮 //JS用 const concat = require('gulp-concat'); //ファイル結合 const uglify = require('gulp-uglify'); //jsファイル圧縮 //php用 const connect = require('gulp-connect-php'); //ファイル削除用 const del = require('del'); const vinylpaths = require('vinyl-paths'); //エラー表示用 const notify = require('gulp-notify'); //sassのコンパイル gulp.task('css', done => { gulp.src(["./style/scss/*.scss", "./style/scss/*.css", "./style/*.scss"]) .pipe(plumber({ errorHandler: notify.onError('<%= error.message %>') })) .pipe(concat('style.min.css')) .pipe(sass()) .pipe(autoprefixer(["last 3 versions", "ie 9", "ios 4", "android 2.3"])) .pipe(cssnano()) .pipe(gulp.dest('./')) //.pipe(browserSync.stream()); //ブラウザリロード(barbaの場合はreloadが必須) done() }); //jsのコンパイル gulp.task('js', done => { gulp.src(["./script/lib/*.js", "./script/*.js"]) .pipe(plumber({ errorHandler: notify.onError('<%= error.message %>') })) //.pipe(uglify()) .pipe(concat('script.js')) .pipe(gulp.dest('./')) //.pipe(browserSync.stream()); //ブラウザリロード(barbaの場合はreloadが必須) done() }); //デフォルトタスク gulp.task('default', function () { ////Browserの立ち上げ browserSync.init({ proxy: url }); gulp.watch('style/**/*.scss', gulp.series(['css'])).on('change', browserSync.reload); gulp.watch("style/scss/*.css", gulp.series(['css'])).on('change', browserSync.reload); gulp.watch('script/**/*.js', gulp.series(['js'])).on('change', browserSync.reload); gulp.watch('./**/*.php').on('change', browserSync.reload); });

投稿2019/08/19 14:21

no1knows

総合スコア3365

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

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

usagi001

2019/08/20 10:25 編集

回答ありがとうございます。 あんまわかってないですけど下記のやつでsassのコンパイルとcssの圧縮の処理をpipeでつないでcssとscssのファイルにやる感じですね。参考にしますmm ```js gulp.task('css', done => { gulp.src(["./style/scss/*.scss", "./style/scss/*.css", "./style/*.scss"]) .pipe(plumber({ errorHandler: notify.onError('<%= error.message %>') })) .pipe(concat('style.min.css')) .pipe(sass()) .pipe(autoprefixer(["last 3 versions", "ie 9", "ios 4", "android 2.3"])) .pipe(cssnano()) .pipe(gulp.dest('./')) //.pipe(browserSync.stream()); //ブラウザリロード(barbaの場合はreloadが必須) done() ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問