0

Ao escrever um arquivo .html, .css ou .js utilizamos sua forma plana, mas ao jogar em produção passamos a utilizar preferencialmente arquivos minificados, normalmente nomeados de .min.css, .min.js...

A questão que me trás aqui é: em meu ambiente de desenvolvimento utilizo o gulp para realizar o processo de build dos arquivos. Nos arquivos .html estou fazendo referência aos arquivos *.min.css, como só gero minificados ao aplicar um gulp build, nas tarefas de desenvolvimento eu simplesmente pego os arquivos do repositório fonte e renomeio para *.min.css e *.min.js

Veja um exemplo de tarefa de desenvolvimento:

gulp.task('scss-to-css', function () {
    return gulp.src(paths.styles.src)
            .pipe(autoprefixer())
            .pipe(sass().on('error', sass.logError))
            .pipe(rename({ suffix: '.min' }))
            .pipe(gulp.dest(paths.styles.dest));
});

gulp.task('js', function () {
    return gulp.src(paths.scripts.src)
            .pipe(gulpif(prod, uglify()))
            .pipe(rename({ suffix: '.min' }))
            .pipe(gulp.dest(paths.scripts.dest));
});

Essa é a forma convencional de trabalhar?

1 Resposta 1

0

Geralmente o CSS compilado fica no .gitignore, subindo via GIT para produção apenas os resources compiláveis. Isso é feito para evitar que programadores futuros editem os arquivos minificados, "matando" o pré-processamento. Ou seja, roda-se o gulp no servidor de produção, dá pra automatizar o servidor de rodar o gulp quando dá um pull no servidor.

No mais, usa-se gulp-sourcemap no ambiente de desenvolvimento para ver uma versão "bonita" do CSS minificado. Geralmente você chama o mesmo arquivo CSS ou JS tanto em produção quanto em homologação. Você costuma concatenar todos os CSS e JS num arquivo só? Exemplo: app.min.css e app.min.js

Chamando esses dois com cache burst e sourcemaps já resolve boa parte dos problemas.

index.php

<link rel="stylesheet" href="css/app.min.css?v=<?=filemtime(__DIR__.'/css/app.min.css')?>">

<script src="js/app.min.js?v=<?=filemtime(__DIR__.'/js/app.min.js')?>"></script>

gulpfile.js

var is_dev = false; // Sourcemaps deixam o .css muito pesado, recomendado só em desenvolvimento

/** Compress JS **/
gulp.task('compress', function() {
  gulp.src( config.scripts )
      .pipe(do_concat('app.min.js'))
      .pipe(uglify().on('error', gutil.log))
      .pipe(gulp.dest('assets/js'));
});

/** Compila SASS -> CSS e minifica  **/
gulp.task('sass', function () {
  if (is_dev) {
    // Dev
    gulp.src(['sass/**/*.scss'])
      .pipe(sassGlob())
      .pipe(sourcemaps.init())
      .pipe(sass({
          outputStyle: 'compressed',
          includePaths: config.styles
      }).on('error', sass.logError))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest('assets/css'));
  } else {
    // Prod
    gulp.src(['sass/**/*.scss'])
      .pipe(sassGlob())
      .pipe(sass({
          outputStyle: 'compressed',
          includePaths: config.styles
      }).on('error', sass.logError))
      .pipe(gulp.dest('assets/css'));
  }

});

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .