1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

const gulp                 = require('gulp');
const sass                 = require('gulp-sass')(require('sass'));
const babel                = require('gulp-babel');
const plumber              = require('gulp-plumber');
const postcss              = require('gulp-postcss');
const autoprefixer         = require('autoprefixer');
const cssnano              = require('cssnano');
const postcssPresetEnv     = require('postcss-preset-env');
const postcssFlexbugsFixes = require('postcss-flexbugs-fixes');
const sourcemaps           = require('gulp-sourcemaps');
const concat               = require('gulp-concat');
const browserSync          = require('browser-sync').create();
const del                  = require('del');
const imagemin             = require('gulp-imagemin');
const newer                = require('gulp-newer');
const nunjucksRender       = require('gulp-nunjucks-render');

function clean(){
    return del(['dist/**/*','!dist/img'],{
        gitignore: true,
        force: true
    })
        .src('src/*.html') 
        .pipe(gulp.dest('dist')) 
}

function layout(){
    return gulp
        .src('src/**/*.html')
        .pipe(nunjucksRender({
            path: ['src/templates']
        })) 
        .pipe(gulp.dest('dist'))
        .pipe(browserSync.stream())
}

function sass(){
    return gulp
        .src('src/scss/*.*')
        .pipe(
            sass(
                outputStyle: 'compressed' //nested | expanded | compact | compressed
            ).on('error',sass.logError)
        )
        .pipe(
            postcss([
                postcssFlexbugsFixes(),
                postcssPresetEnv(),
                autoprefixer(),
                cssnano({
                    preset: "advanced"
                })
            ])
        )
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest(dist/css))
        .pipe(browserSync.stream())
}

function concat(){
    return gulp
        .src([
            'node_modules/jquery/dist/jquery.slim.min.js',
            'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
            'src/js/*.js'
        ])
    .pipe(concat('all.js'))
    .pipe(gulp.dest('dist/css'))
}

function babel(){
    return gulp
        .src('src/js/*.js')
        .pipe(plumber())
        .pipe(
            babel({
                presets: ['@babel/env'],
                minified: true
            })
        )
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.stream())
}

function imagemin(){
    return gulp
        .src('src/img/*')
        .src(newer('dist/img'))
        .pipe(
          imagemin([
            imagemin.mozjpeg({
              quality: 80,
            }),
            imagemin.optipng({
              optimizationLevel: 1
            }),
            imagemin.gifsicle({
              interlaced : true
            }),
            imagemin.gifsicle()
          ])
        )
        .pipe(gulp.dest('dist/img'))
}

function watch(){
    browserSync.init({
        server: { 
          baseDir: 'dist',
        },
        port: 3000,
        reloadDelay: 0,
        browser: 'google chrome',
        open: true
    });
    gulp.watch('src/**/*.html', gulp.series('copyHTML'));
    gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
}


exports.default = series('clean', 'copyHTML', 'sass', 'babel', 'imagemin', 'watch');