最近のgulp v3系


私が最近使っているgulpの設定を公開します。
随時更新予定です。

gulp4 + webpack4は[こちら](https://qiita.com/koba08/items/3bee39cc07864f89f1c4)
gulp4は[こちら](https://qiita.com/koba08/items/6484504bd90ca6fd5b91)


## ディレクトリ構造

`/source/`内のファイルが`/dist/assets/`に出力されます。

```
.
├── dist
│   └── assets
│       ├── css
│       ├── img
│       ├── js
│       ├── sourcemaps
│       └── ssi
├── gulpfile.js
├── node_modules
├── package-lock.json
├── package.json
└── source
    ├── img
    ├── js
    └── scss
```

## gulpfile.js

```js:gulpfile.js

const gulp = require('gulp');
const browserSync = require("browser-sync");
const ssi = require("connect-ssi");
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const glob = require('gulp-sass-glob');
const plumber = require('gulp-plumber');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify-es').default;
const imagemin = require('gulp-imagemin');
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const changed = require('gulp-changed');

const paths = {
'rootDir': 'dist/',
'scssSrc': 'source/scss/**/*.scss',
'cssSrc': 'dist/assets/css',
'jsSrc': 'source/js/**/*.js',
'outJsSrc': 'dist/assets/js',
'imgSrc': 'source/img/**/*',
'outImgSrc': 'dist/assets/'
}

gulp.task('browserSync', function () {
browserSync({
server: {
baseDir: paths.rootDir,
middleware: [
ssi({
baseDir: paths.rootDir,
notify: true, //通知
ext: '.html'
})
]
}
});
});

// sass
gulp.task('sass', function () {
gulp.src(paths.scssSrc)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(glob())
.pipe(sass({
outputStyle: 'compressed' //圧縮しない場合はexpanded
}))
.pipe(autoprefixer({ browsers: ['last 2 versions'] }))
.pipe(sourcemaps.write('../sourcemaps'))
.pipe(gulp.dest(paths.cssSrc));
});

// js
gulp.task('js', function () {
gulp.src(paths.jsSrc)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(uglify({}))
.on('error', function (e) {
console.log(e);
})
.pipe(gulp.dest(paths.outJsSrc));
});

// img
gulp.task('imagemin', function () {
return gulp.src(paths.imgSrc)
.pipe(changed(paths.outImgSrc))
.pipe(imagemin([
mozjpeg({
quality: 80, //画像圧縮率
}),
pngquant(),
], {
verbose: true
}))
.pipe(gulp.dest(paths.outImgSrc));
});

gulp.task('watch', function () {
gulp.watch(paths.scssSrc, ['sass']);
gulp.watch(paths.jsSrc, ['js']);
gulp.watch(paths.imgSrc, ['imagemin']);
})

gulp.task('default', ['browserSync', 'sass', 'js', 'imagemin', 'watch']);

```

## .babelrc

``` :.babelrc
{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": ">0.25% in JP, not ie <= 10, not op_mini all"
            }
        ]
    ]
}
```
・その他設定方法
　https://babeljs.io/docs/en/next/babel-preset-env

・targetsの対象ブラウザは下記のサイトで確認できます。
　https://browserl.ist/

## プラグインの説明

- [browser-sync](https://www.npmjs.com/package/browser-sync) ブラウザ確認環境
- [connect-ssi](https://www.npmjs.com/package/connect-ssi) SSIを使用可能にする
- [gulp-sass](https://www.npmjs.com/package/gulp-sass) SASSを使用可能にする
- [gulp-autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) ベンダープレフィックス付与
- [gulp-sass-glob](https://www.npmjs.com/package/gulp-sass-glob) import文でワイルドカードが使用可能になる
- [gulp-plumber](https://www.npmjs.com/package/gulp-plumber) エラー時の強制停止を防止
- [gulp-babel](https://www.npmjs.com/package/gulp-babel) JavaScriptのコード変換
- [gulp-uglify-es](https://www.npmjs.com/package/gulp-uglify-es) JavaScriptのminify化
 `gulp-uglify`だとES6に対応していないため、`gulp-uglify-es`を使用する必要があります。
- [gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin) 画像圧縮
- [imagemin-mozjpeg](https://www.npmjs.com/package/imagemin-mozjpeg) Mozilla製のjpegエンコーダ　画像圧縮時の品質は80%に設定しています。
- [imagemin-pngquant](https://www.npmjs.com/package/imagemin-pngquant) pngエンコーダ
- [gulp-changed](https://www.npmjs.com/package/gulp-changed) 更新されたファイルのみ処理させるプラグイン