Gulp - Optimiser CSS et JavaScript

Dans ce chapitre, vous apprendrez comment optimiser CSS et JavaScript. L'optimisation est nécessaire pour supprimer les données inutiles (par exemple les espaces et les caractères inutilisés) des fichiers source. Cela réduit la taille des fichiers et leur permet de se charger plus rapidement

Installer des plugins pour optimiser CSS et JavaScript

Accédez au répertoire «work» depuis votre ligne de commande et installez les plugins «gulp-uglify», «gulp-minify-css» et «gulp-concat» en utilisant la commande suivante -

npm install gulp-uglify gulp-minify-css gulp-concat

Déclarer des dépendances et créer des tâches

Dans votre fichier de configuration gulpfile.js, déclarez d'abord les dépendances comme indiqué dans le code suivant.

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');

Ensuite, vous devez créer des tâches pour optimiser CSS et JavaScript, comme indiqué dans le code suivant.

gulp.task('js', function(){
   gulp.src('src/scripts/*.js')
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build/scripts/'));
});

gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));
});

gulp.task('default',['js','css'],function(){
});

le js la tâche accepte .js fichiers de src/scripts/dossier. Il concatène et uglifie lejs fichiers, puis produit build/scripts/script.js fichier.

le CSS la tâche acceptera .css fichiers de src/styles/dossier. Il concatène et minifieCSS fichiers, puis produit build/styles/styles.css fichier.

Exécutez les tâches

Le fichier de configuration est configuré et prêt à être exécuté. Utilisez la commande suivante pour exécuter la tâche.

gulp

Lors de l'exécution de la tâche à l'aide de la commande ci-dessus, vous recevrez le résultat suivant dans l'invite de commande.

C:\work>gulp
[13:16:34] Using gulpfile C:\work\gulpfile.js
[13:16:34] Starting 'js'...
[13:16:34] Finished 'js' after 24 ms
[13:16:34] Starting 'css'...
[13:16:34] Finished 'css' after 6.05 ms
[13:16:34] Starting 'default'...
[13:16:34] Finished 'default' after 5.04 μs