3
respostas

Problema com plugin gh-pages gulp

Pessoal, estou tentando usar o plugin pra fazer deploy no github pages e não consigo e o pior é que quando rodo a tarefa não há retorno de erro, aqui está o gulpfile.js

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const usemin = require('gulp-usemin');
const pug = require('gulp-pug');
const uglify = require('gulp-uglify');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const jshint = require('gulp-jshint');
const jshintStylish = require('jshint-stylish');
const csslint = require('gulp-csslint');
const babel = require('gulp-babel');
const sass = require('gulp-sass');
const deploy = require('gulp-gh-pages');

gulp.task('default', ['pug'], () => {
    gulp.start('build-img', 'usemin', 'babel');
});

gulp.task('pug', () => {
    gulp.src('src/pug/*.pug')
        .pipe(pug({
            pretty: true
        }))
        .pipe(gulp.dest('min-version/'));
});

gulp.task('build-img', () => {
    gulp.src('min-version/img/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('min-version/img'));
});

gulp.task('usemin', () => {
    return gulp.src('min-version/**/*.html')
        .pipe(usemin({
            js: [uglify],
            css: [autoprefixer]
        }))
        .pipe(gulp.dest('min-version'));
});

gulp.task('babel', () => {
    gulp.src('src/js/**/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('min-version/js'))
});

gulp.task('sass', () => {
   return gulp.src('src/css/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('min-version/css'))
})

gulp.task('server', () => {
    browserSync.init({
        server: {
            baseDir: 'min-version'
        }
    });

    gulp.watch('min-version/**/*').on('change', browserSync.reload);

    gulp.watch('src/js/**/*.js').on('change', (event) => {
        console.log(`Linting ${event.path}`);
        gulp.src(event.path)
            .pipe(jshint())
            .pipe(jshint.reporter(jshintStylish));
    });

    gulp.watch('src/css/**/*.css').on('change', (event) => {
        console.log(`Linting ${event.path}`)
        gulp.src(event.path)
            .pipe(csslint())
            .pipe(csslint.reporter());
    });

    gulp.watch('src/css/**/*.scss').on('change', (event) => {
        gulp.src(event.path)
            .pipe(sass().on('error', () => {
                console.log(`SASS, erro de compilação ${error.filename}`);
                console.log(error.message);
            }))
            .pipe(gulp.dest('src/css'))
    });
});

gulp.task('deploy', () => {
    gulp.src('./min-version/**/*')
        .pipe(deploy({
            branch: 'master'
        }));
});

Os arquivos já estão em uma outra branch quem quiser olhar segue o link https://github.com/SEdilson/SEdilson.github.io/tree/development

3 respostas

Fala aí Edilson, beleza? Porque se preocupar com deploy?

Para disponibilizar seu site dentro do GH Pages é muito simples, aconselharia preocupar-se em gerar apenas o build final, com seu HTML, CSS e JS minificados e concatenados.

Com essa pasta em mãos, você simplesmente faz o deploy commit/push dela para a branch gh-pages, o GH irá cuidar do resto, algo interessante também seria utilizar o git tree, onde seu projeto estará apontando para um branch e apenas a pasta build estará apontando para a gh-pages.

Além do GH Pages, também existe outras soluções mais simples ainda, por exemplo o netlify.

Espero ter ajudado

Então Matheus, o que eu queria era poder utilizar a branch master para colocar a pasta build e em outra branch colocar os arquivos de configuração do site, por isso utilizei o deploy.

Entendi, nunca usei esse plugin gh-pages, eu recomendario realizar essa maneira.

Um outro jeito legal poderia ser através dos hooks do git, quando um commit for feito para a master, ele já builda e gera atualiza a gh-pages.

Dá uma olhada em git hooks.

Abraços