Gulp com Wordpress

Oi Gustavo, eu não tenho nenhum experiência do Gulp com o Wordpress, contudo, para que alguém consiga compartilhar conhecimento aqui, você poderia deixar pouquinho só mais claro o que você gostaria de fazer como Gulp usando o wordpress?

Vou deixar sua dúvida aberta aqui para ver se mais alguém pode contribuir com algo.

Oi Flávio, eu gostaria basicamente de minificar JS e CSS agregando-os num único arquivo, e comprimir imagens.

Pois é Gustavo, já vi alguns alunos aqui com a mesma dificuldade. Contudo, no Wordpress parece suportar isso mais facilmente através de plugins. Você, em teoria, até conseguiria usar o Gulp e toda essas ferramentas de build, mas teria que abrir a caixa preta do wordpress.

Segue um link de plugin que talvez lhe ajude:

https://br.wordpress.org/plugins/merge-minify-refresh/

O único modo de você minificar bem o css e o js e quando você cria seu próprio template porem você tem que tomar alguns cuidados para incluir ele no seu template, por que o wp tem uma forma de trabalhar muito ruim com arquivos de estilo

Flavio,

Estou fazendo testes com o plugin Autoptimize (https://wordpress.org/plugins/autoptimize/) vou guardar os dados de desempenho e depois vou testar o que você indicou e comparar os resultados.

"Abrir a caixa preta do wordpress" é algo que não tenho a intenção de fazer no momento.

Obrigado pela atenção.

Alan,

Você tem razão. O detalhe é que o template é de terceiro(s) e pra fazer alterações que não sejam perdidas no próximo update é complicado.

Obrigado pela atenção.

Encontrei o seguinte código na internet gostaria se possível que o professor flávio desse uma olhada:

{ "name": "wordpress-starter-theme", "version": "1.0.0", "dependencies": {}, "devDependencies": { "gulp": "~3.5.1", "gulp-autoprefixer": "0.0.6", "gulp-cache": "~0.1.1", "gulp-concat": "~2.1.7", "gulp-imagemin": "~0.1.4", "gulp-jshint": "~1.3.4", "gulp-livereload": "~0.3.2", "gulp-load-plugins": "~0.2.0", "gulp-minify-css": "~0.2.0", "gulp-notify": "~0.4.0", "gulp-rename": "~0.2.2", "gulp-ruby-sass": "~0.3.0", "gulp-uglify": "~0.2.0", "tiny-lr": "0.0.5" } }

// Load plugins var gulp = require('gulp'), plugins = require('gulp-load-plugins')({ camelize: true }), lr = require('tiny-lr'), server = lr();

// Styles gulp.task('styles', function() { return gulp.src('assets/styles/source/*.scss') .pipe(plugins.rubySass({ style: 'expanded', compass: true })) .pipe(plugins.autoprefixer('last 2 versions', 'ie 9', 'ios 6', 'android 4')) .pipe(gulp.dest('assets/styles/build')) .pipe(plugins.minifyCss({ keepSpecialComments: 1 })) .pipe(plugins.livereload(server)) .pipe(gulp.dest('./')) .pipe(plugins.notify({ message: 'Styles task complete' })); });

// Vendor Plugin Scripts gulp.task('plugins', function() { return gulp.src(['assets/js/source/plugins.js', 'assets/js/vendor/*.js']) .pipe(plugins.concat('plugins.js')) .pipe(gulp.dest('assets/js/build')) .pipe(plugins.rename({ suffix: '.min' })) .pipe(plugins.uglify()) .pipe(plugins.livereload(server)) .pipe(gulp.dest('assets/js')) .pipe(plugins.notify({ message: 'Scripts task complete' })); });

// Site Scripts gulp.task('scripts', function() { return gulp.src(['assets/js/source/*.js', '!assets/js/source/plugins.js']) .pipe(plugins.jshint('.jshintrc')) .pipe(plugins.jshint.reporter('default')) .pipe(plugins.concat('main.js')) .pipe(gulp.dest('assets/js/build')) .pipe(plugins.rename({ suffix: '.min' })) .pipe(plugins.uglify()) .pipe(plugins.livereload(server)) .pipe(gulp.dest('assets/js')) .pipe(plugins.notify({ message: 'Scripts task complete' })); });

// Images gulp.task('images', function() { return gulp.src('assets/images/*/') .pipe(plugins.cache(plugins.imagemin({ optimizationLevel: 7, progressive: true, interlaced: true }))) .pipe(plugins.livereload(server)) .pipe(gulp.dest('assets/images')) .pipe(plugins.notify({ message: 'Images task complete' })); });

// Watch gulp.task('watch', function() {

// Listen on port 35729 server.listen(35729, function (err) { if (err) { return console.log(err) };

// Watch .scss files gulp.watch('assets/styles/source/*/.scss', ['styles']);

// Watch .js files gulp.watch('assets/js/*/.js', ['plugins', 'scripts']);

// Watch image files gulp.watch('assets/images/*/', ['images']);

});

});

// Default task gulp.task('default', ['styles', 'plugins', 'scripts', 'images', 'watch']);

Luiz, olhei. Mas não entendi a razão de você ter mostrado esse código. Aliás ele é bem confuso. Ele não se aplica a este curso porque aqui não é curso para dev e o site não deixa escrever código como esse.