gulp
Всестороннее руководство по автоматизации рабочего процесса с помощью Gulpjs -1 из 2

Angular 2 AngularJS CSS HTML JavaScript Laravel Node.js PHP React TypeScript
Поиск…


Синтаксис

  • 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>);

замечания

Продолжить чтение - создание задачи по умолчанию и настройка синхронизации браузера

Рекомендации

Пошаговое руководство по автоматизации процессов обработки вызовов для абсолютных новичков, которые я документировал iny в своем блоге

Загрузка всех плагинов из пакета.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')();

НОТА

На протяжении многих примеров, которые мы будем иметь в этой статье, мы имеем псевдоним

  1. gulp as $ и
  2. gulp-load-plugins как $$

просто для удобства печати.

Установка плагинов для реагирующих изображений | Css Minification | Js minification

Наша цель состоит в том, чтобы

  1. Сделайте ваши изображения соответствующими размерам и ширине, создавая батарею изображений различной ширины и уменьшая их
  2. Настроить Javascript
  3. Минимизируйте свои активы - JS / CSS / HTML, что позволит вам размещать более легкий, чем самый легкий код
  4. Просмотрите файлы css / js / image для изменения и перестройте оптимизацию
  5. Синхронизация изменений во время разработки, с браузером, обслуживающим ваш сайт.

Нам нужно несколько плагинов, поэтому давайте их установим. Пожалуйста, запустите все это в корневой папке проекта.

Плагины обработки изображений 

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

});


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow