Когда дело доходит до эффективного создания производительного внешнего веб-сайта, вы, вероятно, знаете, что должны многое сделать для оптимизации производительности, но на самом деле мало что делаете. И производительность, возможно, вы не знаете, чего вы не знаете, поэтому вы все еще делаете такие вещи, как ручное обновление страниц после сохранения файла, который вы разрабатываете.

Я хотел бы познакомить вас с концепцией под названием Task Runner. Средство запуска задач, как его название удобно идентифицирует, — инструмент, который запускает задачи, и под задачами я подразумеваю почти что угодно. Средство запуска задач позволяет вам открыть терминал и одной командой начать прослушивать сигналы для запуска задач. Например, из этой единственной команды он может:

  • Скомпилируйте свой SASS при сохранении файла SASS и автоматическом обновлении сайта в браузере.
  • Объедините/минимизируйте ваши JS-файлы в один небольшой файл и автоматически обновите сайт в браузере.
  • и Т. Д.

Вот еще краткий список, чтобы заставить вас задуматься:

  • Запустите Browsersync, чтобы вы могли открывать веб-страницы в различных браузерах на своем компьютере, планшете и мобильном телефоне. Затем нажмите и посмотрите, как все устройства обновляются в одном и том же месте.
  • Запуск и запуск портативного веб-сервера
  • Создание спрайта изображения из каталога изображений и размещение фоновых позиций в файле CSS.
  • Запустить тесты
  • FTP-код на сервер

1. Чем это может быть полезно для меня?

1.1 Производительность сайта

Возможно, вы не отдаете всего себя производительности. Возможно, для вас выступление является запоздалым размышлением или принятием желаемого за действительное. Вы строите вещи, работаете в рамках бюджета и просто запускаете их «в дикую природу».

А что, если бы у вас был способ получить лучшее из обоих миров — производительные интерфейсы без дополнительной работы или затрат?

1.2 Удобство и производительность

Возможно, вы используете множество различных программ/инструментов для достижения таких целей, как компиляция SASS в CSS. Возможно, вы все еще беспокоитесь о ручном добавлении префиксов поставщиков к своим правилам CSS (например, -moz-border-radius: 4px;). Или, может быть, вы просто игнорируете такие вещи, как объединение/минификация файлов JS, потому что не знаете, как это сделать эффективно.

Что, если бы вы могли запустить одну команду, и куча вещей просто происходила бы в фоновом режиме автоматически?

1.3 Сотрудничество

Как насчет того, чтобы группа людей работала над одним и тем же проектом, например над проектом с открытым исходным кодом? Это немного раздражает, не нужно и препятствует входу, если вам нужно диктовать такие команды, как «пожалуйста, скомпилируйте CSS в папку /dist и убедитесь, что он сжат…

Как здорово было бы поместить один файл конфигурации в корневую директорию проекта, который может запустить соавтор, и все будет работать так, как должно в том же стандарте?

2. Как мне начать?

2.1 Установите NodeJS

Установите NodeJS на свой компьютер.

NodeJS — это среда выполнения JavaScript, что означает, что вы можете писать что-то на JavaScript, и он может работать через Node на сервере или на вашем компьютере, а не ограничиваться запуском JS из браузера.

NodeJS поставляется с инструментом под названием NPM — это менеджер пакетов, который позволяет вам вводить такие команды, как npm install ABC в командной строке, и он установит плагин ABC (также известный как пакет) в ваш текущий каталог. Это менеджер, поэтому он также может делать другие интересные вещи, такие как удаление и обновление пакетов.

2.2 Установите Gulp (исполнитель задач)

Далее мы хотим установить Gulp, который я предпочитаю запускать задачи. Gulp написан на JS, теперь мы можем запускать приложения, написанные на JS, на нашем компьютере, потому что мы установили NodeJS.

В терминале просто введите:

npm install — global gulp

Gulp сам по себе ничего не делает. Нам нужны плагины для выполнения конкретных задач. Например. если мы хотим скомпилировать SASS, нам нужен плагин для этого — подробнее об этом далее.

3. Настройка проекта

Хорошо, у нас установлены инструменты, теперь нужно настроить и сообщить Gulp, что мы от него хотим.

Для этого примера я начну с простого. Я хочу, чтобы Gulp:

  • Автоматически компилировать SASS в CSS
  • файлы SASS будут в /assets/scss
  • полученный CSS должен находиться в /assets/css
  • он должен иметь автопрефикс, поэтому мне не нужно ничего добавлять к префиксу поставщика
  • когда я нажимаю сохранить файл SASS, он должен автоматически компилироваться
  • он должен сохранять исходные карты, чтобы я мог сказать в инструментах разработчика Chrome, в каком файле scss находится код.
  • Запустите Browsersync, чтобы я мог нажать Сохранить для любого файла PHP, SASS или JS, и он автоматически обновит любой браузер с открытым сайтом.

Некоторые дополнительные примечания — я использую PHP CMS (например, это может быть Wordpress, Drupal или что-то подобное) и разрабатываю на своей локальной машине.

3.1 Инициализация NPM

Исходя из приведенных выше требований, я немного погуглил и нашел несколько плагинов, которые действительно хорошо справляются со своей задачей — просто чтобы установить их в этот проект. Запустите следующее в своем терминале после того, как вы изменили каталог в каталог вашего проекта:

npm init

Введите как минимум название проекта, версию и описание — не стесняйтесь просто нажимать ввод для остальных вопросов.

Эта команда указывает NPM сохранить новый файл в каталоге вашего проекта с именем package.json. Package.json означает, что когда вы сотрудничаете, другие участники могут просто ввести sudo npm install, и он будет использовать этот файл package.json и загружать плагины, которые мы собираемся предопределить.

3.2 Установите плагины Gulp

Далее мы фактически собираемся установить плагины. Снова в терминале, как только вы окажетесь в каталоге проекта, введите:

sudo npm install gulp gulp-sourcemaps gulp-sass gulp-minify-css gulp-autoprefixer browser-sync — save

Все, что стоит после слова install, является плагинами. Единственным исключением является флаг сохранения в конце, который сообщает NPM о необходимости сохранения сведений о плагине в файле package.json.

3.3 Настройка проекта

Создайте gulpfile.js в корне каталога вашего проекта, который имеет следующее (я оставил для вас комментарии):

/*
 * Frontend Toolkit GulpFile
 * http://mcnam.ee/blog/front-end-performance-automation
 * @author Matt Mcnamee - http://www.mcnam.ee
 */

/*  Load plugins each of the plugins
    ************************* */
    var gulp = require('gulp'),
        sourcemaps = require('gulp-sourcemaps'),
        sass = require('gulp-sass'),
        minifycss = require('gulp-minify-css'),
        autoprefixer = require('gulp-autoprefixer'),
        browserSync = require('browser-sync'),
        reload = browserSync.reload;

/*  Task: Styles ($ styles)
    - Pulls in the /assets/scss/main.scss file
    - Auto prefixes for vendor specificity
    - Minifies the CSS
    - Generates source maps
    - Outputs to /assets/css/
    ************************* */
    gulp.task('styles', function () {
        gulp.src(['assets/scss/main.scss'])
            .pipe(sourcemaps.init())
                .pipe(sass())
                .pipe(autoprefixer({browsers: ['last 5 versions']}))
                .pipe(minifycss())
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest('assets/css/'))
            .pipe(reload({stream:true}));
    });

/*  Task: Browsersync ($ watch)
    - Opens browser-sync watching all php, js, css files
    - Any change and save will auto-update in the browser
    - Because it's PHP, it's running a proxy for my site running on sandbox.dev
    ************************* */
    gulp.task('watch', function() {
        var files = [
            'assets/css/*.css',
            'assets/js/*.js',
            './**/*.php'
        ];

        browserSync.init(files, {
            proxy: "sandbox.dev/", // THIS IS THE URL TO PROXY
            notify: false
        });
    });

/*  Task: Default ($ gulp)
    - Calls 'styles' task first then calls runs 'watch'
    ************************* */
    gulp.task('default', ['styles', 'watch'], function () {
        // When .scss files change, run styles task
        gulp.watch('assets/scss/**/*.scss', ['styles']);
    });

3.4 Наконец — запустите Gulp

Просто измените каталог на проект и запустите в терминале следующее:

gulp

Он предоставит вам URL-адрес, который вы сможете открыть в своем браузере — это просто для того, чтобы вы могли делать все причудливые вещи с перезагрузкой в ​​реальном времени.

Просто нажмите CTRL+C, если хотите остановить его работу.

Первоначально опубликовано на mcnam.ee.