Все мои попытки запустить Google Web Starter Kit или Material design light приводили к тому,что Gulp работал дефективно и стили не подгружались... При этом Gulp ругался при любом обращении к нему Requiring external module babel-register... Никакие установки и переустановки модулей на помогали... не было решений и в сети. (Смотри мои предыдущие посты на эту тему) Здесь показан процесс установки babel-cli с последующей тупой компиляцией gulpfile.babel.js в se-gulpfile.js, но пост начинается с попыток самоанализа - почему нашел решение только через две надели?.
Babel CLI globally While you can install Babel CLI globally on your machine, it’s much better to install it locally project by project
gulp serve, gulp, and gulp serve:dist During development, there are three commands that you'll use regularly: gulp serve, gulp,
Вот ошибка, которую я не смог утстранить пару недель назад. Мой Gulp не видел babel-register, хоть тресни... А понять причины не получалось...
F:\stradorusite\web-starter-kit-0.6.3>gulp -v
[12:29:19] Requiring external module babel-register
[12:29:19] CLI version 1.2.1
[12:29:19] Local version 3.9.1
Так, или иначе, но надо было решать, с какими фрейворками начинать свой фронтентд проект(mdl, bootstrap, foundation, ... hexo)... А времени оставалось все меньше и меньше. Так что я читал все подряд и судорожно старался запомнить все и разложить по полочкам...
По мере поглощения информации я эпизодически "вспоминал" про эту ошибку, она не давала мне покоя, вернее то, что надо было найти быстрое решение. Свои знания прирастали медленно, на них рассчитывать не приходилось, решил, что должно появиться чужое решение. Для еженедельного мониторинга... сначала научился ограничиват поиск (гуление) последней неделей и нашел на стековерфлов очедное обсуждение, в котором гововрилось о том, что "это нода" (а не Gulp... почему я сам об этом не подумал?)...
... и понял, что баг могут быстро не устранить, а ноду переустанавливать не стоит - стабильный релиз 4.4, последний - 6, а у меня
F:\stradorusite\MDL\material-design-lite-1>node -v
v5.6.0
...решил не просто подождать, а поискать альтернативы... И в очередной раз получил подтверждение своей глупости, поскольку не помню точно, почему я загуглил этот запрос
require "babel" "register" nodejs
Скорее всего, я подумал, что если это нода, то и искать решение бага надо в смежных областях по этому запросу... На втором месте на страничке выдачи была ссылка
babel-cli - npm
И тут до меня дошло, что надо попробовать "скомпилировать" gulpfile.babel.js
Установим глобально babel-cli¶
F:\stradorusite\web-starter-kit-0.6.3>npm install babel-cli -g
F:\stradorusite\web-starter-kit-0.6.3>babel -V
6.10.1 (babel-core 6.10.4)
К старому доброму javascript - создадим se-gulpfile.js¶
F:\stradorusite\web-starter-kit-0.6.3>gulp -v --gulpfile se-gulpfile.js
[12:19:14] CLI version 1.2.1
[12:19:14] Local version 3.9.1
F:\stradorusite\web-starter-kit-0.6.3>gulp --gulpfile se-gulpfile.js
[12:20:06] Using gulpfile F:\stradorusite\web-starter-kit-0.6.3\se-gulpfile.js
[12:20:06] Starting 'clean'...
[12:20:08] Finished 'clean' after 1.78 s
[12:20:08] Starting 'default'...
[12:20:08] Starting 'styles'...
[12:20:24] styles all files 3 kB
[12:20:24] Finished 'styles' after 16 s
[12:20:24] Starting 'lint'...
[12:20:29] Starting 'html'...
[12:20:34] Starting 'scripts'...
[12:20:43] Starting 'images'...
[12:20:51] Starting 'copy'...
[12:20:56] html basic.html 1.32 kB
[12:20:56] Finished 'lint' after 32 s
[12:20:56] html index.html 14.99 kB
[12:20:56] html all files 16.31 kB
[12:20:56] scripts all files 1.32 kB
[12:20:56] Finished 'html' after 28 s
[12:20:56] Finished 'scripts' after 23 s
[12:20:57] images all files 7.39 kB
[12:20:57] Finished 'images' after 14 s
[12:20:57] copy all files 45.8 kB
[12:20:57] Finished 'copy' after 6.11 s
[12:20:57] Starting 'copy-sw-scripts'...
[12:20:57] Finished 'copy-sw-scripts' after 86 ms
[12:20:57] Starting 'generate-service-worker'...
Total precache size is about 47.68 kB for 12 resources.
[12:20:57] Finished 'generate-service-worker' after 259 ms
[12:20:57] Finished 'default' after 49 s
И запустим сервер с опцией --gulpfile se-gulpfile.js
F:\stradorusite\web-starter-kit-0.6.3>gulp serve --gulpfile se-gulpfile.js
[12:30:22] Using gulpfile F:\stradorusite\web-starter-kit-0.6.3\se-gulpfile.js
[12:30:22] Starting 'scripts'...
[12:30:32] Starting 'styles'...
[12:30:44] Finished 'scripts' after 21 s
[12:30:44] Finished 'styles' after 11 s
[12:30:44] Starting 'serve'...
[12:30:44] Finished 'serve' after 715 ms
[WSK] Access URLs:
-------------------------------------
Local: http://localhost:3001
External: http://192.168.56.1:3001
-------------------------------------
UI: http://localhost:3002
UI External: http://192.168.56.1:3002
-------------------------------------
[WSK] Serving files from: .tmp
[WSK] Serving files from: app
[WSK] Reloading Browsers...
[WSK] Reloading Browsers...
И вот оно счастье, Gulp работает в штатном режиме, следит за .tmp и app
И даже browsersync прокручивает страницу синхронно во всех открытых браузерах.
И много чего этот бабель еще может¶
F:\stradorusite\web-starter-kit-0.6.3>babel -h
Usage: babel [options] <files ...>
Options:
-h, --help output usage information
-f, --filename [filename] filename to use when reading from stdin - this will be used in
source-maps, errors etc
--retain-lines retain line numbers - will result in really ugly code
--no-highlight-code enable/disable ANSI syntax highlighting of code frames (on by d
efault)
--presets [list]
--plugins [list]
--ignore [list] list of glob paths to **not** compile
--only [list] list of glob paths to **only** compile
--no-comments write comments to generated output (true by default)
--compact [booleanString] do not include superfluous whitespace characters and line termi
nators [true|false|auto]
--minified save as much bytes when printing [true|false]
-s, --source-maps [booleanString] [true|false|inline]
--source-map-target [string] set `file` on returned source map
--source-file-name [string] set `sources[0]` on returned source map
--source-root [filename] the root from which all sources are relative
--no-babelrc Whether or not to look up .babelrc and .babelignore files
--source-type [string]
--auxiliary-comment-before [string] print a comment before any injected non-user code
--auxiliary-comment-after [string] print a comment after any injected non-user code
--module-root [filename] optional prefix for the AMD module formatter that will be prepe
nd to the filename on module definitions
-M, --module-ids insert an explicit id for modules
--module-id [string] specify a custom name for module ids
-x, --extensions [extensions] List of extensions to compile when a directory has been input [
.es6,.js,.es,.jsx]
-w, --watch Recompile files on changes
--skip-initial-build Do not compile files before watching
-o, --out-file [out] Compile all input files into a single file
-d, --out-dir [out] Compile an input directory of modules into an output directory
-D, --copy-files When compiling a directory copy over non-compilable files
-q, --quiet Don't log anything
-V, --version output the version number
Посты чуть ниже также могут вас заинтересовать
Комментариев нет:
Отправить комментарий