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?