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を変更したらセットで実行となる。 }); });
ご教示をいただけますと幸いです。
宜しくお願い致します。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。