Компиляция SASS и Postcss с угловой CLI

Вступление

Для новичков к углому 2 можно выяснить, как настроить проект впервые со всем, что вы должны учитывать. К счастью, угловая CLI заботится о сложности, которая поставляется с сборкой и развертыванием трубопроводов, но это удобство приходит по цене. Внезапно вы во власти Кли и понятия не имеете, как это работает!

В этом руководстве представит некоторые ключевые концепции, когда дело доходит до настройки сборки угловых CLI. Демонстрируя типичный корпус использования, составление выхода препроцессора CSS, мы узнаем, как может быть настроена угловая сборка CLI.

Начиная

Следуйте инструкциям в Readme на угловой CLI Страница GitHub Для начала нового проекта.

После того, как вы установили все зависимости для запуска CLI, используйте эту команду в вашем терминале, чтобы начать новый проект:

ng new project-name

Заменив название проекта самостоятельно.

Sass и угловой CLI

Вне коробки угловые CLI скомпилируют SASS, который загружается компонентом, но он не обрабатывает глобальные CSS. Этот учебник поможет вам настроить сборку для компиляции глобальных CSS, а также позволить вам использовать переменные SASS, объявленные глобально внутренним уровнем компонентов SASS. Вы также узнаете, как использовать PostCSS для дальнейшей обработки CSS после компилирования SASS, включая Auto Prefixing для более старых браузеров и минификацию, поэтому ваши CSS будут загружаться еще быстрее для ваших пользователей.

Брокколи

Если вы запускаете NG служить , возможно, вы заметили угловую CLI использует пакет под названием BroccolityPescriptCompiler Отказ Этот пакет компилирует TypeScript в вашем угловом проекте в JavaScript, и он принадлежит сообществу пакетов, используемых с брокколи.js.

Для получения дополнительной информации о брокколи, посетите Сайт проекта Отказ

Короче говоря, брокколи – это сборка и развертывание трубопровода с растущим сообществом разработчика. Это основание для Ember-Cli, какую угловую CLI происходит от.

Поскольку угловые CLI построен из брокколи, у нас есть доступ ко всем плагинам сообщества. Вы можете просмотреть все из них через NPM Отказ

Эти плагины могут быть использованы для настройки сборки вашего углового проекта CLI.

Настройка сборки

angular-cli-build.js Файл в корневом каталоге вашего проекта находится там, где сборка может быть настроена. Когда вы начинаете с нового проекта, этот файл выглядит так:

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)'
    ]
  });
};

Экземпляр Angular2App возвращается в Module.exports angular-cli-build.js Отказ

Angular2App это то, что называется брокколи дерева. Дерево может быть любую строку, представляющую путь каталога или в этом случае, Объект который соответствует спецификации API плагина Broccoli.js. Результат этой сборки, что возвращается в Module.exports, это дерево файлов, которые составляют приложение для котельной угловой 2. Обратите внимание, как Angular2App может быть настроен с опциями. Пример выше указывает Массив файлов GLASS, которые это приложение загрузится в /dist/Vendor каталог.

Мы можем добавить другой вариант для этой сборки, чтобы настроить компилятор SASS. Как раз перед VENDORNPMFILES Собственность добавляет другое свойство под названием SassCompiler Как в следующем примере:

sassCompiler: {
  includePaths: [
    'src/style'
   ]
},
  vendorNpmFiles: [

SASSCOMPILER принимает те же аргументы в том, что узел-сасс делает. Полный список вариантов, доступных на Страница Github узла Sass Отказ

Я решил использовать опцию Включить и установить путь к моим глобальным сапоже: SRC/Style Отказ Этому не будет компилировать глобальный SASS, но он настраивает компилятор Node-Sass для поиска файлов при использовании @import Директива. Теперь вы можете импортировать SASS из SRC/Style где угодно в вашем приложении.

Это решает критическую проблему с CLI. По умолчанию вы не можете ссылаться на SASS в другом файле с помощью @import Отказ Теперь, настроив компилятор SASS, вы должны быть в состоянии.

Компилировать Sass.

Для компиляции SASS нам нужно установить еще несколько пакетов из NPM.

npm i broccoli-sass broccoli-merge-trees lodash glob --save

Эта команда устанавливает 4 инструмента, которые нам нужно скомпилировать SASS.

Broccoli-Sass – это плагин, который будет компилировать SASS с узлом Sass.
Broccoli-Merge-Dels позволяет выполнять несколько процессов сборки, а затем объединить их вместе в одном одном дереве, необходимом для Module.exports.
Лодаш и шаблон будут использоваться в качестве утилит для форматирования наших файлов SASS, чтобы они могли быть скомпилированы.

Особая благодаря @intellix на Github для этого метода.

Как только вы устанавливаете зависимости, импортируйте их в angular-cli-build.js вот так:

const Angular2App = require('angular-cli/lib/broccoli/angular2-app');
const compileSass = require('broccoli-sass');
const mergeTrees = require('broccoli-merge-trees');
const _ = require('lodash');
const glob = require('glob');

Так как мы пишем ES6, я решил изменить VAR в Const.

Теперь мы должны немного изменять модуль. Экспорты, чтобы мы могли экспортировать несколько деревьев, а не только Angular2App.

module.exports = function(defaults) {
  let appTree = new Angular2App(defaults, {
    sassCompiler: {
      includePaths: [
        'src/style'
      ]
    },
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)'
    ]
  });
  return mergeTrees([appTree], { overwrite: true });   
};

Беги NG служить Чтобы проверить строительные работы.

Обратите внимание, что все, что мы делали, было вместо того, чтобы возвращать Apptree напрямую, мы делаем это переменной, используя Пусть Затем вернулся Mergetrees Отказ Mergetrees Первый аргумент – это Массив Затем необязательно второй аргумент с Объект вариантов. Установить Перезаписать: правда Потому что мы хотим переопределить компиляцию SASS по умолчанию для нашего нового пользовательского компиляции.

Добавьте следующее в Module.exports :

let sass = mergeTrees(_.map(glob.sync('src/**/*.scss'), function(sassFile) {
  sassFile = sassFile.replace('src/', '');
  return compileSass(['src'], sassFile, sassFile.replace(/.scss$/, '.css'));
  }));

Этот фрагмент требует, чтобы ваш глобальный Sass расположен в /SRC Папка, но в качестве дополнительного побочного эффекта также компилирует остальную часть SASS уровня компонентов в том же каталоге.

Давайте немного сломаемся.

Помните, как я сказал, брокколи деревья могут быть по файлам? В этом случае мы используем Лоташ и шаблон Чтобы получить массив файлов, которые имеют .scss расширение.

MergetRees может предпринять второй аргумент в виде обратного вызова функции. Если вы должны были войти Sassfile Вы найдете сборку итерацию по поводу файлов для каждого .scss Файл в вашем проекте /SRC каталог. Мы собираемся преобразовать путь слегка за Colvilesass плагин, удаление SRC/ Отказ COMALSASS берет дерево, которое необходимо скомпилировать (в данном случае «SRC»), путь к файлу для файла SASS и путь к файлу файла CSS назначения. Поскольку файлы являются итерацией, каждый файл проходит через эту функцию и будет скомпилирован в CSS.

Наконец, давайте добавим дерево Sass на вывод сборки.

return mergeTrees([appTree, sass], { overwrite: true });

Теперь дерево Sass будет перезаписать SASS Apptree Sass, касаясь только CSS, а не на другие файлы в нашем проекте.

Беги NG служить Чтобы проверить строительные работы.

Postcss

Еще лучше, мы можем использовать функциональность PostCS для дальнейшего увеличения наших CSS после компиляции. Чтобы узнать больше о PostCSS, посетите Сайт проекта Отказ Две типичные задачи, которые могут обрабатывать PostCSS, являются AutoPrefixing CSS и CSS-минификацию, поэтому давайте продолжим и реализуем их в сборке.

Установите следующие три зависимости через NPM:

NPM I Broccoli-Postcss Postcsss-cssnext cssnano –save

Broccoli-Post-CSS – это плагин для брокколи, который интегрирует трубопровод PostCSS
postcsss-cssnext – плагин Postcss, который обрабатывает AutoPrefixer
CSSNANO – это инструмент для минификации CSS

Добавьте эти пакеты на вершину angular-cli-build.js Отказ

const compileCSS = require('broccoli-postcss');
const cssnext = require('postcss-cssnext');
const cssnano = require('cssnano');

PostCSS принимает варианты через объект, который позволяет PostCSS знать, какие плагины для загрузки и как их использовать.

var options =  {
  plugins: [
    {
      module: cssnext,
      options: {
        browsers: ['> 1%'],
        warnForDuplicates: false
      }
    },
    {
      module: cssnano,
      options: {
        safe: true,
        sourcemap: true
      }
    }
  ]
};

Здесь мы говорим Postcs использовать два модуля: cssnext и CSSNANO и дополнительно настроить эти плагины.

Внутри модуля. Экспорты, создайте другую переменную под названием CSS вот так:

 let css = compileCSS(sass, options);

Здесь мы пропускаем дерево Sass (который вывод файлов файлов .css файлов) и добавленные выше варианты.

Теперь добавьте дерево CSS в Mergetrees, которые возвращаются в Module.exports вот так:

return mergeTrees([appTree, sass, css], { overwrite: true });

Важно, что деревья в приведенном выше порядке, поэтому они правильно переопределяют друг друга.

Беги NG служить Чтобы проверить строительные работы.

Вы должны увидеть что-то похожее на:

Build successful - 2592ms.

Slowest Trees                                 | Total               
----------------------------------------------+---------------------
BroccoliTypeScriptCompiler                    | 1047ms              
vendor                                        | 783ms               
PostcssFilter                                 | 374ms               

Slowest Trees (cumulative)                    | Total (avg)         
----------------------------------------------+---------------------
BroccoliTypeScriptCompiler (1)                | 1047ms              
vendor (1)                                    | 783ms               
PostcssFilter (1)                             | 374ms               
SassCompiler (24)                             | 130ms (5 ms)

Заключение

Настроив угловую CLI Build для компиляции Sass и Integrate PostCSS, мы видели, как настроить сборки и запускать задачи параллельно, используя Mergetrees. Этот урок может быть сделан на шаг дальше с помощью множества плагинов, доступных для сообщества брокколи. Теперь, когда вы приняли угловую CLI, добро пожаловать в сообщество и за помощью и дополнительную информацию проверить канал Gitter для CLI.

Вот законченный angular-cli-build.js :

const Angular2App = require('angular-cli/lib/broccoli/angular2-app');
const compileSass = require('broccoli-sass');
const compileCSS = require('broccoli-postcss');
const cssnext = require('postcss-cssnext');
const cssnano = require('cssnano');
const mergeTrees = require('broccoli-merge-trees');
const _ = require('lodash');
const glob = require('glob');

var options =  {
  plugins: [
    {
      module: cssnext,
      options: {
        browsers: ['> 1%'],
        warnForDuplicates: false
      }
    },
    {
      module: cssnano,
      options: {
        safe: true,
        sourcemap: true
      }
    }
  ]
};

module.exports = function(defaults) {
  let appTree = new Angular2App(defaults, {
    sassCompiler: {
      includePaths: [
        'src/style'
      ]
    },
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)'
    ]
  });
  
  let sass = mergeTrees(_.map(glob.sync('src/**/*.scss'), function(sassFile) {
    sassFile = sassFile.replace('src/', '');
    return compileSass(['src'], sassFile, sassFile.replace(/.scss$/, '.css'));
  }));

  let css = compileCSS(sass, options);
  return mergeTrees([appTree, sass, css], { overwrite: true }); 
};

Вступление

Начиная

Sass и угловой CLI

Брокколи

Настройка сборки

Компилировать Sass.

Postcss

Заключение

Читайте ещё по теме: