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

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

2725閲覧

投稿2017/05/19 16:09

編集2017/06/10 03:17

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

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

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

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

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

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

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

###gulpfile.js

javascript

var browserSync = require('browser-sync'), del = require('del'), gulp = require('gulp'), autoprefixer = require('gulp-autoprefixer'), cleanCSS = require('gulp-clean-css'), ignore = require('gulp-ignore'), imagemin = require('gulp-imagemin'), notify = require('gulp-notify'), plumber = require('gulp-plumber'), sass = require('gulp-sass'), sourcemaps = require('gulp-sourcemaps'), uglify = require('gulp-uglify'), mozjpeg = require('imagemin-mozjpeg'), pngquant = require('imagemin-pngquant'), runSequence = require('run-sequence'), vinylPaths = require('vinyl-paths'); var dir = { src: 'src', dist: 'dist' }; var autoprefixerOptions = { browsers: [ 'last 2 versions', 'ie 11', 'iOS >= 8.1', 'Android >= 4.4' ], cascade: false }; gulp.task('sass', function() { return gulp.src([dir.src + '/assets/scss/**/*.scss']) .pipe(plumber({errorHandler: notify.onError('<%= error.message %>')})) .pipe(sourcemaps.init()) .pipe(sass({outputStyle: 'expanded'})) .pipe(autoprefixer(autoprefixerOptions)) .pipe(sourcemaps.write('')) .pipe(gulp.dest(dir.src + '/assets/stylesheets')) .pipe(browserSync.reload({stream: true})); }); gulp.task('browser-sync', function() { browserSync({ server: { baseDir: dir.src } }); }); gulp.task('bs-reload', function() { browserSync.reload(); }); gulp.task('clean:dist', function() { return gulp.src([dir.dist]) .pipe(vinylPaths(del)); }); gulp.task('copy', function() { return gulp.src([ dir.src + '/**/*.*', '!src/**/*.scss', '!src/**/*.map' ]) .pipe(ignore.include({isFile: true})) .pipe(gulp.dest(dir.dist)) }); gulp.task('optimize-image', function() { return gulp.src([dir.dist + '/assets/images/**/*']) .pipe(imagemin([ pngquant({ quality: '65-80', speed: 1 }), mozjpeg({quality: 80}), imagemin.svgo(), imagemin.gifsicle() ])) .pipe(imagemin()) .pipe(gulp.dest(dir.dist + '/assets/images')) }); gulp.task('minify-css', function() { return gulp.src([dir.dist + '/assets/stylesheets/*.css']) .pipe(cleanCSS()) .pipe(gulp.dest(dir.dist + '/assets/stylesheets')) }); gulp.task('minify-js', function() { return gulp.src([dir.dist + '/assets/javascripts/*.js']) .pipe(uglify()) .pipe(gulp.dest(dir.dist + '/assets/javascripts')) }); gulp.task('watch', function() { gulp.watch([dir.src + '/assets/scss/**/*.scss'], ['sass']); gulp.watch([dir.src + '/assets/javascripts/**/*.js'], ['bs-reload']); gulp.watch([dir.src + '/**/*.html'], ['bs-reload']); }); gulp.task('default', function(callback) { runSequence(['sass', 'browser-sync', 'watch'], callback); }); gulp.task('build', function(callback) { runSequence('clean:dist', 'sass', 'copy', ['optimize-image', 'minify-css', 'minify-js'], callback); });

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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ファイルの圧縮・結合などを自動的に行うことができます。