agragregra / optimizedhtml-start-template Goto Github PK

как использовать scss вместо sass?

Гулп нормально работает но не показывает сервера и за сколько время синхронизировал, проблема не критична , но хотелось бы понять в чем дело , вот скриншот. Кто нибудь сталкивался с такой проблемой?

https://prnt.sc/hnxuhs --- скриншот

Посмотри документацию к gulp-imagemin, в 3й версии поменялись опции передаваемые при вызове. Поэтому это
imagemin({ interlaced: true, progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant()] })
не будет работать. Нужно либо изменить версию либо параметры вызова :)

Error: Cannot find module 'postcss'

npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, follo wing the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for comp atibility with current and future versions of Node.js
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compa tibility with current and future versions of Node.js
npm WARN deprecated [email protected]: This package is discontinued. U se lodash.iteratee@^4.0.0.
npm WARN prefer global [email protected] should be installed with -g

привет, Алексей. спасибо за шаблон!)
решил попробовать его

использую его впервые, посмотрел видео по нему, тем не менее есть вопрос:

при загрузке страницы видно как элементы собираются, а этого быть не должно.

в чем может быть дело?

This setup includes a lot of useful things, but the logic of the build is difficult to understand. With such a repo, you would do it justice by including a "This is the logic of the setup:" to complement the "Rules for working with the starting HTML template". Now, it seems complicated and not user friendly to someone who could need it (me for instance), in order to learn something new. Those who would understand this right away wouldn't need someone else's repo to start up a new project.

This is more of a compliment than anything, so don't think of this as negative critique, please.

При использовании magnific-popup экран сдвигается вверх. Это происходит из-за overflow-x: hidden.

gulp.task('js', ['common-js'], function() {
return gulp.src([
'app/libs/jquery/dist/jquery-3.2.1.min.js',
'app/libs/jQuery.mmenu/dist/jquery.mmenu.all.js',
'app/js/common.min.js', // Всегда в конце
])
.pipe(concat('scripts.min.js'))
// .pipe(uglify()) // Минимизировать весь js (на выбор)
.pipe(gulp.dest('app/js'))
.pipe(browserSync.reload({stream: true}));
});

events.js:193
throw er; // Unhandled 'error' event
^
GulpUglifyError: unable to minify JavaScript

Добрый день!

Скачал как есть и запустил

http://take.ms/6IxCD

Как поправить?

предлагаю писать осмысленные названия/комментарии к коммитам, а то смотришь в историю, а там

Коммит
Коммит
Коммит
Коммит
Коммит
Коммит
Коммит
Коммит
Первый коммит

Это выглядит странно по меньшей мере

Православненько правлю _media.sass, но результат компиляции в main.min.css огорчает. Не появляются там эти конструкции. Идут друг за другом без размещения в блоках @media просто в слошную в том же порядке что и в sass файле. В чем может быть причина?

P.S. Спасибо за хороший стартовый шаблон

При запуске gulp выдает вот такую ошибку. Это не связано с кириллицей в названии папки, я уже пробовал менять расположение, также запускал под рутом и без него. Версии npm/nodejs вы видите на скрине. Прошу помочь.

Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.

Здравствуйте , у меня проблема vars.sass, пишу там какую нить новую перемменную сохраняю и батс гулп выдает ошибку, ранше все работало.
Удалил нод переустановил не помогло, после и систему поменял, переустановил node.js (node-v8.5.0-x64) но ошибку все равно выдает . Помогите разобраться ...
Вот что пишет ...

C:\Users\User\Desktop\optimizedhtml-start-template-master>gulp
[15:05:44] Using gulpfile ~\Desktop\optimizedhtml-start-template-master\gulpfile
.js
[15:05:44] Starting 'sass'...
[15:05:44] Starting 'common-js'...
[15:05:44] Starting 'browser-sync'...
[15:05:44] Finished 'browser-sync' after 52 ms
[15:05:44] Finished 'common-js' after 333 ms
[15:05:44] Starting 'js'...
[15:05:44] Finished 'sass' after 365 ms
[Browsersync] 1 file changed (scripts.min.js)
[15:05:44] Finished 'js' after 22 ms
[15:05:44] Starting 'watch'...
[15:05:44] Finished 'watch' after 14 ms
[15:05:44] Starting 'default'...
[15:05:44] Finished 'default' after 39 ?s
[Browsersync] Access URLs:

   Local: http://localhost:3000
External: http://10.109.141.183:3000

      UI: http://localhost:3001

UI External: http://10.109.141.183:3001

[Browsersync] Serving files from: app
[15:05:51] Starting 'sass'...
[15:05:51] gulp-notify: [Error running Gulp] app\sass\main.sass
Error: File to import not found or unreadable: vars.
Parent style sheet: C:/Users/User/Desktop/optimizedhtml-start-template-ma
ster/app/sass/main.sass
on line 3 of app/sass/main.sass

@import "vars";
^

[15:05:51] Finished 'sass' after 292 ms

Алексей, спасибо за Ваш труд.
Вопрос по optimizedhtml-start-template : при изменении main.sass gulp отрабатывает отлично, а вот при изменении _font.sass, _media.sass и других фрагментов, gulp в ком.строку выдает

[22:19:15] gulp-notify: [Error running Gulp] app\sass\main.sass
Error: File to import not found or unreadable: vars.
       Parent style sheet: D:/00_MyWEB/_My_WORK/Orange/sun-orange/app/sass/main.sass
        on line 3 of app/sass/main.sass
>> @import "vars";
   ^
[22:19:16] Finished 'sass' after 51 ms

и хотя после ошибки он пишет finished, но по факту не "лайфрелоадит" изменения до следующего перезапуска...
Что сделать, что бы поправить ситуацию?

В app/ нет папки css, и нет начального файла стилей который должен подключаться.
Так и должно быть, или файл где-то потерялся?

Актуально или нет использовать "приемы" из урока по оптимизации загрузки, например такие:

1. размещение сетки бутстрап сразу в html > style
2. размещение таким же образом ccs для Header, т..к отдельным файлом и далее компилировать....
3. подключение ccs скриптами
   и тп.

Почему спрашиваю - урок достаточно старый, 2016 вроде. А сейчас смотрю у тебя более актуальные уроки, например про CSS Grid или сборки галпа ..html4 - где ты используешь сасс с компиляцией всех файлов в один ..min.css. И подключаешь его link'ом в хеде. Тоже самое и с ...min.js.

Я так понимаю последний вариант сейчас более правильный и быстрый?

Почему в сборке отсутствуют все файлы стилей bootstrap, в чем причина?

del

Хотел использовать туннель и столкнулся с проблемой.
Если раскоментировать tunnel: true, то при запуске дефолтного таска выбрасывает ошибку.
лечится удалением запусков 'sass' и 'js' в таске перед запуском browsersync, дальше вроде работает нормально. Проверишь, может это только у меня так?

gulp.task('watch', ['sass', 'js', 'browser-sync'], function() {
gulp.watch('app/sass//*.scss', ['sass']);
gulp.watch(['libs//.js', 'app/js/common.js'], ['js']);
gulp.watch('app/.html', browserSync.reload);
});

closed :/

Сейчас вылезает предупреждение при импорте .css файлов в sass. Разработчики обещают устранить данную ошибку в версии 3.6 libsass

https://github.com/sass/libsass/releases

Подскажите как-то можно обойти данное предупреждение? из-за него при обновление sass файлов не срабатывает browser-sync

Алексей, приветствую.
Я так понимаю больше не поддерживается в bourbon функция перевода px в em?
Что-то я посмотрел в документации бурбон и офигел, зачем они вычеркнули функции, миксины и т.д., они с дуба рухнули?

После обновления не работает...
Error: File to import not found or unreadable: fonts.
Parent style sheet: C:/DB/gderm/app/sass/main.sass
on line 1 of app/sass/main.sass

@import "fonts";
^

Посмотрел Readme начал смотреть index.html, но описанных комментариев в нем нет.
Посмотрел историю - вижу были, но вы их стерли или заменили на другие.
Обновите Readme, иначе непонятно к чему инструкция.

FlexBox поддержка уже очень хорошая. Как минимум будем иметь вертикальное выравнивание без хаков + более современная верстка на флексах, вместо float блоков

Приветствую. Достаточно ли обновить файл gulp согласно рекомендациям в вашем видео на ютубе "Обновление Gulp до версии 4" чтобы всё корректно работало?

Привет, подскажи пожалуйста! Почему import начал изменять пути в файле?
Например в фале libs подключаю css файл font-awesome.min.css и при компиляции в main.min.css импортируется с добавлением к пути до файлов со шрифтами позиция libs

Как в файле font-awesome.min.css:
('../fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.7.0')

Что при импорте в main.min.css:
(../libs/fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.7.0)

Как это исправить?

Есть проблема с падениями сервера при любой синтаксической ошибке вроде ; или , в js. Есть варианты как то это дело отлавливать и не ронять сервер?

src: local('Name Font'), local('PostScriptNameFont'),

Such a record in @font-face will check the presence of the font on the user's computer.

fs.js:27
const { Math, Object } = primordials;
^

ReferenceError: primordials is not defined
at fs.js:27:26
at req_ (/Users/macbook/Documents/Dev/web/portfolio_va/node_modules/natives/index.js:143:24)
at Object.req [as require] (/Users/macbook/Documents/Dev/web/portfolio_va/node_modules/natives/index.js:55:10)
at Object. (/Users/macbook/Documents/Dev/web/portfolio_va/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (internal/modules/cjs/helpers.js:74:18)

Вот такую ошибку стал выдавать.
На всех проектах стало так, при сохранении кода из "fonts", "vars", "libs".
И при открытии чистого шаблона тоже самое.
С чем это может быть связано? Было ли у кого-нибудь что-то подобное?

Написано а по факту куча общих стилей.
Можно ли оставить только то, что относится конкретно к сетке?

Во время разработки не вставляются стили
@@include('header.min.css') так и не раскрывается

В чем проблема:?

Проблема! Когда запускаешь gulp, media бустрапа срабатывают не там где нужно (1092px , a не 992px) и другое... Помогите прошу, не могу найти почему так. Когда открываю отдельно index.html медиа запросы применяются верно.

Добрый день! Подскажите, пожалуйста, почему используя дефолтные настройки перестали создаваться External URLs в browsersync? Есть только локальные:

[Browsersync] Access URLs:
 ----------------------------
 Local: http://localhost:3000
 ----------------------------
    UI: http://localhost:3001
 ----------------------------