Gulp - Ottimizzazione di CSS e JavaScript

In questo capitolo imparerai come ottimizzare CSS e JavaScript. L'ottimizzazione è necessaria per rimuovere i dati non necessari (ad esempio spazi e caratteri non utilizzati) dai file di origine. Riduce le dimensioni dei file e consente loro di caricarsi più velocemente

Installa plugin per ottimizzare CSS e JavaScript

Vai alla directory "work" dalla riga di comando e installa i plug-in "gulp-uglify", "gulp-minify-css" e "gulp-concat" utilizzando il seguente comando:

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

Dichiarare le dipendenze e creare attività

Nel tuo file di configurazione gulpfile.js, per prima cosa dichiarare le dipendenze come mostrato nel codice seguente.

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

Successivamente, è necessario creare attività per l'ottimizzazione di CSS e JavaScript come mostrato nel codice seguente.

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

Il js l'attività accetterà .js file da src/scripts/cartella. Concatena e semplifica il filejs file, quindi produce build/scripts/script.js file.

Il CSS l'attività accetterà .css file da src/styles/cartella. Concatena e minimizzaCSS file, quindi produce build/styles/styles.css file.

Esegui le attività

Il file di configurazione è impostato e pronto per l'esecuzione. Utilizzare il seguente comando per eseguire l'attività.

gulp

Eseguendo l'attività utilizzando il comando precedente, riceverai il seguente risultato nel prompt dei comandi.

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