Gulp: optimización de CSS y JavaScript

En este capítulo, aprenderá a optimizar CSS y JavaScript. Se requiere optimización para eliminar datos innecesarios (por ejemplo, espacios y caracteres no utilizados) de los archivos de origen. Reduce el tamaño de los archivos y les permite cargar más rápido

Instale complementos para optimizar CSS y JavaScript

Vaya al directorio "trabajo" desde su línea de comando e instale los complementos "gulp-uglify", "gulp-minify-css" y "gulp-concat" usando el siguiente comando:

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

Declarar dependencias y crear tareas

En su archivo de configuración gulpfile.js, primero declare las dependencias como se muestra en el siguiente código.

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

A continuación, debe crear tareas para optimizar CSS y JavaScript como se muestra en el siguiente código.

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

los js la tarea acepta .js archivos de src/scripts/carpeta. Concatena y fealiza eljs archivos, luego produce build/scripts/script.js archivo.

los CSS la tarea aceptará .css archivos de src/styles/carpeta. Concatena y minificaCSS archivos, luego produce build/styles/styles.css archivo.

Ejecutar las tareas

El archivo de configuración está configurado y listo para ejecutarse. Utilice el siguiente comando para ejecutar la tarea.

gulp

Al ejecutar la tarea con el comando anterior, recibirá el siguiente resultado en el símbolo del sistema.

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