Depois de muito esforço e inúmeras tentativas, consegui escrever um gulpfile.js que atende as minhas necessidades referente ao build de arquivos sass, js, img e html, entretanto, ainda estou tendo alguns problemas.
Primeiramente vamos ao arquivo final, na sequência explicarei quais são os problemas que estou enfrentando:
var del = require('del'),
gulp = require('gulp'),
gulpif = require('gulp-if'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
htmlmin = require('gulp-htmlmin'),
imagemin = require('gulp-imagemin'),
gulpSequence = require('gulp-sequence'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create();
var amb = 'dev';
gulp.task('clean', function () {
return del([
'./src/assets/css',
'./src/assets/js',
'./dist'
]);
});
gulp.task('scss-to-css', function () {
function scss(suffix, compressed, dest)
{
return gulp.src('./src/scss/**/*.scss')
.pipe(autoprefixer())
.pipe(sass({outputStyle: compressed}).on('error', sass.logError))
.pipe(gulpif(suffix, rename({suffix: '.min'})))
.pipe(gulp.dest(dest));
}
if(amb == 'dist') {
scss(false, 'expanded', './dist/assets/css');
}
if (amb == 'prod' || amb == 'dist') {
scss(true, 'compressed', './dist/assets/css');
}
return scss(true, 'expanded', './src/assets/css');
});
gulp.task('js', function () {
function js(compressed, suffix, dest)
{
return gulp.src('./src/js/**/*.js')
.pipe(gulpif(compressed, uglify()))
.pipe(gulpif(suffix, rename({suffix: '.min'})))
.pipe(gulp.dest(dest));
}
if(amb == 'dist') {
js(false, false, './dist/assets/js');
}
if (amb == 'prod' || amb == 'dist') {
js(true, true, './dist/assets/js');
}
return js(false, true, './src/assets/js');
});
gulp.task('html', function () {
return gulp.src('./src/**/*.html')
.pipe(gulpif(amb == 'prod', htmlmin({ collapseWhitespace: true, removeComments: true })))
.pipe(gulp.dest('./dist'));
});
gulp.task('img', function () {
return gulp.src('./src/assets/img/**/*')
.pipe(imagemin([
imagemin.gifsicle({ interlaced: true }),
imagemin.jpegtran({ progressive: true }),
imagemin.optipng({ optimizationLevel: 5 }),
imagemin.svgo({
plugins: [
{ removeViewBox: true },
{ cleanupIDs: false }
]
})
]))
.pipe(gulp.dest('./dist/assets/img'));
});
gulp.task('watch', function () {
gulp.watch('./src/scss/**/*.scss', ['scss-to-css']);
gulp.watch('./src/assets/js/**/*.js', ['js']);
});
gulp.task('serve', ['watch'], function () {
browserSync.init({
server: {
baseDir: './src/'
}
});
gulp.watch(['./src/**/*.html'], browserSync.reload);
gulp.watch(['./src/assets/css/**/*'], browserSync.reload);
gulp.watch(['./src/assets/js/**/*'], browserSync.reload);
gulp.watch(['./src/assets/img/**/*'], browserSync.reload);
});
gulp.task('default', ['clean'], function (cb) {
gulpSequence(['scss-to-css', 'js'], cb);
});
gulp.task('dist', ['clean'], function (cb) {
amb = 'dist';
gulpSequence(['scss-to-css', 'js', 'img', 'html'], cb);
});
gulp.task('prod', ['clean'], function (cb) {
amb = 'prod';
gulpSequence(['scss-to-css', 'js', 'img', 'html'], cb);
});
Só para explicar: as tasks dist e prod são bem parecidas, a diferença é que prod gera somente arquivos mimificados no diretório ./dist e a task dist faz uma copia mimificada e uma plana.
Vamos aos problemas:
Fui obrigado a colocar todo o conteúdo de desenvolvimento dentro do diretório src, essa abordagem foi necessária pois ao rodar a task html com a mascara
./**/*.html
a mesma copiava o html para o ./dist e começava a realizar operações recusavas. Como posso ter subdiretórios com outros arquivos .html, não posso reduzir a mascara para./*.html
, também não poderia jogar só os arquivos html em um subdiretório, isso iria me obrigar a alterar todos os apontamentos dentro dos arquivos html, css..../src/js: esse diretório não era para está na raiz do src, mas sim dentro de src/assets/js, porém, surge o problema: dentro de meus arquivos html estou fazendo referência para a versão mimificada do js, isso foi necessário pois ao migrar para produção não preciso alterar os links dentro do html para incluir o .min, em desenvolvimento o nome do arquivo é *.min.js mas este arquivo não está mimificado, já ao rodar a task dist ou prod ele é mimificado e copiado para o diretório ./dist/assets/js. Pensei em duas abordagens para resolver este problema:
- Ao rodar as tasks dist ou prod aplicar um replace em todos os arquivos html substituindo
*.js
por*.min.js
- Outra abordagem é já trabalhar com o nome de arquivo *.min.js dentro do diretório ./src/assets/js e ao rodar a task dist aplicar um Rename no arquivo, fazendo uma cópia como *.js (removendo o .min)
- Ao rodar as tasks dist ou prod aplicar um replace em todos os arquivos html substituindo
No caso das duas ultimas soluções, tentei aplicar, mas não consegui ter sucesso.