Page 53 - Браун Э. - Изучаем JavaScript. Руководство по созданию современных веб-сайтов - 2017
P. 53

Gulp использует концепцию конвейера (pipeline). Мы начинаем с сообщения Gulp
       о расположении интересующих нас файлов: src  ( "еsб / * *   / * . j  " ) .   Вы могли бы за­
                                                                s
       даться вопросом о  * *; это шаблон для "любого каталога, включая подкаталоги': Та­
       ким образом, этот фильтр выберет все файлы  . j s в каталоге  s б   и любых его под­
                                                                е
       каталогах, независимо от глубины. Затем мы транспортируем (pipe) эти файлы ис­
       ходного кода в Babel, который преобразует их из ЕSб в ESS. На завершающем этапе
       откомпилированный код ESS транспортируется по назначению, в каталог dist. Gulp
       сохранит  имена и  структуру каталогов  ваших  файлов  исходного кода.  Например,
            e
       файл  s б / a . j s   будет откомпилирован в dis t / a . j s , а e s б / a / Ь / c . j s  - в dis / a /
                                                                               t
                                                                      е
       Ы  j s. Мы повторим тот же процесс для файлов в каталоге pu Ы  i c /   s б .
         с
           .
          Мы еще не изучили ЕSб, но давайте создадим файл примера кода ЕSб и удосто­
       веримся в работоспособности нашей конфигурации Gulp. Создайте файл esб / t est .
       j s, содержащий часть новых средств ЕSб (не расстраивайтесь, если не понимаете со­
       держимое этого файла; впоследствии вы все поймете!).
       ' u se  strict ' ;
       / /  средство  еs б:  блок  "левых "  объявлений
       const  sentences  =  [
             subj ect :  ' J avaScript ' ,   verb :  ' i s  ' ,   obj ect :  ' g reat '  } ,
             subj ect :  ' E lephan s ' ,   verb :  ' a r ' ,   ob e ct :  ' l arge '  } ,
                             t
                                                j
                                           e
       ]  ;
       1 1   средство  еsб:  деструктуризация  объекта
                       b
                                      j
       function  say ( {   su j e c t ,   verb ,  ob e ct  } )    {
           / /   средство  еs б:  строки  шаблона
                     g
           console . l o ( ' $  { s ubj ect }  $ { verb }  $ { o bjec } ' ) ;
                                                t
       }
       1 1   средство  еs б:  for  . of

                          .
       for ( l et  s  of  sentences )  {
             y
           sa ( s ) ;
          Теперь создайте  копию этого файла в каталоге pu Ы  i c / e s б   (вы можете изменить
       содержимое массива sentences, если хотите удостовериться, что ваши файлы отли­
       чаются). Т е перь введите gulp и просмотрите каталоги dist и pu Ы  i c / dist. Вы уви­
       дите файл test . j s в обоих каталогах. Давайте откроем этот файл и посмотрим, чем
       он отличается от своего эквивалента ЕSб.
          Т е перь давайте попробуем запустить код ЕSб непосредственно.

       $  node  esб/test . j s
       /home/ethan/ l j e 3 / es 6/test . j s : 8
                                      j
       function  say ( {   subj ect ,  verb,  ob e ct  } )    {
       SyntaxError :  Unexpected  token
           at  exports  . run n ThisContext  ( v m  . j s : 5 3  : 1 6 )
                        i
           a t   Module . _compile  (module . j s  : 3 7 4 : 2 5 )
   48   49   50   51   52   53   54   55   56   57   58