<file_sep>'use strict';

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const jpegtran = require('imagemin-jpegtran');
const notify = require('gulp-notify');
const plumber = require('gulp-plumber');

gulp.task('imagemin', function(){
  // pngファイル
  gulp.src('image/src/**/*.png')
    .pipe(plumber({
      errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(imagemin({
      use: [pngquant([
        {quality: '80'},
        {speed: 1}
      ])]
    }))
    .pipe(gulp.dest('image/dest')
  );

  // jpg
  gulp.src(['image/src/**/*.jpg', 'iamge/src/**/*.jpeg'])
    .pipe(imagemin({
      use: [jpegtran([{
        progressive: true
      }])]
    }))
    .pipe(gulp.dest('image/dest')
  );
});
<file_sep>'use strict';

const gulp = require('gulp');
const notify = require('gulp-notify');
const plumber = require('gulp-plumber');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

// minify
gulp.task('jsmin', function(){
  gulp.src('js/src/**/*.js')
    .pipe(plumber({
      errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(uglify())
    .pipe(gulp.dest('js/dest'))
    .pipe(notify({
      title: 'jsをminifyしました',
      message: new Date(),
      sound: 'Glass'
    })
  );
});
<file_sep>'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass');
const notify = require('gulp-notify');
const plumber = require('gulp-plumber');
const autoprefixer = require('gulp-autoprefixer');

let autoprefixerOptions = ['last 3 version', 'ie >= 9', 'Android 4.0'];

gulp.task('style', function(){
  gulp.src('scss/src/**/*.scss')
    .pipe(plumber({
      errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(sass({
      outputStyle: 'nested',
      sourceMap: true,
      sourceComment: false
    }))
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest('scss/dest'))
    .pipe(notify({
      title: 'scssをコンパイルしました！',
      message: new Date(),
      sound: 'Glass'
    })
  );
});
<file_sep># frontools
フロントエンドでよく使うツールたち

 * 画像（jpg、png）の圧縮 → `gulp imagemin`
 * scss変換 → `gulp style`
 * jsのminify → `gulp jsmin`
 * css sprite作成 → `gulp sprite`
