Gulp - Optymalizacja CSS i JavaScript

W tym rozdziale dowiesz się, jak zoptymalizować CSS i JavaScript. Optymalizacja jest wymagana w celu usunięcia niepotrzebnych danych (np. Spacji i nieużywanych znaków) z plików źródłowych. Zmniejsza rozmiar plików i umożliwia ich szybsze ładowanie

Zainstaluj wtyczki, aby zoptymalizować CSS i JavaScript

Przejdź do katalogu „work” z wiersza poleceń i zainstaluj wtyczki „gulp-uglify”, „gulp-minify-css” i „gulp-concat” za pomocą następującego polecenia -

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

Deklaruj zależności i twórz zadania

W twoim pliku konfiguracyjnym gulpfile.js, najpierw zadeklaruj zależności, jak pokazano w poniższym kodzie.

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

Następnie musisz utworzyć zadania do optymalizacji CSS i JavaScript, jak pokazano w poniższym kodzie.

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(){
});

Plik js zadanie zaakceptuje .js pliki z src/scripts/teczka. Łączy i uszlachetniajs pliki, następnie tworzy build/scripts/script.js plik.

Plik CSS zadanie przyjmie .css pliki z src/styles/teczka. Łączy i minimalizujeCSS pliki, następnie tworzy build/styles/styles.css plik.

Uruchom zadania

Plik konfiguracyjny jest skonfigurowany i gotowy do wykonania. Użyj następującego polecenia, aby uruchomić zadanie.

gulp

Po uruchomieniu zadania za pomocą powyższego polecenia w wierszu polecenia pojawi się następujący wynik.

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