// gulpプラグインの読み込み

const gulp = require(‘gulp’);

// Sassをコンパイルするプラグインの読み込み

const sass = require(‘gulp-sass’);

const autoprefixer = require( ‘gulp-autoprefixer’ );

const plumber = require( ‘gulp-plumber’ );

const sourcemaps = require( ‘gulp-sourcemaps’ );

const imagemin = require(‘gulp-imagemin’);

const mozjpeg = require(‘imagemin-mozjpeg’);

const pngquant = require(‘imagemin-pngquant’);

const changed = require(‘gulp-changed’);

const browserSync = require( ‘browser-sync’ );

// style.scssをタスクを作成する

gulp.task(‘sass’, function () {

// style.scssファイルを取得

　return gulp.src(‘./assets/css/**/*.scss’)

// Sassのコンパイルを実行

.pipe(plumber() )

.pipe(sourcemaps.init() )

.pipe(sass({

outputStyle: ‘expanded’

})

// Sassのコンパイルエラーを表示

// (これがないと自動的に止まってしまう)

.on(‘error’, sass.logError))

.pipe(autoprefixer( {

browsers: [‘last 2 version’, ‘iOS >= 8.1’, ‘Android >= 4.4’],

cascade: false

}))

// cssフォルダー以下に保存

.pipe(gulp.dest(‘./assets/css’));

});

gulp.task(“imagemin”, function () {

return gulp

.src(‘./assets/images/org/**’)

.pipe(changed(‘./assets/images/dist’))

.pipe(

imagemin([

pngquant({

quality: [.60, .70], // 画質

speed: 1 // スピード

}),

mozjpeg({ quality: 65 }), // 画質

imagemin.svgo(),

imagemin.optipng(),

imagemin.gifsicle({ optimizationLevel: 3 }) // 圧縮率

])

)

.pipe(gulp.dest(‘./assets/images/dist’));

});

// Browser Sync

gulp.task(‘bs’, function() {

browserSync({

server: {

baseDir: “./”,

index: “index.html”

}

});

});

// Reload Browser

gulp.task( ‘bs-reload’, function (done) {

browserSync.reload();

done();

});

// Default task

gulp.task(‘watch’, function(){

gulp.watch(“./assets/css/**/*.scss”, gulp.series(‘sass’));

gulp.watch(‘./assets/images/org/**’, gulp.task(‘imagemin’));

gulp.watch(“./**”, gulp.series(‘bs-reload’));

});

/// Gulpコマンドで動かすもの ////////////////////////////////////////////

gulp.task(‘default’, gulp.parallel(‘bs’,’watch’));