[email protected] (16/06/2020)

O gulp mudou desde a data da gravação do vídeo. Estou compartilhando minhas alterações se alguém tiver interesse. npm i -g gulp-cli@2.3.0 alterar o package.json e o gulpfile.js npm install

Pronto! Os seguintes comandos são válidos: gulp, gulp minify e gulp build Se quiser adicionar outros, só criar novos exports.

package.json

{
  "name": "curso-alura-site",
  "version": "0.0.1",
  "author": "Sérgio Lopes",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-clean": "^0.4.0",
    "gulp-cssnano": "^2.1.3",
    "gulp-htmlmin": "^5.0.1",
    "gulp-if": "^3.0.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-inline-source": "^4.0.0",
    "gulp-load-plugins": "^2.0.3",
    "gulp-rev": "^9.0.0",
    "gulp-rev-delete-original": "^0.2.3",
    "gulp-rev-replace": "^0.4.4",
    "gulp-sequence": "^1.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-useref": "^4.0.1"
  }
}

gulpfile.js

/*
    Gulpfile de exemplo para algumas ações clássicas de otimização.
    Para aprender mais sobre Gulp, veja o Curso Online de Gulp do Alura:
    https://www.alura.com.br/curso-online-gulp
 */

const { src, dest, series, parallel } = require('gulp');
const gulpClean = require('gulp-clean');
const uglify = require('gulp-uglify');
const cssNano = require('gulp-cssnano');
const htmlMin = require('gulp-htmlmin');
const useRef = require('gulp-useref');
const inlineSource = require('gulp-inline-source');
const iIf = require('gulp-if');
const imageMin = require('gulp-imagemin');
const rev = require('gulp-rev');
const revDel = require('gulp-rev-delete-original');
const revReplace = require('gulp-rev-replace');

function clean() {
    return src('dist/', { read: false, allowEmpty: true })
        .pipe(gulpClean());
}

function copy() {
    return src(['site/assets/{img,font}/**/*', 'site/app.yaml'], { base: 'site' })
        .pipe(dest('dist/'));
}

function minifyJS() {
    return src('site/**/*.js')
        .pipe(uglify())
        .pipe(dest('dist/'))
}

function minifyCSS() {
    return src('site/**/*.css')
        .pipe(cssNano({ safe: true }))
        .pipe(dest('dist/'))
}

function minifyHTML() {
    return src('site/**/*.html')
        .pipe(htmlMin({ collapseWhitespace: true }))
        .pipe(dest('dist/'))
}

function minifyImage() {
    return src('site/assets/img/*')
        .pipe(imageMin({
            progressive: true,
            svgoPlugins: [
                { removeViewBox: false },
                { cleanupIDs: false }
            ]
        }))
        .pipe(dest('dist/assets/img'));
}

function concat() {
    return src('site/index.html')
        .pipe(useRef())
        .pipe(iIf('*.html', inlineSource()))
        .pipe(iIf('*.html', htmlMin({ collapseWhitespace: true })))
        .pipe(iIf('*.js', uglify()))
        .pipe(iIf('*.css', cssNano({ safe: true })))
        .pipe(dest('dist'));
}

function revision() {
    return src(['dist/**/*.{css,js,jpg,jpeg,png,svg}'])
        .pipe(rev())
        .pipe(revDel())
        .pipe(dest('dist/'))
        .pipe(rev.manifest())
        .pipe(dest('dist/'))
}

function revisionReplace() {
    return src(['dist/index.html', 'dist/app.yaml', 'dist/**/*.css'])
        .pipe(revReplace({
            manifest: src('dist/rev-manifest.json'),
            replaceInExtensions: ['.html', '.yaml', '.js', '.css']
        }))
        .pipe(dest('dist/'));
}

const min = parallel(minifyJS, minifyCSS, minifyHTML, minifyImage);
const build = series(copy, min, concat, revision, revisionReplace);
const defaultTask = series(clean, build);

exports.minify = min;
exports.build = build;
exports.default = defaultTask;