Este artigo explora como o Gulp.js simplifica as tarefas repetitivas de desenvolvimento do CSS, aumentando sua eficiência do fluxo de trabalho. Enquanto um editor de texto é suficiente para o desenvolvimento da Web, tarefas repetitivas cruciais para sites modernos e o desempenho ideal geralmente se mostram frustrantes. Isso inclui: transpiling, concatenação de arquivos, minificação de código de produção e implantação em vários servidores. Essas tarefas, repetidas a cada mudança, podem se tornar cada vez mais onerosas.

Felizmente, o Gulp.js automatiza esses processos. Este artigo demonstra sua aplicação na automação de várias tarefas de CSS: otimização de imagens, compilação SASS, manuseio de ativos e prefixos automáticos de fornecedores automáticos, remoção de seletores de CSS não utilizados, minificação CSS, relatórios de tamanho de arquivo, geração de mapas de fonte para o Browser DevTools e Live Browser Relatering Afform Offord.

as principais vantagens do uso de gulp.js:

• Automation: automatiza tarefas repetitivas como otimização de imagem, compilação SASS e CSS Minification.
• flexibilidade: usa o javascript para configuração de tarefa, permitindo uma modificação fácil com base no ambiente (desenvolvimento/produção).
• Extensibilidade: Aproveita numerosos plugins (por exemplo, gulp-imagemin , gulp-sass ) para funcionalidade aprimorada.
• Reloading ao vivo: integra-se ao BrowSync para atualizações em tempo real em vários navegadores e dispositivos.
• Gerenciamento de tarefas eficiente: lida com tarefas em série ou em paralelo para tempos de construção otimizados.

por que escolher gulp?

Existem muitos corredores de tarefas (Grunt, Webpack, Parcel, NPM Scripts), mas Gulp se destaca devido à sua estabilidade, velocidade, suporte extenso do plug-in e configuração baseada em JavaScript. Essa abordagem baseada em código oferece vantagens, permitindo a modificação de saída condicional-por exemplo, removendo o SourCemaps durante a implantação final.

Começando:

Este tutorial usa o Gulp 4. Verifique se você possui git e node.js instalado. Clone o projeto de exemplo do github:

git clone https://github.com/craigbuckler/gulp4-css
cd gulp4-css
npm i gulp-cli -g
npm i
gulp

Navegue para

http: // localhost: 8000/ (ou o URL externo exibido) no seu navegador.

alternativamente, crie um novo projeto:

instale node.js.
Instale Gulp globalmente:
2. npm i gulp -cli -g
Crie uma pasta de projeto (por exemplo,
3. my-gulp-project ).
inicialize npm:
4. npm init
CREATE
5. SRC subpastas para arquivos de origem (imagens, scss).
Crie uma pasta
6. build para arquivos compilados.
crie um arquivo
7. index.html para testing.

Instalação do módulo:

Instale os módulos necessários:

npm i gulp gulp-imagemin gulp-newer gulp-noop gulp-postcss gulp-sass gulp-size gulp-sourcemaps postcss-assets autoprefixer cssnano usedcss browser-sync --save-dev

o arquivo gulpfile.js

define tarefas. Um exemplo simplificado se concentra na otimização da imagem e no processamento CSS:

// gulpfile.js (exemplo simplificado) const gulp = requer ('gulp'); const imagemin = requer ('gulp-imagemin'); const sass = requer ('gulp-sass') (requer ('sass')); // Nota: Usando Dart-SASS const Postcss = requer ('gulp-postcss'); const autoprefixer = require ('Autoprefixer'); const cssnano = requer ('cssnano'); // Tarefa de imagem Função imagens () { Retornar Gulp.src ('src/imagens/*') .pipe (imagemin ()) .pipe (Gulp.Dest ('Build/Images')); } // tarefa CSS função css () { Retornar Gulp.src ('SRC/SCSS/Main.SCSS') .pipe (sass (). on ('erro', sass.logerror)) .pipe (postcss ([AutoPrefixer (), cssnano ()])) .pipe (Gulp.Dest ('Build/CSS')); } exports.images = imagens; exports.css = css; exports.default = gulp.parallel (imagens, css); // Execute tarefas em paralelo

// gulpfile.js (Simplified Example)

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const sass = require('gulp-sass')(require('sass')); //Note: using dart-sass
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

// Image task
function images() {
  return gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('build/images'));
}

// CSS task
function css() {
  return gulp.src('src/scss/main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(gulp.dest('build/css'));
}

exports.images = images;
exports.css = css;
exports.default = gulp.parallel(images, css); // Run tasks in parallel

incluiria recursos como SourCemaps, BrowSerSync e plugins PostCSS mais sofisticados. Consulte o texto original para obter um exemplo completo.

Lembre -se de adaptar os caminhos do arquivo para corresponder à estrutura do seu projeto. Run Gulp

no seu terminal para executar as tarefas. A completa e detalhada

gulpfile.js e explicações adicionais estão disponíveis no artigo original.