Скачать gulp plate - gulp plate Скачать исходный код

gulp plate

Другие категории

1.0.0

Скачать

Gulp-тарелка

Шаблон Gulp и система сборки.

Включает следующие инструменты, задачи и рабочие процессы:

Webpack как сборщик модулей JavaScript
webpack-dev-middleware для оперативной перезагрузки (при компиляции в памяти для более быстрого восстановления во время разработки)
Синтаксис ES2015 перенесен с помощью Babel
ESLint для проверки JavaScript
Удобнее для форматирования кода JavaScript.
SASS скомпилирован с использованием libsass, карт исходного кода, автопрефиксера и проверки Sass.
BrowserSync для живой перезагрузки и статического сервера
svgo для сжатия SVG.
gulp-svg-symbols для создания спрайта значка SVG с тегами <symbol> и <use>

Ищете версию SilverStripe? Посмотрите здесь.

Зависимости/Установка

Gulp-plate зависит от следующих технологий:

node.js как локальная среда хоста для gulp (версия 7.5.0 или выше) [1]
gulp как диспетчер задач
Yarn как менеджер зависимостей

[1] Рекомендуется устанавливать узел через nvm (менеджер версий узла).

Чтобы начать:

$ git clone https://github.com/arillo/gulp-plate myProject
$ cd myProject
$ rm -r .git    # Remove the link to the git repo
$ yarn          # Install dependencies

Команды

 # Equivalent
$ yarn run build

Запустите задачу по умолчанию и создайте версию сайта для разработчиков в папке dist .

 # Equivalent
$ yarn start
$ yarn run watch

Запустите задачу по умолчанию один раз, запустите сервер и наблюдайте за изменениями файлов.

 # Equivalent
$ yarn run prod

Установите NODE_ENV='production' и создайте рабочую версию сайта, сжимая js, css и html. Это папка, которая должна находиться на сервере.

Если вы хотите запустить любую другую задачу gulp, просто добавьте имя задачи к команде build /gulp:

 # Equivalent
$ yarn run build sprite
$ yarn run b sprite
$ yarn run gulp sprite
$ yarn run g sprite

Важный:

Каталог dist будет удаляться каждый раз при запуске build/watch/prod. Не вносите никаких изменений в каталог dist .

Структура папок

myProject/
  gulpfile.js/  # gulp tasks
  src/
    icons/      # SVG files to be included in he the sprite
    images/     # other images
    js/         # js code
    sass/       # Sass code, SCSS and Sass indented syntax possible
    html/       # html templates
      data/     # data in json format
      layouts/  # reusable layout templates
      macros/   # Nunjucks macros
      shared/   # reusable snippets

Конфигурация

Все пути и настройки плагина собраны в централизованный файл: ./gulpfile.js/config.js . Адаптируйте пути и настройки к структуре и потребностям вашего проекта.

Конфигурация SVG-спрайта

Спрайт создает изображение с именем sprite.svg в ./dist/images/ . Он также создает файл Sass с именем: _sprite.scss в ./src/sass/base/ .

Сгенерированные файлы Sass содержат полезную информацию о значках спрайтов, например, размеры каждого значка. Файл будет меняться каждый раз при добавлении, удалении или изменении значка, не редактируйте его вручную. Вы можете изменить файл, изменив шаблон в ./gulpfile.js/tpl/_sprite.scss .

Статические активы

Чтобы переместить статические ресурсы из исходного каталога без преобразований, например файлы шрифтов. Добавьте пути src и dest в static массив в config.js

HTML-шаблоны

Шаблоны используют Nunjucks. Дополнительную информацию о том, как их использовать, см. в документации.

Сасс

По умолчанию используется синтаксис Sass с отступом. Основные файлы Sass должны иметь расширение .sass , иначе компилятор выйдет из строя. Частичные файлы могут быть как .sass , так и .scss .

Включить CSS-файлы сторонних поставщиков

Чтобы включить сторонние стили в свой CSS, включите их в файл main.sass :

 // main.sass

@import url( ' ../../node_modules/normalize.css/normalize.css ' ) ;

Плагин postcss затем встроит файлы, сохраняя исходные карты. После компиляции Sass.

Помните, что Sass переместит операторы @import url(...) в начало сгенерированного файла CSS, поэтому независимо от места включения эти стили всегда будут включаться в начало файла.

Ошибки Sass-lint

На момент написания sass-lint дает сбой, когда обнаруживает пустые селекторы. Это ошибка, ее можно предотвратить, добавив комментарий с отступом // после пустого селектора:

 .mySelector
  //

.mySelector_child
  text-align : center

JavaScript

Файл ./gulpfile.js/config.js содержит полную конфигурацию веб-пакета (см. переменную js ). Не стесняйтесь изменять по мере необходимости. Имейте в виду, что babel-loader всегда должен присутствовать, поскольку eslint будет полагаться на него.

Конфигурация будет немного изменена в зависимости от выполняемой вами задачи. При использовании задачи просмотра компиляция Javascript будет происходить в памяти, поэтому файлы не записываются на диск ( ./dist/js/ будет пустым), а webpack-hot-middleware/client будет внедрен во все пакеты для работы оперативной перезагрузки. . При сборке для производства для минификации используется webpack.optimize.UglifyJsPlugin . Взгляните на ./gulpfile.js/util/getWebpackConfig.js чтобы точно увидеть, что происходит, и при необходимости измените его.

Вот несколько полезных рецептов, которые помогут вам начать работу:

Объявите псевдонимы для часто требуемых файлов

 // gulpfile.js/config.js

const js = {
  resolve : {
    extensions : [ '.js' ] ,
    alias : {
      // Path relative to `context`
      myModule : './myModule/myModule.js' ,
    } ,
  } ,
} ;

 // src/js/some-file.js

import myModule from 'myModule' ;

myModule ( ) ;

Документы: https://webpack.js.org/configuration/resolve/#resolve-alias.

Подстановка модулей, отличных от CommonJs

плагин jQuery

 // gulpfile.js/config.js

const webpack = require ( 'webpack' ) ;
//...
const js = {
  plugins : [
    // Make jQuery global, expected by the plugin.
    new webpack . ProvidePlugin ( {
      'window.jQuery' : 'jquery' ,
    } ) ,
  ] ,
  //...
  resolve : {
    // Add extensions to prevent linting errors.
    extensions : [ '.js' , '.json' ] ,
    // Path from `node_modules`, where `myModule` is the module name.
    alias : {
      myModule : 'myModule/dist/myModule.js' ,
    } ,
  } ,
} ;

 // src/js/main.js

import $ from 'jquery' ;
import 'myModule' ;

$ ( '.js-selector' ) . myModule ( ) ;

Обычный модуль JavaScript

 // gulpfile.js/config.js

const js = {
  //...
  resolve : {
    // Add extensions to prevent linting errors.
    extensions : [ '.js' , '.json' ] ,
    // Path from `node_modules`, where `myModule` is the module name.
    alias : {
      myModule : 'myModule/dist/myModule.js' ,
    } ,
  } ,
  module : {
    rules : [
      // ...
      {
        include : require . resolve ( 'myModule/dist/myModule.js' ) ,
        loader : 'exports-loader?MyModule' ,
      } ,
    ] ,
  } ,
} ;

 // src/js/main.js

import $ from 'jquery' ;
import MyModule from 'myModule' ;

const myInstance = new MyModule ( ) ;

Документы: https://webpack.js.org/guides/shimming/.

Несколько пакетов JavaScript и совместное использование кода поставщиков

Чтобы создать несколько пакетов, добавьте в entry целые элементы.

 // gulpfile.js/config.js

const js = {
  // ...
  entry : {
    main : [ './main.js' ] ,
    other : [ './someFile.js' , './sotherOtherFile.js' ] ,
  } ,
  // ...
} ;

Это создаст два пакета: main.js other.js .

Если вы сделаете это, вероятно, будет хорошей идеей создать еще один пакет, содержащий весь общий код поставщика:

 // gulpfile.js/config.js

const webpack = require ( 'webpack' ) ;
//...
const js = {
  // ...
  entry : {
    main : [ './main.js' ] ,
    other : [ './someFile.js' , './sotherOtherFile.js' ] ,
    // List vendor modules here:
    vendor : [ 'jquery' , 'svg4everybody' ] ,
  } ,
  // ...
  plugins : [
    new webpack . optimize . CommonsChunkPlugin ( {
      name : 'vendor' , // Specify the common bundle's name
    } ) ,
  ] ,
  // ...
} ;