Gulp — Оптимизация CSS и JavaScript

В этой главе вы узнаете, как оптимизировать CSS и JavaScript. Оптимизация необходима для удаления ненужных данных (например, пробелов и неиспользуемых символов) из исходных файлов. Это уменьшает размер файлов и позволяет загружать их быстрее

Установите плагины для оптимизации CSS и JavaScript

Перейдите в каталог «work» из командной строки и установите плагины «gulp-uglify», «gulp-minify-css» и «gulp-concat» с помощью следующей команды:

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

Объявите зависимости и создайте задачи

В файле конфигурации gulpfile.js сначала объявите зависимости, как показано в следующем коде.

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

Далее вам нужно создать задачи для оптимизации CSS и JavaScript, как показано в следующем коде.

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

Задача js принимает файлы .js из папки src / scripts / . Он объединяет и расширяет файлы js , затем создает файл build / scripts / script.js .

Задача CSS примет файлы .css из папки src / styles / . Он объединяет и минимизирует CSS- файлы, а затем создает файл build / styles / styles.css .

Выполнить задачи

Файл конфигурации настроен и готов к выполнению. Используйте следующую команду для запуска задачи.

gulp

Запустив задачу с помощью приведенной выше команды, вы получите следующий результат в командной строке.