При оптимізації CSS та JavaScript-файлів перед розробниками стоять два завдання: стиснення та об'єднання. Одна з проблем, з якою стикаються розробники, полягає в тому, що складно об'єднати скрипти в правильному порядку.
Скажімо, ми включили три різні елементи <script> в index.html.
<code data-language="html"><body> <script src="js/lib/a-library.js"></script> <script src="js/lib/another-library.js"></script> <script src="js/main.js"></script> </body>
Ці скрипти зберігаються у двох різних папках і буде складно об'єднати їх через традиційні плагіни, на зразок gulp-concatenate. На щастя, є корисний плагін gulp-useref, який вирішує цю проблему.
gulp-useref об'єднує будь-яку кількість CSS та JavaScript-файлів в один, шукаючи коментар, який починається з <!--build: і закінчується <!--endbuild-->. Ось його синтаксис:
<code data-language="html"><!--build:<тип> <шлях>--> … Розмітка HTML, список елементів <script> або <link> <!--endbuild-->
<тип> може бути js, css або remove. Найкраще встановити <тип> як тип файлів, які ви намагаєтеся об'єднати. Якщо встановіть <тип> як remove, то Gulp видаляє весь блок збирання без створення файлу.<шлях> — це вказівник на цільовий шлях, де виявиться згенерований файл.Наприклад, ми хочемо, щоб кінцевий JavaScript-файл створився в папці js під ім'ям main.min.js. Отже, розмітка буде наступною:
<code data-language="html"><!--build:js js/main.min.js--> <script src="js/lib/a-library.js"></script> <script src="js/lib/another-library.js"></script> <script src="js/main.js"></script> <!--endbuild-->
Тепер налаштуємо плагін gulp-useref. Ми повинні встановити плагін і викликати його в gulpfile.
$npm install gulp-useref--save-dev
<code data-language="javascript">var useref=require('gulp-useref');Налаштування завдання useref аналогічне іншим завданням, які ми вже виконували. Ось наш код:
<code data-language="javascript">gulp.task('useref', function(){ return gulp.src('app/*). html') .pipe(useref()) .pipe(gulp.dest('dist')) });Якщо ви запустите завдання useref, то Gulp пройде по трьох елементах <script> і об'єднає їх в один dist/js/main.min.js.
Цей файл, однак, на даний момент не стиснутий. Нам доведеться скористатися плагіном gulp-uglify для зменшення JavaScript-файлів. Крім того, буде потрібно другий плагін під назвою gulp-if, який гарантує, що ми будемо стискати тільки файли JavaScript .
$ npm install gulp-uglify--save-dev
<code data-language="javascript">var uglify=require('gulp-uglify'); var gulpIf=require('gulp-if'); gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) //Стискаємо, тільки якщо це JavaScript-файл .pipe(gulpIf('*). js', uglify())) .pipe(gulp.dest('dist')) });Gulp тепер повинен автоматично стискати файл main.min.js щоразу, коли ви запускаєте завдання useref.
Одна з чудових речей, яку я ще не розповів про gulp-useref, — це те, що він автоматично змінює всі скрипти всередині <!--build: та <!--endbuild--> на один файл JavaScript, який вказує на js/main.min.js.
Чудово, чи не так? Цей метод ми можемо використовувати для об'єднання будь-яких CSS-файлів (якщо їх більше одного). Скористаємося тим самим процесом і додамо коментар з build.
<code data-language="html"><!--build:css css /styles.min.css--> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/another-stylesheet.css"> <!--endbuild-->
Ми також можемо стиснути об'єднаний CSS-файл, для чого буде потрібно плагін під назвою gulp-cssnano, який допоможе для стиснення.
$npm install gulp-cssnano
<code data-language="javascript">var cssnano=require('gulp-cssnano'); gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulpIf('*.js', uglify())) //Стискаємо лише якщо це CSS-файл .pipe(gulpIf('*.css', cssnano())) .pipe(gulp.dest('dist')) }); Тепер ви отримаєте один оптимізований файл CSS і один оптимізований файл JavaScript при кожному запуску завдання useref.
Посунемося далі та оптимізуємо зображення.