Поиск по этому блогу

среда, 20 июля 2016 г.

Запусаем локальный сервер Material design light и строим демо-сайт

Надеялся, что после скачивания mdl с Github достаточно вручную скомпилировать galpfile.babel.js и запустить gulp serve, оказалось, что надо еще подгрузить плагин и скопипастить файл ..., а потом выяснилось, что в новом se-gulpfile.js 934 строки, и перед запуском сервера надо выполнить несколько команд для сборки (swig, css, assets, js ). Соответвствующие командв Gulp удалось довольно быстро найти и выполнить... Сегодня мне интересно понять, как работает шаблонизатор (gulp-swig)... Об этом в следующих постах, а здесь тоолько о том, как его запустить.

Итак, было счастье, но сегодня сначала закончилось..., а потом все вроде бы наладилось, но осадок остался...

На днях я установил babel глобально (пост Babel CLI globally - починяет примус и "Web Starter Kit"), скомпилировал

In [ ]:
{
  "presets": ["es2015"],
  // Remove the line below to enable ES2015 support.
  "only": "gulpfile.babel.js",
  "retainLines": true
}
In [ ]:
F:\stradorusite\MDL\material-design-lite-1>npm i babel-preset-es2015

> bufferutil@1.1.0 install F:\stradorusite\MDL\material-design-lite-1\node_modules\bufferutil
> node-gyp rebuild


F:\stradorusite\MDL\material-design-lite-1\node_modules\bufferutil>if not defined npm_config_node_gyp (node "C:\Program Files\n
odejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
Построение проектов в этом решении по одному. Чтобы включить параллельное построение, добавьте параметр "/m".
MSBUILD : error MSB3428: Загрузка компонента Visual C++ "VCBuild.exe" невозможна. Способы решения проблемы: 1) установка .NET
Framework 2.0 SDK, 2) установка Microsoft Visual Studio 2005 или 3) указание адреса компонента в системном пути, если компонен
т установлен в другом месте.  [F:\stradorusite\MDL\material-design-lite-1\node_modules\bufferutil\build\binding.sln]
gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:276:23)
gyp ERR! stack     at emitTwo (events.js:100:13)
gyp ERR! stack     at ChildProcess.emit (events.js:185:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Windows_NT 10.0.10586
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\b
in\\node-gyp.js" "rebuild"
gyp ERR! cwd F:\stradorusite\MDL\material-design-lite-1\node_modules\bufferutil
gyp ERR! node -v v5.6.0
gyp ERR! node-gyp -v v3.2.1
gyp ERR! not ok
npm WARN install:bufferutil@1.1.0 bufferutil@1.1.0 install: `node-gyp rebuild`
npm WARN install:bufferutil@1.1.0 Exit status 1

> utf-8-validate@1.1.0 install F:\stradorusite\MDL\material-design-lite-1\node_modules\utf-8-validate
> node-gyp rebuild


F:\stradorusite\MDL\material-design-lite-1\node_modules\utf-8-validate>if not defined npm_config_node_gyp (node "C:\Program Fil
es\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
Построение проектов в этом решении по одному. Чтобы включить параллельное построение, добавьте параметр "/m".
MSBUILD : error MSB3428: Загрузка компонента Visual C++ "VCBuild.exe" невозможна. Способы решения проблемы: 1) установка .NET
Framework 2.0 SDK, 2) установка Microsoft Visual Studio 2005 или 3) указание адреса компонента в системном пути, если компонен
т установлен в другом месте.  [F:\stradorusite\MDL\material-design-lite-1\node_modules\utf-8-validate\build\binding.sln]
gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:276:23)
gyp ERR! stack     at emitTwo (events.js:100:13)
gyp ERR! stack     at ChildProcess.emit (events.js:185:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Windows_NT 10.0.10586
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\b
in\\node-gyp.js" "rebuild"
gyp ERR! cwd F:\stradorusite\MDL\material-design-lite-1\node_modules\utf-8-validate
gyp ERR! node -v v5.6.0
gyp ERR! node-gyp -v v3.2.1
gyp ERR! not ok
npm WARN install:utf-8-validate@1.1.0 utf-8-validate@1.1.0 install: `node-gyp rebuild`
npm WARN install:utf-8-validate@1.1.0 Exit status 1
material-design-lite@1.1.3 F:\stradorusite\MDL\material-design-lite-1
+-- babel-preset-es2015@6.9.0  extraneous
+-- browser-sync@2.13.0
| `-- chokidar@1.5.1
|   `-- readdirp@2.1.0
|     `-- minimatch@3.0.2
+-- del@2.2.1
| +-- globby@5.0.0
| | `-- glob@7.0.5
| |   `-- minimatch@3.0.2
| `-- rimraf@2.5.2
|   `-- glob@7.0.5
|     `-- minimatch@3.0.2
+-- gulp-if@2.0.1
| `-- gulp-match@1.0.2
|   `-- minimatch@3.0.2
+-- gulp-jscs@3.0.2
| `-- jscs@2.11.0
|   `-- minimatch@3.0.2
`-- gulp-sass@2.0.4
  `-- node-sass@3.8.0
    +-- glob@7.0.5
    | `-- minimatch@3.0.2
    +-- node-gyp@3.4.0
    | `-- minimatch@3.0.2
    `-- sass-graph@2.1.2
      +-- glob@7.0.5
      | `-- minimatch@3.0.2
      `-- lodash@4.13.1

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.14

F:\stradorusite\MDL\material-design-lite-1>

Компилируем (никак не привыкну к js компиляции)

In [ ]:
F:\stradorusite\MDL\material-design-lite-1>babel gulpfile.babel.js --out-file se1-gulpfile.js

Используем опцию --gulpfile для запуска с новым se1-gulpfile.js

In [ ]:
F:\stradorusite\MDL\material-design-lite-1>gulp --gulpfile se1-gulpfile.js
[13:02:41] Using gulpfile F:\stradorusite\MDL\material-design-lite-1\se1-gulpfile.js
[13:02:41] Starting 'clean'...
[13:02:42] Finished 'clean' after 1.35 s
[13:02:43] Starting 'default'...
[13:02:43] Starting 'styles'...
[13:02:51] Starting 'styles-grid'...
[13:02:56] styles-grid all files 18.77 kB
[13:02:56] Finished 'styles-grid' after 1.66 s
[13:03:01] styles all files 581.73 kB
[13:03:01] Finished 'styles' after 19 s
[13:03:01] Starting 'lint'...
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\mdlComponentHandler.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\animation\demo.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\checkbox\checkbox.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\data-table\data-table.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\button\button.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\icon-toggle\icon-toggle.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\layout\layout.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\radio\radio.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\progress\progress.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\menu\menu.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\ripple\ripple.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\slider\slider.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\snackbar\snackbar.js :
     1 |/**
-----------^
     2 | * Copyright 2015 Google Inc. All Rights Reserved.
     3 | *


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\spinner\spinner.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\switch\switch.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\textfield\textfield.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\third_party\rAF.js :
     1 |// Source: https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js
-------------------------------------------------------------------------------------------------------^
     2 |// Adapted from https://gist.github.com/paulirish/1579671 which derived from
     3 |// http://paulirish.com/2011/requestanimationframe-for-smart-animating/


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\tabs\tabs.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\src\tooltip\tooltip.js :
     1 |/**
-----------^
     2 | * @license
     3 | * Copyright 2015 Google Inc. All Rights Reserved.


1 code style error found.
Invalid line break at F:\stradorusite\MDL\material-design-lite-1\gulpfile.babel.js :
     1 |/**
-----------^
     2 | *
     3 | *  Material Design Lite

Illegal space before opening round brace at F:\stradorusite\MDL\material-design-lite-1\gulpfile.babel.js :
   532 |
   533 |//My test of serve
   534 |gulp.task('serve:se', function () {
--------------------------------------^
   535 |  $.connect.server({
   536 |    root: 'templates',

Illegal space after opening curly brace at F:\stradorusite\MDL\material-design-lite-1\gulpfile.babel.js :
   541 |  watch();
   542 |
   543 |  gulp.src('dist/index.html').pipe($.open({ uri: 'http://localhost:5000' }));
---------------------------------------------------^
   544 |});
   545 |

Illegal space before closing curly brace at F:\stradorusite\MDL\material-design-lite-1\gulpfile.babel.js :
   541 |  watch();
   542 |
   543 |  gulp.src('dist/index.html').pipe($.open({ uri: 'http://localhost:5000' }));
--------------------------------------------------------------------------------^
   544 |});
   545 |

; and  Generate release archive containing just JS, CSS, Source Map deps should have at most 2 line(s) between them at F:\strad
orusite\MDL\material-design-lite-1\gulpfile.babel.js :
   542 |
   543 |  gulp.src('dist/index.html').pipe($.open({ uri: 'http://localhost:5000' }));
   544 |});
-----------^
   545 |
   546 |


5 code style errors found.
[13:03:43] 'lint' errored after 42 s
[13:03:43] Error in plugin 'gulp-jscs'
Message:
    JSCS failed for: F:\stradorusite\MDL\material-design-lite-1\src\mdlComponentHandler.js, F:\stradorusite\MDL\material-design
-lite-1\src\animation\demo.js, F:\stradorusite\MDL\material-design-lite-1\src\checkbox\checkbox.js, F:\stradorusite\MDL\materia
l-design-lite-1\src\data-table\data-table.js, F:\stradorusite\MDL\material-design-lite-1\src\button\button.js, F:\stradorusite\
MDL\material-design-lite-1\src\icon-toggle\icon-toggle.js, F:\stradorusite\MDL\material-design-lite-1\src\layout\layout.js, F:\
stradorusite\MDL\material-design-lite-1\src\radio\radio.js, F:\stradorusite\MDL\material-design-lite-1\src\progress\progress.js
, F:\stradorusite\MDL\material-design-lite-1\src\menu\menu.js, F:\stradorusite\MDL\material-design-lite-1\src\ripple\ripple.js,
 F:\stradorusite\MDL\material-design-lite-1\src\slider\slider.js, F:\stradorusite\MDL\material-design-lite-1\src\snackbar\snack
bar.js, F:\stradorusite\MDL\material-design-lite-1\src\spinner\spinner.js, F:\stradorusite\MDL\material-design-lite-1\src\switc
h\switch.js, F:\stradorusite\MDL\material-design-lite-1\src\textfield\textfield.js, F:\stradorusite\MDL\material-design-lite-1\
src\third_party\rAF.js, F:\stradorusite\MDL\material-design-lite-1\src\tabs\tabs.js, F:\stradorusite\MDL\material-design-lite-1
\src\tooltip\tooltip.js, F:\stradorusite\MDL\material-design-lite-1\gulpfile.babel.js
[13:03:43] 'default' errored after 1 min
[13:03:43] Error in plugin 'run-sequence(lint)'
Error
    at finish (F:\stradorusite\MDL\material-design-lite-1\node_modules\run-sequence\index.js:56:13)
    at Gulp.onError (F:\stradorusite\MDL\material-design-lite-1\node_modules\run-sequence\index.js:67:4)
    at emitOne (events.js:95:20)
    at Gulp.emit (events.js:182:7)
    at Gulp.Orchestrator._emitTaskDone (F:\stradorusite\MDL\material-design-lite-1\node_modules\orchestrator\index.js:264:8)
    at F:\stradorusite\MDL\material-design-lite-1\node_modules\orchestrator\index.js:275:23
    at finish (F:\stradorusite\MDL\material-design-lite-1\node_modules\orchestrator\lib\runTask.js:21:8)
    at DestroyableTransform.<anonymous> (F:\stradorusite\MDL\material-design-lite-1\node_modules\orchestrator\lib\runTask.js:52
:4)
    at DestroyableTransform.f (F:\stradorusite\MDL\material-design-lite-1\node_modules\once\once.js:17:25)
    at emitOne (events.js:95:20)

F:\stradorusite\MDL\material-design-lite-1>
In [ ]:
####Сервер запустился, но ... в папке только файлы стилей
In [ ]:
F:\stradorusite\MDL\material-design-lite-1>gulp serve --gulpfile se1-gulpfile.js
[13:12:15] Using gulpfile F:\stradorusite\MDL\material-design-lite-1\se1-gulpfile.js
[13:12:15] Starting 'serve'...
[13:12:28] Finished 'serve' after 13 s
[13:12:28] Server started http://localhost:5000
[13:12:28] LiveReload started on port 35729
In [ ]:
####Сгенерируем pages в **dist** (из doc/_pages)
In [ ]:
F:\stradorusite\MDL\material-design-lite-1>gulp pages --gulpfile se1-gulpfile.js
[15:50:59] Using gulpfile F:\stradorusite\MDL\material-design-lite-1\se1-gulpfile.js
[15:50:59] Starting 'demoresources'...
[15:51:02] Finished 'demoresources' after 2.69 s
[15:51:02] Starting 'demos'...
[15:51:07] Finished 'demos' after 5.39 s
[15:51:07] Starting 'components'...
[15:51:08] Finished 'components' after 1.31 s
[15:51:08] Starting 'pages'...
[15:51:10] Finished 'pages' after 1.36 s

F:\stradorusite\MDL\material-design-lite-1>

Теперь скопируем все из doc/_assets/ в dist/assets

In [ ]:
F:\stradorusite\MDL\material-design-lite-1>gulp assets --gulpfile se1-gulpfile.js
[15:57:27] Using gulpfile F:\stradorusite\MDL\material-design-lite-1\se1-gulpfile.js
[15:57:27] Starting 'assets'...
[15:58:09] gulp-imagemin: Minified 88 images (saved 723.24 kB - 9.9%)
[15:58:28] Finished 'assets' after 1 min

Исправим ошибку http://localhost:5000/material.min.js 404 (Not Found)

И сгенерируем material.min.js

In [ ]:
F:\stradorusite\MDL\material-design-lite-1>gulp styles:gen --gulpfile se1-gulpfile.js
[16:12:04] Using gulpfile F:\stradorusite\MDL\material-design-lite-1\se1-gulpfile.js
[16:12:04] Starting 'styles'...
[16:12:20] styles all files 581.73 kB
[16:12:20] Finished 'styles' after 16 s
[16:12:20] Starting 'styles:gen'...
[16:12:24] Finished 'styles:gen' after 3.8 s

Заполним папку F:\stradorusite\MDL\material-design-lite-1\dist\templates

Здесь не только копируются файлы из ./templates (в ней лежат сверстанные образцы блога, портфолио), но и переписываются пути к фалам стилей

In [ ]:
F:\stradorusite\MDL\material-design-lite-1>gulp templates  --gulpfile se1-gulpfile.js
[13:38:44] Using gulpfile F:\stradorusite\MDL\material-design-lite-1\se1-gulpfile.js
[13:38:44] Starting 'templates:static'...
[13:38:45] Starting 'templates:images'...
[13:38:51] Starting 'templates:fonts'...
[13:38:51] Starting 'templates:styles'...
[13:38:55] Finished 'templates:fonts' after 4.2 s
[13:39:03] Finished 'templates:styles' after 12 s
[13:39:08] Finished 'templates:static' after 24 s
[13:39:23] gulp-imagemin: Minified 70 images (saved 41.51 kB - 0.7%)
[13:39:26] Finished 'templates:images' after 42 s
[13:39:26] Starting 'templates'...
[13:39:26] Finished 'templates' after 30 μs


Посты чуть ниже также могут вас заинтересовать
Автор: на
Ярлыки: , , ,

2 комментария:

Blogger комментирует...

Invest in Ripple on eToro the World's Leading Social Trading Network!

Join millions who have already found better methods for investing in Ripple.

Learn from profitable eToro traders or copy their trades automatically

29 октября 2018 г. в 14:42
Tejuteju комментирует...

very informative blog and useful article thank you for sharing with us , keep posting learn more Ruby on Rails Online Training Bangalore

20 ноября 2018 г. в 09:50

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)