gulp
Всестороннее руководство по автоматизации рабочего процесса с помощью Gulpjs -1 из 2
Поиск…
Синтаксис
- npm install [plugin-name] --save-dev
- npm install [имя-плагина] --save
- Функция
<function-name>
(glob) {$ .src (glob) .pipe ([плагин 1]). Pipe ([плагин 2]) .... pipe ([плагин n]). Pipe ($ .dest (<destination-name>
)} -
$.task(<taskname> , [dependencies] , <body>);
замечания
Продолжить чтение - создание задачи по умолчанию и настройка синхронизации браузера
Рекомендации
Загрузка всех плагинов из пакета.JSON
Предположим, у вас есть понимание того, как установить gulp, давайте погрузиться прямо к требованию всех зависимостей gulp от package.json под вашей корневой папкой проектов.
Если у вас еще нет gulpfile, создайте пустой файл с именем
gulpfile.js
Во-первых, нам нужен глоток. вот так:
var $ = require('gulp');
Далее, давайте загрузим все наши плагины в наш файл gulp, с помощью нижеприведенного фрагмента
Заметка
Прочитайте комментарии во всех фрагментах, которые мы будем включать в это чтение, они обеспечивают более глубокое понимание каждой функциональности
/*
require gulp-load-plugins, and call it
gulp-load-plugins will require individually,
all the plugins installed in package.json at the root directory
these required plugins, are lazy loaded
that is, gulp-load-plugins will only require them when they are referenced in this file
plugins are available for perusal, via camelcased names, minus gulp
eg: gulp-clean-css is accessed by $$.cleanCss
*/
var $$ = require('gulp-load-plugins')();
НОТА
На протяжении многих примеров, которые мы будем иметь в этой статье, мы имеем псевдоним
- gulp as $ и
- gulp-load-plugins как $$
просто для удобства печати.
Установка плагинов для реагирующих изображений | Css Minification | Js minification
Наша цель состоит в том, чтобы
- Сделайте ваши изображения соответствующими размерам и ширине, создавая батарею изображений различной ширины и уменьшая их
- Настроить Javascript
- Минимизируйте свои активы - JS / CSS / HTML, что позволит вам размещать более легкий, чем самый легкий код
- Просмотрите файлы css / js / image для изменения и перестройте оптимизацию
- Синхронизация изменений во время разработки, с браузером, обслуживающим ваш сайт.
Нам нужно несколько плагинов, поэтому давайте их установим. Пожалуйста, запустите все это в корневой папке проекта.
Плагины обработки изображений
bash $ npm install --save-dev gulp-responsive
bash $ npm install --save-dev gulp-imagemin
bash $ npm install --save-dev imagemin
bash $ npm install --save-dev imagemin-jpeg-recompress
bash $ npm install --save-dev imagemin-pngquant
Плагины оптимизатора активов
bash $ npm install --save-dev gulp-clean-css
bash $ npm install --save-dev gulp-uglify
bash $ npm install --save-dev gulp-minify-html
bash $ npm install --save-dev gulp-jshint
bash $ npm install --save-dev gulp-concat
bash $ npm install --save-dev gulp-autoprefixer
Анатомия функции глотки
[Function <name>] (glob) {
$.src(glob)
.pipe([plugin 1])
.pipe([plugin 2])
.
.
.
.pipe([plugin n])
.pipe( $.dest(<destination-name>)
}
Заметка
pipe - это метод, который передает все файлы, соответствующие входу glob, нашим плагинам (minifyhtml в этом случае).
Это легко представить себе так:
$ .src - это то, что создает потоки и трубы для каждого отдельного файла, сопоставляющего glob вниз с каждым плагином в конвейере. Каждый плагин передает этот файл, изменяет его содержимое в памяти только до достижения $ .dest, который затем обновляет / создает файлы, передаваемые по $ .src
Где ,
$ -> gulp
$$ -> gulp-load-plugins
Оптимизация и оптимизация активов
Итак, прежде чем записывать функции оптимизатора, нам нужно установить пару кэширующих плагинов.
bash $ npm install --save-dev gulp-cached
bash $ npm install --save-dev gulp-remember
Вы могли бы задаться вопросом, почему два тайника? gulp-cache , передает только модифицированный или новый контент по конвейеру другим плагинам. Итак, поскольку мы хотим, чтобы файлы без изменений были использованы для конкатенации в один файл на один ресурс (css | js), нам нужно запомнить gulp, а также gulp-cache
Сначала мы используем gulp-cache для создания списка файлов, которые изменились
Во-вторых, нам нужно gulp-помнить, чтобы отслеживать все файлы, которые передаются этим списком в памяти.
Первый запуск: файлы не кэшируются, поэтому gulp-кэширование передаст их всем на gulp-remember
Последующие прогоны: только измененные или новые файлы сбрасываются с помощью gulp-кеширования. Поскольку содержимое текущего файла изменилось, gulp-помнит обновления своего кеша.
Прохладный, напишем наш первый оптимизатор
Оптимизатор стилей
// Goal
/*
1. cache existing files on the first run
2. each file ,
a. Is autoprefixed with cross browser compatible prefixes for any css property ( justify-content for e.g)
b. Is concatenated into app.css
3. app.css is minified
4. On subsequent runs , the above process is implemented on file modifications/additions only
*/
/*
*@src - input a glob pattern - a string eg 'images/**/*' or '**/*.css' or, an array eg ['glob1','glob2']
*/
var optimizeStyles = function(src) {
return $.src(src).
pipe($$.cached('styles')).
pipe($$.autoprefixer({
browsers: ['last 2 versions']
})).
pipe($$.remember('auto-prefixed-stylesheets')).
pipe($$.concat('app.css')).
pipe($.dest('build/css')).
pipe($$.cleanCss()).
pipe($$.rename({
suffix: '.min'
})).
pipe($.dest('build/css'))
}
Заметка
$ -> gulp
$$ -> gulp-load-plugins
$ .src -> создает потоки файлов, соответствующие glob, переданные как src
$ .dest -> сохраняет управляемый файл в указанном пути
Оптимизатор скриптов
// Goal
/*
1. cache existing files on the first run
2. each file ,
a. Is linted with jshint
b. Is concatenated into app.js
3. app.js is minified
4. On subsequent runs , the above process is implemented on file modifications/additions only
*/
/*
*@src - input a glob pattern - a string eg 'js/**/*' or '**/*.js' or, an array eg ['glob1','glob2']
*/
var optimizeScripts = function(src) {
return $.src(src).
pipe($$.cached('scripts')).
pipe($$.jshint()).
pipe($$.jshint.reporter('default')).
pipe($$.jshint.reporter('fail')).
pipe($$.remember('linted-scripts')).
pipe($$.concat('app.js')).
pipe($.dest('build/js')).
pipe($$.uglify()).
pipe($$.rename({
suffix: '.min'
})).
pipe($.dest('build/js'))
}
Заметка
$ -> gulp
$$ -> gulp-load-plugins
$ .src -> создает потоки файлов, соответствующие glob, переданные как src
$ .dest -> сохраняет управляемый файл в указанном пути
Создание ответных изображений
Перейдем к обработке изображений. Таким образом, цель состоит в том, чтобы иметь массив размеров для каждого изображения, которое вы собираетесь обслуживать.
Зачем?
Ну, чтобы понять, почему нам нужна батарея изображений с широким диапазоном ширины, нам нужно задуматься над тем, что есть, вероятно, дваллион устройств с различными разрешениями. Нам нужно изображение для масштабирования без значительной пикселизации. В то же время нам нужно улучшить время загрузки страницы, загрузив только одно изображение, которое соответствует ширине, в которой она содержится, и также имеет наименьшее возможное измерение. Существуют научные блоги, подобные тому, что написал Эрик Портис, который подчеркивает неэффективность просто медиа-запросов и служит в качестве всеобъемлющего руководства для понимания понятий типа srcsets и размеров.
Вы можете сослаться на эпическую книгу Эрика Портиса
Теперь наша функция должна принимать глобус и ширину в качестве входных данных, а также делать свою магию и выталкивать файл, который каждый запуск генерирует, в пункт назначения и минимизирует ответное изображение.
В нашем первом примере мы установили два модуля сжатия изображений
Поскольку эти плагины НЕ начинаются с префикса «gulp-», нам нужно вручную загрузить их на наш gulpfile.
SO Давайте их потребуем вручную, после объявления gulp-load-plugins в верхней части нашего gulpfile.
вот так:
var compressJpg = require('imagemin-jpeg-recompress');
var pngquant = require('imagemin-pngquant');
Стоит отметить, что gulp-responsive поставляется с процессором четкого изображения, который лучше, чем imagemagick BY FAAAAR !. Sharp - это то, что используется gulp-responsive, чтобы обрезать ваши изображения до требуемой ширины.
вы можете посмотреть параметры конфигурации gulp-responsive-configuration, для получения полного списка параметров конфигурации. Я только использовал
- width - обрезать наши изображения до ширины w, переданные в качестве параметра
- rename - добавить суффикс к имени изображения, чтобы он оставался уникальным
в моей функции конфигурации ниже. поэтому наша функция обрезает изображение до ширины, передаваемой как вход, для всех соответствующих изображений, дешифрованных через вход glob. то каждое изображение сжимается с помощью jpeg-recompress или pngquant и сохраняется внутри сборки / изображений.
Имея это в виду, наша функция будет выглядеть так:
/*
@generateResponsiveImages
*@Description:takes in a src of globs, to stream matching image files , a width,
*to resize the matching image to, and a dest to write the resized and minified files to
*@src - input a glob pattern - a string eg 'images/** /*' or 'images/*' or, an array
eg ['glob1','glob2']
*@return returns a stream
*/
var generateResponsiveImages = function(src, width, dest) {
//declare a default destination
if (!dest)
dest = 'build/images';
//case 1: src glob - images/**/*
// the base is the directory immediately preceeding the glob - images/ in this case
//case 2: images/fixed/flourish.png : the base here is images/fixed/ - we are overriding
// that by setting base to images.This is done so that, the path beginning after images/
// - is the path under our destination - without us setting the base, dest would be,
//build/images/flourish.png.But with us setting the base, the destination would be
// build/images/fixed/flourish.png
return $.src(src, {
base: 'images'
})
//generate resized images according to the width passed
.pipe($$.responsive({
//match all pngs within the src stream
'**/*.png': [{
width: width,
rename: {
suffix: '-' + width
},
withoutEnlargement: false,
}],
//match all jpgs within the src stream
'**/*.jpg': [{
width: width,
rename: {
suffix: '-' + width
},
progressive: true,
withoutEnlargement: false,
}]
}, {
errorOnEnlargement: false,
errorOnUnusedConfig: false,
errorOnUnusedImage: false
}))
//once the file is resized to width, minify it using the plugins available per format
.pipe($$.if('*.jpg', compressJpg({
min: 30,
max: 90,
target: 0.5
})()))
//use file based cache gulp-cache and it will minify only changed or new files
//if it is not a new file and if the contents havent changed, the file is served from cache
.pipe($$.cache($$.imagemin({
verbose: true
})))
//write to destination - dest + path from base
.pipe($.dest(dest));
}
Заметка
$ -> gulp
$$ -> gulp-load-plugins
$ .src -> создает потоки файлов, соответствующие glob, переданные как src
$ .dest -> сохраняет управляемый файл в указанном пути
Другие ссылки
HTML-редактор
*
*@minifyHtml
*Description:takes in a glob src, and minifies all '.html' files matched by the glob
*@src - input a glob pattern - a string eg '/**/*.html /*' or '*.html' or, an array eg ['glob1','glob2']
*@dest=file.base means, the modified html file will be in the same directory as the src file being minified
*often means, the process is just a modification on the existing src file
*@return returns a stream
*/
var minifyHtml = function(src) {
return $.src(src)
.pipe($$.minifyHtml())
.pipe($.dest(function(file) {
//file is provided to a dest callback -
// Refer here https://github.com/gulpjs/gulp/blob/master/docs/API.md#path
return file.base;
}));
}
Анатомия проблемы с глотком
Анатомия определения задачи такова:
$.task(<taskname> , [dependencies] , <body>);
зависимостей, представляет собой массив задач, которые должны быть выполнены до выполнения текущей задачи, которую вы определяете. Больше похоже на принудительное выполнение вместо асинхронной функциональности по умолчанию.
Добавление задач Gulp
Итак, теперь мы имеем
- Определенная функция выше для оптимизации стилей
- Определенная функция выше для оптимизации сценариев
- Определенная функция выше для оптимизации HTML
- Функция генерации нескольких изображений на изображение выше
Все, что нам нужно сделать сейчас, - это вызвать их при необходимости.
Давайте напишем наши задачи в соответствии с синтаксисом, который мы определили ранее
/*
* $.task('name','dependency array',function)
results in building a task object as below
task:{
'name':name,
'dep':[array of dependencies],
'fn':function
}
*/
//*@return returns a stream to notify on task completion
$.task('optimizeHtml', function() {
var src = ['**/*.html', '!{node_modules}/**/*.html'];
return minifyHtml(src);
});
//*@return returns a stream to notify on task completion
$.task('optimizeScripts', function() {
var src = ['js/**/*.js'];
return optimizeScripts(src);
});
//*@return returns a stream to notify on task completion
$.task('optimizeStyles', function() {
var src = ['css/**/*.css', 'fonts/google/**/*.css'];
return optimizeStyles(src);
});
//Take in a callback to ensure notifying the gulp engine, that the task is done
//required since, you are not returning a stream in this task
$.task('generateResponsiveImages', function(callback) {
var src = ['images/**/*.{jpg,png}'];
for (var i = widths.length - 1; i >= 0; i--) {
generateResponsiveImages(src, widths[i]);
}
callback();
});