Cet article explore comment Gulp.js rationalise des tâches de développement CSS répétitives, augmentant l'efficacité de votre flux de travail. Alors qu'un éditeur de texte suffit pour le développement Web, les tâches répétitives cruciales pour les sites Web modernes et les performances optimales s'avèrent souvent frustrantes. Ceux-ci incluent: le transplage, la concaténation des fichiers, la minification du code de production et le déploiement sur divers serveurs. Ces tâches, répétées à chaque changement, peuvent devenir de plus en plus contraignantes.

Heureusement, Gulp.js automatise ces processus. Cet article démontre son application dans l'automatisation de diverses tâches CSS: optimisation d'image, compilation SASS, gestion des actifs et inclinaison, préfixe automatique des fournisseurs, suppression des sélecteurs CSS inutilisés, minification CSS, rapport de la taille du fichier, génération de cartes source pour le navigateur Devtools, et rechargement du navigateur en direct lors des modifications de fichiers source.

Avantages clés de l'utilisation de gulp.js:

• Automation: automatise des tâches répétitives comme l'optimisation d'image, la compilation SASS et la minification CSS.
• flexibilité: utilise javascript pour la configuration des tâches, permettant une modification facile basée sur l'environnement (développement / production).
• extensibilité: exploite de nombreux plugins (par exemple, gulp-iMagemin , gulp-sass ) pour les fonctionnalités améliorées.
• Live Reloading: s'intègre à BrowSersync pour des mises à jour en temps réel sur plusieurs navigateurs et périphériques.
• Management de tâches efficace: gère les tâches en série ou en parallèle pour des temps de construction optimisés.

Pourquoi choisir Gulp?

De nombreux coureurs de tâches existent (Grunt, WebPack, Parcel, Scripts NPM), mais Gulp se distingue en raison de sa stabilité, de sa vitesse, de sa prise en charge du plugin étendue et de sa configuration basée sur JavaScript. Cette approche basée sur le code offre des avantages, permettant une modification de la sortie conditionnelle - par exemple, en supprimant SourceMaps pendant le déploiement final.

Commencer:

Ce tutoriel utilise Gulp 4. Assurez-vous que Git et Node.js installés. Clone l'exemple de projet de github:

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

naviguez vers

http: // localhost: 8000 / (ou l'URL externe affichée) dans votre navigateur.

Alternativement, créez un nouveau projet:

installer node.js.
Installez Gulp Globally:
2. npm i gulp-Cli -g
Créez un dossier de projet (par exemple,
3. my-gulp-project ).
initialiser npm:
4. npm init
Créer
5. Src sous-dossiers pour les fichiers source (images, scss).
Créer un dossier
6. build pour les fichiers compilés.
Créez un fichier
7. index.html pour les tests.

Installation du module:

Installez les modules nécessaires:

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

gulpfile.js Configuration (exemple):

le fichier

gulpfile.js définit les tâches. Un exemple simplifié se concentre sur l'optimisation de l'image et le traitement CSS:

// 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

Cet exemple démontre l'optimisation de base de l'image et la compilation SASS avec minification et autopréfixage. Un

gulpfile.js plus complet inclurait des fonctionnalités telles que SourceMaps, BrowSersync et les plugins PostCSS plus sophistiqués. Reportez-vous au texte original pour un exemple complet.

N'oubliez pas d'adapter les chemins de fichier pour correspondre à la structure de votre projet. Exécutez

gulp dans votre terminal pour exécuter les tâches. Les explications complétées et détaillées gulpfile.js sont disponibles dans l'article original.