Gulp truble

@jokest · Регистрация: 14.12.2014

Author24 — интернет-сервис помощи студентам

Прошу подсказки свертстал сайт с gulp/sass, одна проблема без gulp не отбражтся сайт как нужно, это так задуманно?
Если да то как его посадить на cms? как его показать заказчику?

@BANO · 13.07.2016, 22:11

jokest, gulp - инструмент для сборки... как вообще сайт может от него зависить?

@jokest · 13.07.2016, 22:30 **[ТС]**

это да, но если открываешь index без него совсем не то, тоесть ну вот я закончил вёрстку всё красиво, но без gulp напрямую запуская inedx.htm вся вёрстка сломана шрифтов нету картинок тоже, запускаешь через gulp всё как надо.

@BANO · 13.07.2016, 23:03

jokest, потому что браузер не умеет читать и понимать sass
надо прогнать через компилятор в css

@jokest · 13.07.2016, 23:10 **[ТС]**

ну а разве это не делает gulp? у меня например header.min.sass компилился в header.min.css

@BANO · 13.07.2016, 23:19

jokest, это и делает
а чего вы хотите? без него обойтись?

@jokest · 13.07.2016, 23:43 **[ТС]**

Я собственно говоря незнаю, что с этой вёрсткой дальше делать, хочу посадить на wordpress а как если сайт не отбражется должным образом без gulp

@phpk · 14.07.2016, 01:20

а таски в gulpfile вы сами делали? Обычно по таскам всё понятно, где и что работает.
Покажите тогда gulpfile.js, так будет понятней, в чём дело

@jokest · 14.07.2016, 01:32 **[ТС]**

Javascript

var gulp         = require('gulp'),
        sass         = require('gulp-sass'),
        autoprefixer = require('gulp-autoprefixer'),
        minifycss    = require('gulp-minify-css'),
        rename       = require('gulp-rename'),
        browserSync  = require('browser-sync').create(),
        concat       = require('gulp-concat'),
        uglify       = require('gulp-uglifyjs');
 
gulp.task('browser-sync', ['styles', 'scripts'], function() {
        browserSync.init({
                server: {
                        baseDir: "./app"
                },
                notify: false
        });
});
 
gulp.task('styles', function () {
    return gulp.src('sass/*.sass')
    .pipe(sass({
        includePaths: require('node-bourbon').includePaths
    }).on('error', sass.logError))
    .pipe(rename({suffix: '.min', prefix : ''}))
    .pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false}))
    .pipe(minifycss())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.stream());
});
 
gulp.task('scripts', function() {
    return gulp.src([
        './app/libs/modernizr/modernizr.js',
        './app/libs/jquery/jquery-1.11.2.min.js',
        './app/libs/waypoints/waypoints.min.js',
        './app/libs/animate/animate-css.js',
        './app/libs/plugins-scroll/plugins-scroll.js',
        './app/libs/superfish/dist/js/superfish.min.js',
        './app/libs/owl.carousel/dist/owl.carousel.min.js',
        './app/libs/mmenu/dist/js/jquery.mmenu.all.min.js',
        './app/libs/equalHeights/equalheights.js',
        './app/libs/magnific-popup/dist/jquery.magnific-popup.min.js',
        ])
        .pipe(concat('libs.js'))
        // .pipe(uglify()) //Minify libs.js
        .pipe(gulp.dest('./app/js/'));
});
 
gulp.task('watch', function () {
    gulp.watch('sass/*.sass', ['styles']);
    gulp.watch('app/libs/**/*.js', ['scripts']);
    gulp.watch('app/js/*.js').on("change", browserSync.reload);
    gulp.watch('app/*.html').on('change', browserSync.reload);
});
 
gulp.task('default', ['browser-sync', 'watch']);

@BANO · 14.07.2016, 01:58

phpk, проблема в том, что тс хочет взять, и обойтись без гальпа...
jokest, я могу предложить вам только использовать уже откомпиленную версию (то, что находится в папке app) для своих извращений для cms

@jokest · 14.07.2016, 03:00 **[ТС]**

Я бы с радость взял откомпилированную версию только вот в чём загвоздка ниже, скорее всего по вашей реакции я несу ахинею, тогда как поступают с готовой вёрсткой собраной с помощью галпа, как в дальнейшем можно её посадить на cms/cmf? Объясните пожалуйсто.

@BANO · 14.07.2016, 07:03

jokest, какая cms?
если она написана на php, то думаю можно будет в изначальных .html файлах понаставлять php кода, который необходим для отображения в cms, а потом прогнать через гальп
он не умеет читать php, так что сочтёт его за простой текст, как собственно сейчас и делает
так что, по сути надо просто сейчас внутри .html файлов отработать структуру, натянуть их, а потом откомпиленную версию кинуть в недра cms на раздирание

@phpk · 14.07.2016, 09:34

Сообщение от BANO

phpk, проблема в том, что тс хочет взять, и обойтись без гальпа...

та нет, как я понял тс не может запустить свёрстанный сайт без гальпа

Сообщение от jokest

это да, но если открываешь index без него совсем не то, тоесть ну вот я закончил вёрстку всё красиво, но без gulp напрямую запуская inedx.htm вся вёрстка сломана шрифтов нету картинок тоже, запускаешь через gulp всё как надо.

Сообщение от jokest

Если да то как его посадить на cms? как его показать заказчику?

ну так в папке app получается готовый сайт, который теперь нужно интегрировать на cms, но это уже от гальпа не зависит

Donald28 · 14.07.2016, 11:31

гальп тут не причем.
Проблема в путях к js и css, которые указываются в index.html.
скорее всего у вас в index.html что-то следующее:

HTML5

1 2	<script src="/js/libs.js"></script> <link href="/css/some-styles.css" rel="stylesheet" type="text/css" >

Когда запускались задачи gulp, был инициализирован простенький веб-сервер. То есть к твоей страничке можно было обратиться по адресу http://localhost:<port>/. Причем корень этого сервера ссылается на path/to/project/app (это в твоем случае). А в адресе к скрипту указано /js/libs.js, что значит ищи этот файл в корне сервера (об этом свидетельствует слэш в начале пути) в папке js.

Потом, как я понял, ты просто открыл файл index.html (через двойной клик по файлу). И в адресной строке браузера будет путь file:///path/to/project/app/index.html. Это означает, что корень этого аля-сервера будет в корне диска. А в папке file:///app/ нет никакого файла libs.js. Поэтому скрипты и стили и подгружаются

@phpk · 14.07.2016, 12:03

Donald28 благодарю за такой развёрнутый ответ.
Я как начинающий в галпе, хотелось - бы уточнить, подскажите пожалуйста, вы пишете что

Сообщение от Donald28

И в адресной строке браузера будет путь file:///path/to/project/app/index.html. Это означает, что корень этого аля-сервера будет в корне диска.

потом вы пишете что

Сообщение от Donald28

А в папке file:///app/ нет никакого файла libs.js

я не совсем понял пути к файлам. Сначала вы пишете, что путь к файлам file:///path/to/project/app/index.html, потом вы пишете что в папке file:///app/ нет никакого файла. Как это понять, т.е. file:///path/to/project/app/index.html это и это file:///app/ ?
Просто иногда путаю ещё эти относительные пути

Donald28 · 14.07.2016, 14:58

Давайте перейдем от абстракции к конкретике. Пусть мы программируем на Windows. И у нас на диске C: есть папка Projects. В этой папке еще одна папка test (это наш гипотетический тестовый проект). Структура папки test следующая:

Bash

test/
  app/
    js/
      script.js
    index.html
    fix_index.html

В index.html будет строка подключения нашего скрипта:

HTML5

1	<script src="/js/script.js"></script>

А в fix_index.html мы этот же скрипт подключим иным способом:

HTML5

1	<script src="js/script.js"></script>

Заметили отсутствие слеша в начале пути?

Теперь запустим файл index.html в браузере через двойной клик левой кнопки мыши по этому файлу.
В адресной строке браузера мы увидем путь: file:///C:/Project/test/app/index.html
При таком построении пути корень файловой системы для браузера будет file:///. Значит наш JS скрипт не загрузится.
Почему? А потому что браузер будет считывать по следующему алгоритму (итоговый путь мы будем записывать в переменную PATH):
1. Смотрим на путь к скрипту, а там он начинается со слэша. Значит нам нужно сначала перейти корень сервера, а он у нас является file://. Таким образом PATH = file:///
2. Потом смотрим на оставшуюся часть пути: он составляет js/script.js. Этот путь мы дописываем к переменной PATH. Итого PATH = file:///js/script.js
А по этому адресу ничего не будет, так как этот путь в принципе не существует. И если открыть консоль браузера (Ctrl+Shift+I для Crome далее вкладка Console), то увидим сообщение красным цветом, что не удалось загрузить файл по пути file:///js/script.js, так как его не существует.

Теперь откроем fix_index.html. В адресной строке браузере будет следующий путь: file:///C:/Project/test/app/fix_index.html. Но каков будет алгоритм открытия нашего скрипта:
1. В начале пути нет слэша, значит путь надо начинать с той папки, откуда был запущен файл fix_index.html. То есть PATH = file:///C:/Project/test/app/
2. Дописываем к PATH остаток пути, получаем: file:///C:/Project/test/app/js/script.js
И если откроем консоль браузера, то там не будет никого сообщения об ошибке.

А теперь настроем локальный веб-сервер на папку C:/Project/test/app/. Не важно как, через apache или с помощью php или python в терминале (командной строке):
для python

Bash

1
2
3

C:
cd Project/test/app
python -m SimpleHTTPServer 8000

для python

Bash

1
2
3

C:
cd Project/test/app
php -S localhost:8000

то по адресам, введенном в браузере, http://localhost:8000/index.html и http://localhost:8000/fix_index.html не будет возникать ошибок в загрузке скриптов.

Мораль сего такова:
1. Не надо для отладки своего приложения открывать чего через двойной клик. Всегда настраивайте локальный сервер
2. Смотрите в консоль бразуера. в случае ошибок, там будет написана исчерпывающая информация

P.S.: Но если совсем туго с понимаем того, как работают веб-приложения, то вам пора читать туториалы для девушек: http://tutorial.djangogirls.org/ru/

@jokest 0 / 0 / 0 Регистрация: 14.12.2014 Сообщений: 19
		1
	Gulp truble 13.07.2016, 21:45. Показов 1725. Ответов 15 Метки нет (Все метки) Прошу подсказки свертстал сайт с gulp/sass, одна проблема без gulp не отбражтся сайт как нужно, это так задуманно? Если да то как его посадить на cms? как его показать заказчику? 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	13.07.2016, 22:11	2
	jokest, gulp - инструмент для сборки... как вообще сайт может от него зависить? 0

@jokest 0 / 0 / 0 Регистрация: 14.12.2014 Сообщений: 19
	13.07.2016, 22:30 [ТС]	3
	это да, но если открываешь index без него совсем не то, тоесть ну вот я закончил вёрстку всё красиво, но без gulp напрямую запуская inedx.htm вся вёрстка сломана шрифтов нету картинок тоже, запускаешь через gulp всё как надо. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	13.07.2016, 23:03	4
	jokest, потому что браузер не умеет читать и понимать sass надо прогнать через компилятор в css 0

@jokest 0 / 0 / 0 Регистрация: 14.12.2014 Сообщений: 19
	13.07.2016, 23:10 [ТС]	5
	ну а разве это не делает gulp? у меня например header.min.sass компилился в header.min.css 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	13.07.2016, 23:19	6
	jokest, это и делает а чего вы хотите? без него обойтись? 0

@jokest 0 / 0 / 0 Регистрация: 14.12.2014 Сообщений: 19
	13.07.2016, 23:43 [ТС]	7
	Я собственно говоря незнаю, что с этой вёрсткой дальше делать, хочу посадить на wordpress а как если сайт не отбражется должным образом без gulp 0

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	14.07.2016, 01:20	8
	а таски в gulpfile вы сами делали? Обычно по таскам всё понятно, где и что работает. Покажите тогда gulpfile.js, так будет понятней, в чём дело 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	14.07.2016, 01:58	10
	phpk, проблема в том, что тс хочет взять, и обойтись без гальпа... jokest, я могу предложить вам только использовать уже откомпиленную версию (то, что находится в папке app) для своих извращений для cms 0

@jokest 0 / 0 / 0 Регистрация: 14.12.2014 Сообщений: 19
	14.07.2016, 03:00 [ТС]	11
	Я бы с радость взял откомпилированную версию только вот в чём загвоздка ниже, скорее всего по вашей реакции я несу ахинею, тогда как поступают с готовой вёрсткой собраной с помощью галпа, как в дальнейшем можно её посадить на cms/cmf? Объясните пожалуйсто. Миниатюры 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	14.07.2016, 07:03	12
	jokest, какая cms? если она написана на php, то думаю можно будет в изначальных .html файлах понаставлять php кода, который необходим для отображения в cms, а потом прогнать через гальп он не умеет читать php, так что сочтёт его за простой текст, как собственно сейчас и делает так что, по сути надо просто сейчас внутри .html файлов отработать структуру, натянуть их, а потом откомпиленную версию кинуть в недра cms на раздирание 1

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	14.07.2016, 09:34	13
	Сообщение от BANO phpk, проблема в том, что тс хочет взять, и обойтись без гальпа... та нет, как я понял тс не может запустить свёрстанный сайт без гальпа Сообщение от jokest это да, но если открываешь index без него совсем не то, тоесть ну вот я закончил вёрстку всё красиво, но без gulp напрямую запуская inedx.htm вся вёрстка сломана шрифтов нету картинок тоже, запускаешь через gulp всё как надо. Сообщение от jokest Если да то как его посадить на cms? как его показать заказчику? ну так в папке app получается готовый сайт, который теперь нужно интегрировать на cms, но это уже от гальпа не зависит 0

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	14.07.2016, 12:03	15
	Donald28 благодарю за такой развёрнутый ответ. Я как начинающий в галпе, хотелось - бы уточнить, подскажите пожалуйста, вы пишете что Сообщение от Donald28 И в адресной строке браузера будет путь file:///path/to/project/app/index.html. Это означает, что корень этого аля-сервера будет в корне диска. потом вы пишете что Сообщение от Donald28 А в папке file:///app/ нет никакого файла libs.js я не совсем понял пути к файлам. Сначала вы пишете, что путь к файлам file:///path/to/project/app/index.html, потом вы пишете что в папке file:///app/ нет никакого файла. Как это понять, т.е. file:///path/to/project/app/index.html это и это file:///app/ ? Просто иногда путаю ещё эти относительные пути 1

Gulp truble

Решение