Gulp - Otimizando CSS e JavaScript

Neste capítulo, você aprenderá como otimizar CSS e JavaScript. A otimização é necessária para remover dados desnecessários (por exemplo, espaços e caracteres não utilizados) dos arquivos de origem. Reduz o tamanho dos arquivos e permite que carreguem mais rápido

Instale plug-ins para otimizar CSS e JavaScript

Vá para o diretório “work” da sua linha de comando e instale os plug-ins “gulp-uglify”, “gulp-minify-css” e “gulp-concat” usando o seguinte comando -

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

Declare dependências e crie tarefas

Em seu arquivo de configuração gulpfile.js, primeiro declare as dependências conforme mostrado no código a seguir.

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

Em seguida, você precisa criar tarefas para otimizar CSS e JavaScript, conforme mostrado no código a seguir.

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

o js tarefa aceitará .js arquivos de src/scripts/pasta. Ele concatena e feia ojs arquivos, então produz build/scripts/script.js Arquivo.

o CSS tarefa aceitará .css arquivos de src/styles/pasta. Ele concatena e minimizaCSS arquivos, então produz build/styles/styles.css Arquivo.

Execute as tarefas

O arquivo de configuração está configurado e pronto para ser executado. Use o seguinte comando para executar a tarefa.

gulp

Ao executar a tarefa usando o comando acima, você receberá o seguinte resultado no prompt de comando.

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