gulp - gulpfile - summary.js

gulp - gulpfile - summary.js

// plugins
const gulp = require('gulp');
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const rename = require('gulp-rename');
const del = require('del');
const connect = require('gulp-connect');
const open = require('gulp-open');
const inject = require('gulp-inject');

sass.compiler = require('node-sass');

// compile sass
gulp.task('compile:sass', function() {
    return gulp.src('src/style.scss')
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(gulp.dest('temp'))
});

// autoprefix css
gulp.task('autoprefix:css', function() {
    return gulp.src('temp/style.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('temp')) 
})

// minify & sourcemaps css
gulp.task('minify:css', function() {
    return gulp.src('temp/style.css')
        .pipe(sourcemaps.init())
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(sourcemaps.write('../maps'))
        .pipe(rename('style.min.css'))
        .pipe(gulp.dest('temp'))
});

// transpile to ES5
gulp.task('babel', function() {
    return gulp.src('src/main.js')
        .pipe(sourcemaps.init())
        .pipe(babel())
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('temp'))
});

// minify js
gulp.task('minify:js', function() {
    return gulp.src('temp/main.js')
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('../maps'))
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest('temp'))
});

// minify runner
gulp.task('minify', gulp.parallel('minify:css', 'minify:js'));

// remove temp folder
gulp.task('clean', function() {
    return del(['temp']);
});

// transfer files dev
gulp.task('dev:transfer-css', function() {
    return gulp.src('temp/style.css')
        .pipe(gulp.dest('build/dev/temp'))
});

gulp.task('dev:transfer-js', function() {
    return gulp.src('temp/main.js')
        .pipe(gulp.dest('build/dev/temp'))
});

gulp.task('dev:transfer', gulp.parallel(
    'dev:transfer-css',
    'dev:transfer-js'
));

// transfer files prod
gulp.task('prod:transfer-css', function() {
    return gulp.src('temp/style.min.css')
        .pipe(gulp.dest('build/prod/temp'))
});

gulp.task('prod:transfer-js', function() {
    return gulp.src('temp/main.min.js')
        .pipe(gulp.dest('build/prod/temp'))
});

gulp.task('prod:transfer', gulp.parallel(
    'prod:transfer-css',
    'prod:transfer-js'
));

// development server
gulp.task('connect', async function() {
    connect.server({
        root: 'build/dev',
        port: 3000,
        livereload: true
    });
});

gulp.task('open', async function() {
    return gulp.src('build/dev/*.html')
        .pipe(open({uri: 'http://localhost:3000/'}))
});

gulp.task('watch', async function() {
    gulp.watch(['src/*.scss', 'src/*.html', 'src/*.js'], gulp.series('dev'))
});

// build development
gulp.task('build:dev', function() {
    const target = gulp.src('src/index.html');
    const sources = gulp.src(['temp/main.js', 'temp/style.css'], { read: false });

    return target.pipe(inject(sources))
        .pipe(gulp.dest('build/dev'))
        .pipe(connect.reload())
});

// build development runner
gulp.task('dev', gulp.series(
    'compile:sass',
    'autoprefix:css',
    'babel',
    'dev:transfer',
    'build:dev',
    'clean'
));

gulp.task('serve', gulp.series('dev', 'connect', 'open', 'watch'));

// build production
gulp.task('build:prod', function() {
    const target = gulp.src('src/index.html');
    const sources = gulp.src(['temp/main.min.js', 'temp/style.css'], { read: false });

    return target.pipe(inject(sources))
        .pipe(gulp.dest('build/prod'))
});

// build production runner
gulp.task('prod', gulp.series(
    'compile:sass',
    'autoprefix:css',
    'babel',
    'minify',
    'prod:transfer',
    'build:prod',
    'clean'
));