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

вторник, 3 мая 2016 г.

Смотрим видео и юзаем понты BrowserSync

Обнаружил в дистрибутиве jekyll-foundation (вроде бы) лишний сервер BrowserSync. Не понял, зачем он нужен (есть же "штатный" в Jekyll). Нашел и посмотрел видео, запустил на машине с windows... Ну да, немного понтов есть..., но так и не понял, зачем же он нужен.
А потом (в следующих постах) я обнаружил, что jekyll вообще не поддерживает windows..., в частности автоматическое обновление (штатного сервера) мне настроить так и не удалось. Так что, не исключено, что попробую его еще разок.
Здесь два видео, код для gulp.js... и еще ссылки на документацию, и на портал видеоуроков.
BrowserSync - #2 - Рассмотрение browser-sync API. Интеграция с gulp и sass.
Опубликовано: 23 сент. 2015 г. В данном уроке мы рассмотрим как написать собственный скрипт для node.js, используя API browser-sync. А также создадим свой стартовый шаблон, использующий gulp для автоматизации и sass в качестве препроцессора стилей.
Полезные ссылки:
https://nodejs.org/en/ - установка Node.JS http://www.browsersync.io/docs/ - документация BrowserSync https://developers.google.com/web/tools/starter-kit/ - boilerplate от google
Смотрите уроки по Karma : http://www.youtube.com/playlist?list=PLY4rE9dstrJwmztGWX2OHNBpf37H56g2U
Портал видеоуроков http://loftblog.ru/ Фильтр новостей в мире web разработки: http://vk.com/itloft Также в facebook: http://www.facebook.com/loftblog И, конечно, twitter: http://twitter.com/loft_blog
BrowserSync - #1 - Установка и обзор возможностей

На 7-ой минуте видео код для gulp.js

In [ ]:
var gulp = require('gulp');
var browserSync = require(browser-sync').creatr();
var sass = require('gulp-sass');
In [ ]:
//Static server + watching scss/html files
gulp.task('serve', ['sass'], function(){
    browserSync.init({
            server: "./app"    
            }); 
    gulp.watch("app/scss/*.scss", ['sass']); 
    gulp.watch("app/*.html").on('change', browserSync.reload);
    });
In [ ]:
//Compile sass into css & auto-inject into browser
gulp.task('sass', function(){
   return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSyns.stream());
});
In [ ]:
gulp.task('default', ['serve']);
In [ ]:
####Теперь апускаемся из папки с галпом
In [ ]:
F:\stradorusite\foundation\jekyll\jekyll-foundation>npm start

> jekyll-foundation@0.3.0 start F:\stradorusite\foundation\jekyll\jekyll-foundation
> gulp

[23:39:59] Using gulpfile F:\stradorusite\foundation\jekyll\jekyll-foundation\gulpfile.js
[23:39:59] Starting 'default'...
[23:39:59] Starting 'build'...
[23:39:59] Starting 'clean'...
[23:39:59] Finished 'clean' after 8.43 ms
[23:39:59] Starting 'jekyll-build'...
Configuration file: F:/stradorusite/foundation/jekyll/jekyll-foundation/_config.yml
            Source: F:/stradorusite/foundation/jekyll/jekyll-foundation
       Destination: F:/stradorusite/foundation/jekyll/jekyll-foundation/_site
 Incremental build: enabled
      Generating...
                    done in 5.065 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
[23:40:15] Finished 'jekyll-build' after 16 s
[23:40:15] Starting 'sass'...
[23:40:20] Starting 'javascript'...
[23:40:34] Finished 'sass' after 20 s
[23:40:35] Finished 'javascript' after 15 s
[23:40:35] Starting 'copy'...
[23:40:36] Finished 'copy' after 748 ms
[23:40:36] Finished 'build' after 37 s
[23:40:36] Starting 'browser-sync'...
[23:40:37] Finished 'browser-sync' after 1.15 s
[23:40:37] Starting 'watch'...
[23:40:38] Finished 'watch' after 1.37 s
[23:40:38] Finished 'default' after 40 s
[BS] Access URLs:
 --------------------------------------------
       Local: http://127.0.0.1.xip.io:3000
    External: http://192.168.56.1.xip.io:3000
 --------------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.56.1.xip.io:3001
 --------------------------------------------
[BS] Serving files from: _site/
2016-05-03T14:58:32.265Z gulp.js: error running server: Error: listen EADDRNOTAVAIL 173.45.161.113:8080

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v5.6.0
npm ERR! npm  v3.6.0
npm ERR! code ELIFECYCLE
npm ERR! jekyll-foundation@0.3.0 start: `gulp`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the jekyll-foundation@0.3.0 start script 'gulp'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the jekyll-foundation package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs jekyll-foundation
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls jekyll-foundation
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     F:\stradorusite\foundation\jekyll\jekyll-foundation\npm-debug.log

F:\stradorusite\foundation\jekyll\jekyll-foundation>n


Посты чуть ниже также могут вас заинтересовать

Комментариев нет: