1

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:

  1. 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...

  2. ./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)

No caso das duas ultimas soluções, tentei aplicar, mas não consegui ter sucesso.

1
  • 1
    Fábio, acho que se você usar sourcemaps nos seus arquivos JS e CSS já pode deixar a chamada para os mesmos já com a versão minificada. Commented 15/12/2017 às 18:12

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .