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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

gulp

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

Q&A

1回答

1930閲覧

gulpで画像を圧縮したい

退会済みユーザー

退会済みユーザー

総合スコア0

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

gulp

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

0グッド

0クリップ

投稿2019/05/30 07:24

編集2019/05/31 07:49

gulpで画像を圧縮するために、gulpfile.jsに画像圧縮のtaskを追加したいのですが、追加すべき記述が分かりません。

試したこと:
gulpfile.jsに以下の記述を追加しました。

gulpfile.jsの以下の箇所も書き換える必要があるかと思うのですが、その書き換えする記述が分からず、
質問させていただきます。

書き換える必要があると思われる箇所

gulp.task('default',['browser-sync','copysrc','sass','jsmin'],function(){ ~ });

追加した記述

var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant'); var mozjpeg = require('imagemin-mozjpeg');

追加した記述

gulp.task('imagemin', function () { gulp.src('src/**/*.{jpg,jpeg,png,gif,svg}') .pipe(imagemin( [ pngquant({ quality: '65-80', speed: 1 }), mozjpeg({ quality: 80 }), imagemin.svgo(), imagemin.gifsicle() ] )) .pipe(gulp.dest('src/'+assetsDir+'img/')); });

元のgulpfile.js

// nodeのversion 7.2.1 var gulp = require('gulp'); var browserSync = require('browser-sync'); var sass = require('gulp-sass'); var plumber = require('gulp-plumber'); var csscomb = require('gulp-csscomb'); var notify = require('gulp-notify'); var autoprefixer = require('gulp-autoprefixer'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var watch = require('gulp-watch'); var changed = require('gulp-changed'); var cache = require('gulp-cached'); var connectSSI = require('connect-ssi'); var wait = require('gulp-wait'); var destDir = 'build/'; // 出力用ディレクトリ var assetsDir = 'resources/'; // 案件によってresourcesとかcommonとかassetsとかあるんでとりあえず変数にした gulp.task('browser-sync', function() { browserSync({ server: { baseDir: destDir, middleware: [ connectSSI({ baseDir: __dirname + '/build', ext: '.html' }) ] } }); }); gulp.task('sass', function () { return gulp.src(['src/'+assetsDir+'sass/**/*.scss']) .pipe(plumber({ // gulp-plumberを咬ますとエラー時にgulpが止まらない。 errorHandler: notify.onError('Error: <%= error.message %>') // gulp-notifyでエラー通知を表示 })) .pipe(wait(500)) .pipe(sass()) // gulp-sassでコンパイルし、 .pipe(autoprefixer({ browsers: ['last 2 versions', 'Android 3', 'ie 9'] })) // autoprefixerかけて、(対応ブラウザ。案件によって変更する) .pipe(csscomb()) // gulp-csscombで整形してあげて、 .pipe(gulp.dest('src/'+assetsDir+'css/')) // とりあえずsrc側cssフォルダに吐き出す。 }); gulp.task( 'css',function() { return gulp.src('src/**/*.css') .pipe( cache('css-cache')) // cssをキャッシュさせつつ、 .pipe( gulp.dest( destDir )) // destDirに出力して、 .pipe( browserSync.stream()) // browser-syncで反映させる。 }); // jsの圧縮リネーム gulp.task('jsmin', function () { gulp.src(['src/'+assetsDir+'js/**/*.js', '!src/'+assetsDir+'js/**/*.min.js']) // jQueryなどの、すでに.minなjsは除外する。 .pipe(plumber()) // gulp-plumberを咬ますとエラー時にgulpが止まらない(cssみたいにgulp-notify書いてもエラー通知が何故か出ないのでそのまま)。 .pipe(changed(destDir+assetsDir+'js/')) // 変更されたjsのみをgulp.dest対象にする。 .pipe(uglify({preserveComments: 'some'})) // uglifyでjsを圧縮するがライセンス表記を残す。 .pipe(rename({ suffix: '.min' })) // .min付与 .pipe(gulp.dest('src/'+assetsDir+'js/')) // jsもとりあえずsrc側jsフォルダに吐き出す。 }); gulp.task( 'js',function() { return gulp.src('src/**/*.js') .pipe( cache('js-cache')) // jsをキャッシュさせつつ、 .pipe( gulp.dest( destDir )) // destDirに出力して、 .pipe( browserSync.stream()) // browser-syncで反映させる。 }); gulp.task( 'copysrc',function() { return gulp.src(['src/**/*','!src/'+assetsDir+'sass/','!src/'+assetsDir+'sass/*.scss']) // sassディレクトリ以外の全ファイルを対象にし、 .pipe( cache('src-cache')) // キャッシュさせて、 .pipe( gulp.dest( destDir )) // destDirに出力して、 .pipe( browserSync.stream()) // browser-syncで反映させる。 }); // gulp-watchで監視 // ['browser-sync','copysrc','sass','jsmin']を実行してからdefaultとして内容を実行。 // gulp-watchを使うとフォルダに追加したファイルも対象に監視してくれるのでgulp再実行の必要がない。 gulp.task('default',['browser-sync','copysrc','sass','jsmin'],function(){ watch(['src/**/*.+(jpg|jpeg|gif|png|html|php)'], function(event){ gulp.start(['copysrc']); // css,sass,js以外に変更があったら実行。 }); watch(['src/**/*.scss'], function(event){ gulp.start(['sass']); // sassに変更があったら実行。cssを吐き出すので下のwatchが動く。 }); watch(['src/**/*.css'], function(event){ gulp.start(['css']); // cssに変更があったら実行。つまりsassを変更したらセットで実行となる。 }); watch(['src/**/*.js'], function(event){ gulp.start(['jsmin']); // jsに変更があったら実行。.minしたjsを吐き出すので下のwatchが動く。 }); watch(['src/**/*.min.js'], function(event){ gulp.start(['js']); // .min.jsに変更があったら実行。つまりjsを変更したらセットで実行となる。 }); });

ご教示をいただけますと幸いです。
宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

gulpのバージョンが分からないことと自分も画像圧縮したことがないので
参考URLを記載させていただきます。
助けになると良いのですけど。

バージョン4の場合
gulpで画像の圧縮したら面倒な手間が減った

バージョン3の場合
Gulpで画像圧縮を簡単に自動化するタスクの2018年版 – 『Gulp』

投稿2019/07/03 01:35

wa_

総合スコア55

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問