質問編集履歴

3 書式の改善

cashmoneyap

cashmoneyap score 12

2017/06/10 12:17  投稿

gulpで画像やソースを圧縮する時の疑問点
###質問
gulpで画像やCSS等を圧縮するタイミングは、基本的には配布物を生成する(ビルドタスクを走らせる)際に行うものと解釈しているのですが、
サイトの軽量化を行うのはビルド時のみで開発中は圧縮をしないので、テストサーバーに反映するファイルは圧縮前のソースになってしまいます。
これだとクライアント確認の際に、読み込みが少しでも遅いと問題があるように思えます。  
私が書いたタスクの内容は、下記になります。
作成したタスクの内容は、下記になります。
```
【開発時】
defaultタスクでsrcディレクトリを監視し作業を進める。(コンパイル後のCSSもこのディレクトリ)
【納品時】
buildタスクでsrcディレクトリ内の不要ファイルを除外した上でdistディレクトリにコピー。
コピーされた画像、css、jsの圧縮をするというものです。
```
上記の場合、どう記述するのがベストなのかがわかりません。
また、バージョン管理の事も考えると、納品までに開発ソース以外の物を含めても問題ないのかという疑問もあります。
どなたかベストな解決策をご教示いただけないでしょうか。
よろしくお願いいたします。
###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);
});
```
  • JavaScript

    35676 questions

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

  • HTML

    22886 questions

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

  • CSS

    16301 questions

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

  • Sass

    874 questions

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

  • gulp

    496 questions

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

2 書式の改善

cashmoneyap

cashmoneyap score 12

2017/05/26 08:50  投稿

gulpで画像やソースを圧縮する時の疑問点
###質問
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);
});
```
  • JavaScript

    35676 questions

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

  • HTML

    22886 questions

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

  • CSS

    16301 questions

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

  • Sass

    874 questions

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

  • gulp

    496 questions

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

1 修正

cashmoneyap

cashmoneyap score 12

2017/05/26 08:48  投稿

gulpで画像やソースを圧縮する時の疑問点
###質問
gulpで画像やCSS等を圧縮する際、基本的には配布物を生成する(ビルドタスクを走らせる)際に行うものと勝手に解釈しているのですが、
gulpで画像やCSS等を圧縮するタイミングは、基本的には配布物を生成する(ビルドタスクを走らせる)際に行うものと解釈しているのですが、
サイトの軽量化を行うのはビルド時のみで開発中は圧縮をしないので、テストサーバーに反映するファイルは圧縮前のソースになってしまいます。
私が書いたタスクは、開発時にdefaultタスクを走らせてsrcディレクトリを監視し作業を進め、
納品時にはbuildタスクを走らせ、srcディレクトリ内の不要ファイルを除外した上でdistディレクトリにコピーし、コピーされたimages、javascripts、stylesheetsの圧縮をするというものです。
私が書いたタスクは、
【開発時】
defaultタスクでsrcディレクトリを監視し作業を進める。(コンパイル後のCSSもこのディレクトリ)
【納品時】
buildタスクでsrcディレクトリ内の不要ファイルを除外した上でdistディレクトリにコピー。
コピーされた画像、css、jsの圧縮をするというものです。
テンプレートエンジン等は使用しておらず、CSSはSassで記述しております。
コンパイルされたCSSやソースマップなどは全てsrcディレクトリに吐き出し、テスト環境にはsrcディレクトリをそのままアップする形になります。
**「開発時にファイルの圧縮はせず、テストアップするファイルは圧縮&ソースマップ出力もしたい。配布物を生成するのは納品前のタイミングがいい」**
上記の場合、どう記述するのがベストなのかがわかりません。
他にプレビュー用のディレクトリを生成するとしても、中身が最終成果物であるdistディレクトリとあまり変わらないのような気もします。
また、バージョン管理の事も考えると、納品までに開発ソース以外の物を含めても問題ないのかという疑問もあります。
**「開発時はソースや画像の圧縮を避けたいが、テストアップするソースや画像は圧縮したいしソースマップもアップしたい。でも配布物を生成するのは納品前のタイミングがいい」**
このような場合、どう記述するのがベストなのかがわかりません。
他にテストアップ用のディレクトリを生成するとしても、中身が最終成果物であるdistディレクトリとほぼほぼ変わらないので無駄かな?と思ってしまいます。
また、Gitでのバージョン管理の事も考えると、納品までに開発ソース以外の物を含めても問題ないのかという疑問もあります。
実務経験や知識が浅いため、わからないことが多く必死です。そもそもgulpを正しく使えているのかが不安なところですが、、
どなたかベストな解決策をご教示いただけないでしょうか。よろしくお願いいたします。
下記が私のgulpfile.jsです。
どなたかベストな解決策をご教示いただけないでしょうか。
よろしくお願いいたします。
###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 + '/**/*',
   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);
});
```
  • JavaScript

    35676 questions

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

  • HTML

    22886 questions

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

  • CSS

    16301 questions

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

  • Sass

    874 questions

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

  • gulp

    496 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る