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

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

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

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

Sass

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

gulp

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

解決済

gulpで画像やソースを圧縮する時の疑問点

cashmoneyap
cashmoneyap

総合スコア12

JavaScript

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

Sass

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

gulp

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

3回答

0グッド

0クリップ

2783閲覧

投稿2017/05/19 16:09

編集2017/06/10 03:17

###質問
gulpで画像やCSS等を圧縮するタイミングは、基本的には配布物を生成する(ビルドタスクを走らせる)際に行うものと解釈しているのですが、
サイトの軽量化を行うのはビルド時のみで開発中は圧縮をしないので、テストサーバーに反映するファイルは圧縮前のソースになってしまいます。

作成したタスクの内容は、下記になります。

【開発時】 defaultタスクでsrcディレクトリを監視し作業を進める。(コンパイル後のCSSもこのディレクトリ) 【納品時】 buildタスクでsrcディレクトリ内の不要ファイルを除外した上でdistディレクトリにコピー。 コピーされた画像、css、jsの圧縮をするというものです。

「開発時にファイルの圧縮はせず、テストアップするファイルは圧縮&ソースマップ出力。配布物を生成するのは納品前のタイミング」

上記の場合、どう記述するのがベストなのかがわかりません。

他にプレビュー用のディレクトリを生成するとしても、中身が最終成果物であるdistディレクトリとあまり変わらないような気もします。
また、バージョン管理の事も考えると、納品までに開発ソース以外の物を含めても問題ないのかという疑問もあります。

どなたかベストな解決策をご教示いただけないでしょうか。
よろしくお願いいたします。

###gulpfile.js

javascript

1var browserSync = require('browser-sync'), 2 del = require('del'), 3 gulp = require('gulp'), 4 autoprefixer = require('gulp-autoprefixer'), 5 cleanCSS = require('gulp-clean-css'), 6 ignore = require('gulp-ignore'), 7 imagemin = require('gulp-imagemin'), 8 notify = require('gulp-notify'), 9 plumber = require('gulp-plumber'), 10 sass = require('gulp-sass'), 11 sourcemaps = require('gulp-sourcemaps'), 12 uglify = require('gulp-uglify'), 13 mozjpeg = require('imagemin-mozjpeg'), 14 pngquant = require('imagemin-pngquant'), 15 runSequence = require('run-sequence'), 16 vinylPaths = require('vinyl-paths'); 17 18var dir = { 19 src: 'src', 20 dist: 'dist' 21}; 22 23var autoprefixerOptions = { 24 browsers: [ 25 'last 2 versions', 26 'ie 11', 27 'iOS >= 8.1', 28 'Android >= 4.4' 29 ], 30 cascade: false 31}; 32 33gulp.task('sass', function() { 34 return gulp.src([dir.src + '/assets/scss/**/*.scss']) 35 .pipe(plumber({errorHandler: notify.onError('<%= error.message %>')})) 36 .pipe(sourcemaps.init()) 37 .pipe(sass({outputStyle: 'expanded'})) 38 .pipe(autoprefixer(autoprefixerOptions)) 39 .pipe(sourcemaps.write('')) 40 .pipe(gulp.dest(dir.src + '/assets/stylesheets')) 41 .pipe(browserSync.reload({stream: true})); 42}); 43 44gulp.task('browser-sync', function() { 45 browserSync({ 46 server: { 47 baseDir: dir.src 48 } 49 }); 50}); 51 52gulp.task('bs-reload', function() { 53 browserSync.reload(); 54}); 55 56gulp.task('clean:dist', function() { 57 return gulp.src([dir.dist]) 58 .pipe(vinylPaths(del)); 59}); 60 61gulp.task('copy', function() { 62 return gulp.src([ 63 dir.src + '/**/*.*', 64 '!src/**/*.scss', 65 '!src/**/*.map' 66 ]) 67 .pipe(ignore.include({isFile: true})) 68 .pipe(gulp.dest(dir.dist)) 69}); 70 71gulp.task('optimize-image', function() { 72 return gulp.src([dir.dist + '/assets/images/**/*']) 73 .pipe(imagemin([ 74 pngquant({ 75 quality: '65-80', 76 speed: 1 77 }), 78 mozjpeg({quality: 80}), 79 imagemin.svgo(), 80 imagemin.gifsicle() 81 ])) 82 .pipe(imagemin()) 83 .pipe(gulp.dest(dir.dist + '/assets/images')) 84}); 85 86gulp.task('minify-css', function() { 87 return gulp.src([dir.dist + '/assets/stylesheets/*.css']) 88 .pipe(cleanCSS()) 89 .pipe(gulp.dest(dir.dist + '/assets/stylesheets')) 90}); 91 92gulp.task('minify-js', function() { 93 return gulp.src([dir.dist + '/assets/javascripts/*.js']) 94 .pipe(uglify()) 95 .pipe(gulp.dest(dir.dist + '/assets/javascripts')) 96}); 97 98gulp.task('watch', function() { 99 gulp.watch([dir.src + '/assets/scss/**/*.scss'], ['sass']); 100 gulp.watch([dir.src + '/assets/javascripts/**/*.js'], ['bs-reload']); 101 gulp.watch([dir.src + '/**/*.html'], ['bs-reload']); 102}); 103 104gulp.task('default', function(callback) { 105 runSequence(['sass', 'browser-sync', 'watch'], callback); 106}); 107 108gulp.task('build', function(callback) { 109 runSequence('clean:dist', 'sass', 'copy', ['optimize-image', 'minify-css', 'minify-js'], callback); 110});

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答3

2

ベストアンサー

gulpで画像やCSS等を圧縮する際、基本的には配布物を生成する(ビルドタスクを走らせる)際に行うものと勝手に解釈しているのですが

少なくとも、画像については基本的にGitに入れる段階で圧縮しておいたほうがいいでしょう。色数を落とすとなれば目視確認はしたいですし、ふつう画像をGitツリー上で何度も編集することはないので、本番ファイルの生成のたびに圧縮するのは無駄だ考えます。

一方、CSSについては、管理の問題かもしれません。

コンパイルされたCSSやソースマップなどは全てsrcディレクトリに吐き出し、テスト環境にはsrcディレクトリをそのままアップする形になります。

SCSSからのCSS生成時にminifyするようにしておけばほぼ手間はかからず、そのまま本番に適用できるのではないか、と思います。

なお、(importをSCSSコンパイル時点で解決している前提なら)minifyはファイルサイズを下げるぐらいなので、しないまま開発サーバに入れても、せいぜい0.1秒/画面程度の遅れにしかなりません(開発サーバは本番より性能が悪いことも多いでしょうし、「少しでも遅いと問題がある」レベルの遅れになるのかは疑問です)。

投稿2017/05/20 02:11

maisumakun

総合スコア141388

kei344, chocodoughnut👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2017/06/11 01:21

こちらの回答が他のユーザーから「過去の低評価」という指摘を受けました。

0

http://blog.rangle.io/angular-gulp-bestpractices/

上記を参考にテスト用一時ディレクトリを出力する方法にし、
圧縮は開発時にも行うものとしました。(参考記事では一時ディレクトリには非圧縮のソースを吐き出していますが。)

これによりテストアップ時にはソースマップやソースマップコメントが付与され、
公開時にはそれらを消すタスクを走らせればOKでした。

投稿2017/06/10 03:23

編集2017/07/01 09:21
cashmoneyap

総合スコア12

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

リリース用のビルドをするときだけじゃなくて、開発中にも圧縮すればいいじゃん。

投稿2017/06/09 10:18

tanataro9999

総合スコア8

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

Sass

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

gulp

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