Importação dos Módulos

Oi Chung-Oh, pelo que entendi do seu código, ele vai carregar todos os módulos que encontrar, mas você usou a opção rename e informou apenas dois módulos. O rename vai apenas mudar a forma como você vai chamar eles dentro do $.

Então todos os módulos serão carregados, você só mudou o nome de dois deles pra facilitar o uso. Faz sentido? Isso funciona?

Ainda não ficou claro como o resto dos módulos estão sendo carregados.

Entendi que tem haver com o "gulp-load-plugins" devido ao "$", mas nele foi apenas passado "gulp-rev-delete-original" e "gulp-if".

var gulp = require('gulp');
var $ = require('gulp-load-plugins')({rename: {'gulp-rev-delete-original':'revdel', 'gulp-if': 'if'}});

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

gulp.task('clean', function() {
    return gulp.src('dist/', {read: false})
        .pipe($.clean());
});

/* Minificação */
gulp.task('minify-js', function() {
  return gulp.src('site/**/*.js')
    .pipe($.uglify())
    .pipe(gulp.dest('dist/'))
});

gulp.task('minify-css', function() {
  return gulp.src('site/**/*.css')
    .pipe($.cssnano({safe: true}))
    .pipe(gulp.dest('dist/'))
});

gulp.task('minify-html', function() {
  return gulp.src('site/**/*.html')
    .pipe($.htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist/'))
});

/* Concatenação */
gulp.task('useref', function () {
    return gulp.src('site/index.html')
        .pipe($.useref())
        .pipe($.if('*.html', $.inlineSource()))
        .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
        .pipe($.if('*.js', $.uglify()))
        .pipe($.if('*.css', $.cssnano({safe: true})))
        .pipe(gulp.dest('dist'));
});

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

/* Revisão de arquivos */
gulp.task('rev', function(){
  return gulp.src(['dist/**/*.{css,js,jpg,jpeg,png,svg}'])
    .pipe($.rev())
    .pipe($.revdel())
    .pipe(gulp.dest('dist/'))
    .pipe($.rev.manifest())
    .pipe(gulp.dest('dist/'))
})

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

/* Alias */
gulp.task('minify', ['minify-js', 'minify-css', 'minify-html']);
gulp.task('build', $.sequence(['minify-js', 'minify-css', 'imagemin'], 'useref', 'revreplace'));
gulp.task('default', $.sequence('clean', 'copy', 'build'));

Como o módulo "gulp-inline-source" pode ser invocado com "inlineSource", outro "gulp-rev-replace" por "revReplace"?

Onde e como foi definido isso?

Chung-Oh, ele lê seu arquivo package.json que tem o nome de todos os pacotes, e então ele faz o require de todos eles por baixo dos panos e atribui a variável $ que você mesmo definiu. Por isso que ele carrega tudo.

Os outros dois que você disse que passou, na verdade você não passou pra ele carregar, ele já ia carregar de todo jeito, você no caso trocou o nome de como você se referenciar a eles na variável $.

Toda vez que você usa a variável $, você está usando um módulo carregado por ele, quer um exemplo? Aqui: $.rev() e $.revReplace

Obrigado Wanderson, agora entendi.