最近のgulp v3系

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

gulp4 + webpack4はこちら
gulp4はこちら

ディレクトリ構造

/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

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