Gulp bootstrap 4: Сборка Вootstrap 4 проекта с использованием Gulp

Содержание

Использование bootstrap sass (npm) с gulp

Я git клонировал это РЕПО https://github.com/HosseinKarami/fastshell , и у него все работало.

Я отошел от компаса, так как fastshell намного быстрее работает с gulp. Но я в замешательстве и не знаю, как его расширить, как я могу использовать boostrap sass (https://github.com/twbs/bootstrap-sass)? сделать беседку установить или npm?

npm

gulp

bower

Поделиться

Источник

Haris Z

06 июня 2016 в 07:22

2 ответа

gulp-sass не будет импортировать bootstrap, установленный с bower
Я хочу перебрать все мои пакеты bower. Все они, которые имеют sass файла в качестве своих основных файлов, я хочу включить в includePaths для gulp-sass. Я использую пакет npm main-bower-files , чтобы успешно получить основные файлы (и я фильтрую только файлы scss). Но когда я иду на компиляцию, я…
Ошибка с gulp-sass
При попытке запустить ‘gulp serve’ я получаю следующую ошибку: [14:14:52] сантехник обнаружил необработанную ошибку: Ошибка в плагине ‘gulp-sass’ Сообщение: @import директивы не допускаются внутри миксинов и функций Подробности: fileName: ./bower_components/bootswatch/spacelab/_bootswatch.scss…

Ответ Зака поможет вам на правильном пути, вот более подробный ответ, основанный на gulpfile Fastshell.

1) Установите bootstrap-sass

bower install boostrap-sass --save

2) Включите bootstrap-sass в основной файл scss Fastshell

Файл:

src/scss/style.scss

@import "./bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss";

Используйте gulp css после этого или смотрите.

3) Переопределите классы начальной загрузки для дальнейшей настройки, которая вам нужна во всех уже включенных модулях/партиалах .scss файлов

Поделиться

Marko Manojlovic

30 ноября 2016 в 08:50

Вы можете сделать следующее:

1 Установите boostrap-sass, используя следующую команду bower:

bower install boostrap-sass --save

2 Затем используйте gulp-sass, который уже требуется в проекте для доступа к файлам *.scss в bower_components/bootstrap-sass/assets.

Ваше здоровье!

Поделиться

zak.http

30 ноября 2016 в 06:46

9.2.1. Создание темы на основе Bootstrap. Компиляция SASS через Gulp.

Видео: https://youtu.be/D5YhelsTW4Q

В прошлом уроке мы разобрали как компилировать LESS с помощью встроенного в PhpStorm watcher’a. В этом уроке мы будем создавать тему на основе SASS Boostrap’a. Если у вас не получилось разобраться с LESS и компиляцией через PhpStorm, то можете попробовать использовать Gulp и SASS. На данном этапе уроков для нас не принципиально что использовать LESS или SASS. Но я бы рекомендовал вам использовать именно SASS и Gulp, потому что компиляция идет быстрее и настраивать Gulp проще.
Gulp — это менеджер заданий для javascript. Мы добавим с помощью него два задания одно отслеживать изменения в папке sass, когда мы дописываем стили и второе это компилировать SASS в CSS.

Давайте перейдем к установке. Я развернул чистый 8 друпал. Теперь нужно скачать тему bootstrap и положить ее в папку /themes:

https://www.drupal.org/project/bootstrap

Для использования SASS в подтемы bootstrap нам нужно использовать этот kit, который называется sass:

Копируем эту папку sass в папку /themes отдельно от boostrap и переименовываем в имя вашей темы, у меня это будет drupalbook:

Теперь нужно переименовать все файлы с THEMENAME на имя вашей темы. Например у нас есть файл THEMENAME.starterkit.yml, его нужно будет переименовать в drupalbook.info.yml. THEMENAME.libraries.yml нужно переименовать в drupalbook.libraries.yml и так далее. Не забудьте переименовать файлы в папке config файлы, там они тоже есть с THEMENAME:

Внутри файлов тоже может быть THEMENAME, например в файле sass/config/schema/THEMENAME.schema.yml:

Чтобы убедиться, что вы ничего не пропустили поищите THEMENAME по всей папке подтемы через PhpStorm:

Вбиваем в поиске THEMENAME и там где найдется исправляем на имя нашей темы.

Теперь нужно скачать сам bootstrap и положить его в папку /themes/drupalbook/bootstrap:

http://getbootstrap.com/getting-started/#download

https://getbootstrap.com/docs/3.3/getting-started/

Нас интересует SASS версия bootstrap’а:

Для нашей темы нам нужна вся папка bootstrap, кладем ее так чтобы путь к папке assets был такой /themes/drupalbook/bootstrap/assets:

Мы скопировали все нужные для темы файлы, теперь нужно подключить Gulp для компиляции SASS.

Сначала нам потребуется установить Node.js:

https://nodejs.org/en/

Node.js — это среда выполнения javascript кода, она позволяет исполнять код для компиляции SASS в CSS. Ставится в Windows она как обычная программа. Качать лучше последнюю версию, на данный момент 7.x.x:

После того как вы устновили Node.js вам нужно будет перезапустить PhpStorm или перезапустить консоль CMD если она у вас открыта. Консоль для работы с node.js можно открыть как в PhpStorm:

Так и через меню Пуск:

В консоле нужно набрать node -v, чтобы проверить что Node.js установился правильно:

Если не получилось поставить 7.x.x версию, попробуйте поставить 6.x.x.

Дальше нам нужно перейти в папку с нашей темой drupalbook и установить Gulp. Переходим в консоли по папкам мы через команду cd. Команда cd .. (cd пробел и две точки) позволяет перейти в родительску папку:

Чтобы переключить другой диск, нужно набрать команду D: (где D может быть любым), так вы переключетесь на нужный раздел диска, в данном случае это диск D.

Теперь когда вы перешли в папку с вашей темой, устанавливаем Gulp. Устанавливать будем с помощью менеджера пакетов npm он устанавливается сразу с Node.js. Сначала инициализируем новый набор компонентов npm:

npm init

Это создаст нам файл package.json, в этом файле будут показаны все пакеты, которые мы поставим через npm. При выполнение команды просто жмите Enter:

В результате будет сформировован вот такой вот файлик package.json:

{
«name»: «bootstrap-sass»,
«version»: «3.3.7»,
«description»: «bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.»,
«main»: «assets/javascripts/bootstrap.js»,
«style»: «assets/stylesheets/_bootstrap.scss»,
«sass»: «assets/stylesheets/_bootstrap.scss»,
«files»: [
«assets»,
«eyeglass-exports.js»,
«CHANGELOG.md»,
«LICENSE»,
«README.md»
],
«repository»: {
«type»: «git»,
«url»: «git://github.com/twbs/bootstrap-sass»
},
«keywords»: [
«bootstrap»,
«sass»,
«css»,
«eyeglass-module»
],
«contributors»: [
«Thomas McDonald»,
«Tristan Harward»,
«Peter Gumeson»,
«Gleb Mazovetskiy»
],
«license»: «MIT»,
«bugs»: {
«url»: «https://github.0.7.1»
}
}

Теперь выполняем следующую команду, устанавливаем Gulp:

npm install --save-dev gulp

Если вывелось дерево установленных файлов и никаких ошибок, то все прошло хорошо:

Следующей командой ставим пакет gulp-sass:

npm install --save-dev gulp-sass

Если у вас Gulp 4.x, то вам нужен будет этот код Gulpfile.js:

// Gulpfile.js running on stratumui,
// a css framework available on npmjs.com
var gulp = require(‘gulp’),
sass = require(‘gulp-sass’),
concat = require(‘gulp-concat’),
uglify = require(‘gulp-uglify’);

var paths = {
styles: {
src: ‘scss/**/*.scss’,
dest: ‘css’
}
};

function styles() {
return gulp
.src(paths.styles.src, {
sourcemaps: true
})
.pipe(sass())
.pipe(gulp.dest(paths.styles.dest));
}

function watch() {
gulp.watch(paths.styles.src, styles);
}

var build = gulp.parallel(styles, watch);

gulp.task(build);
gulp.task(‘default’, build);

Мы установили пакеты gulp, gulp-sass, теперь нужно создать задания для gulp’а (gulp tasks). Для этого создаем в корне темы файл Gulpfile.js:

/themes/drupalbook/Gulpfile.js

Код для Gulp 3.x:

var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);

gulp.task(‘styles’, function() {
gulp.src(‘scss/**/*.scss’)
.pipe(sass().on(‘error’, sass.logError))
.pipe(gulp.dest(‘./css/’))
});

//Watch task
gulp.task(‘default’,function() {
gulp.watch(‘scss/**/*.scss’,[‘styles’]);
});

Также для gulp 4.x и примера сверху, вам потребуется поставить дополнительные библиотеки:
npm install gulp-concat
npm install gulp-uglify

Мы указали компилировать файлы SASS в папку css, но этой папки нет сразу в нашей теме, ее нужно создать, также добавьте туда файли style.css:

/themes/drupalbook/css/style.css

В этом файле будет весь наш скомпилированный CSS.

Все готово для того чтобы запускать компиляцию SASS. Для этого заходим через PhpStorm в папку с темой и выбираем наш Gulpfile.js и в контекстном меню выбираем Show Gulp Tasks:

Выбираем задание default и сразу откроется окно этого таска:

Теперь каждый раз когда мы будем менять SASS в нашей темы gulp будет автоматически перекомпиливать SASS.

В результате компиляции в нашем файле style.css появится CSS и цвет фона сайта станет желтым:

По началу может казаться, что это долго настраивать компиляцию с помощью Gulp, но если у вас уже стоит Node.js, то вам нужно только добавить файл Gulpfile.js и установить пакеты gulp, gulp-sass. Если у вас возникли трудности с утрановкой и настройкой пишите в комментариях, будем разбираться.

Инструменты сборки. Начало работы · Bootstrap. Версия v4.0.0

Узнайте, как использовать запущенные скрипты npm для загрузки нашей документации, компиляции исходного кода, запуска тестов и т.п.

Bootstrap в своей автоматической системе сборки использует скрипты NPM. package.json содержит удобные методы для работы с NPM, включая компиляцию, тесты и прочее.

Для запуска автоматической системы сборки и запуска нашей документации локально, вам понадобится копия исходников Bootstrap и Node:

Установите Node, для управления зависимостями BS.

Перейдите в директорию /bootstrap и запустите команду npm install для установки локальных зависимостей, перечисленных в package.json.

Установите Ruby, Bundler (gem install bundler) и запустите bundle install. Это установит зависимости Ruby, такие как Jekyll, и плагины.
В Windows: читайте гайд для установки и запуска Jekyll.

По завершении вы будете способны запускать в CMD разные команды, которые имеются там в наличии.

Использование скриптов NPM

Вот команды CMD для пакета package.json:

Имя	Описание
`npm run dist`	Создает папку `/dist`, с компилированными файлами. Используйте Sass, Autoprefixer, и UglifyJS.
`npm test`	Для запуска тестов `npm test` локально и компиляции CSS и JS в папку `/dist`.
`npm run docs`	Собирает и тестирует CSS, JS и другие нужные для приложения ассеты (файлы/обьекты, которые необходимы для работы приложения, типа файл со стилями для сайта), используемые при запуске документации локально командой `npm run docs-serve`.

Афтопрефиксер

Bootstrap использует Афтопрефиксер (который участвует в процессе автоматической сборки) для автоматического добавления «вендорных префиксов» в некоторые свойства CSS во время процесса сборки. Это сберегает наше время, позволяя писать ключевые куски кода CSS один раз, и отменяя нужду в вендорных миксинах, в отличие от BS3.

Список браузеров, в которых есть поддержка автопрефиксера, здесь: /package.json.

Локальная документация

Для запуска нашей документации локально вам потребуется Jekyll, генератор гибких статических сайтов, обеспечивающий: базовые включения, файлы markdown, шаблоны и нечто еще. Вот как запустить Jekyll:

Смотрите «Установку инструментария» (выше) для инструкций по установке Jekyll («строитель» сайтов) и других зависимостей Ruby командой bundle install.

Запустите команду npm run docs-serve в CMD из корневой директории /bootstrap.

Откройте http://localhost:9001 в вашем браузере.

Узнайте больше про Jekyll здесь.

Отслеживание багов

Если возникнут проблемы с установкой зависимостей, удалите все предыдущие версии зависимостей (глобальные и локальные). Тогда попробуйте снова npm install.

Gulp 4 with bootstrap 4. How to Customize Bootstrap 4 with Sass

Already have an account?

Сборка проекта на Gulp 4, Подробный видео урок по сборщику Gulp

You can unsubscribe from these emails. Note : This tutorial is a part of our free course Learn Bootstrap 4 by Example. Check it out and join in from the beginning! Like other similar frameworks, you’re able to install a Bootstrap 4 project through various methods. Some are quick and dirty, while the most preferable method takes a bit more time. The key difference between each of these methods is the time it takes to get started, versus file size and loading time.

There are some other differences that we will take a look at shortly. Be sure to Subscribe to the Official Coursetro Youtube Channel for more awesome design and development videos. This method is ideal when you’re working on a prototype or wireframe. It allows you to quickly and easily get up and running with Bootstrap 4 by simply copying and pasting literally 4 lines of HTML onto a page. The downside to this method is lack of customization options — as it’s strictly CSS and not Sass — and load times.

When you use this method, you’re importing the entire Bootstrap library, which is almost always unnecessary. This results in unnecessary file sizes, thus longer load times. Still, if you’re working on a prototype or a project where load time isn’t a factor, this is the quickest way to get started. In this course however, we will not use this method. We’re going to set up a more robust development environment and use the Sass version of Bootstrap 4.

Sass is a preprocessor that allows you to write more dynamic CSS. Bootstrap 4 Sass also allows you to make more customizations, and choose which elements of the Bootstrap 4 framework you would like to include based on your project’s needs.

This ultimately leads to a reduced file size, which is necessary for your website’s or app’s performance. You will need to install Node. It should provide you with a version number. If so, you’re ready to proceed by creating a new folder and installing Bootstrap 4.

Here we’ve created a new folder and we’re hopping into it. Just hit the enter key through all of the questions. The package. When we install Bootstrap 4 for instance, it will add the package name along with the version to this file.Despite competition from webpack and ParcelGulp.

Super metroid rom reddit

As well as the usual transpiling, bundling and live reloading, Gulp. Until recently, npm install gulp would have installed 3. This was partly owing to ongoing development and because Gulp. On December 10,Gulp. Anyone using npm install gulp on a new project will receive version 4.

125khz rfid pcb antenna design

For example:. However, existing Gulp. There are several benefits to upgrading, which will become apparent throughout this tutorial. Update your package. Fortunately, most of these errors are caused by the same type of problem. The following sections use the CSS tasks tutorial code as an example. The code is available on GitHub and provides the original Gulp. This was typically used when a watch event was triggered or a task had dependencies.

For example, run the images task before the css task:. Complex tasks can be nested to any level — something which would have been difficult to achieve in Gulp. For example, run tasks a and b in parallel then, once both are complete, run tasks c and d in parallel:. The css task above can be migrated to Gulp. For example, a clean task to delete the build folder:. To solve this, Gulp. Alternatively, pass a callback function which is executed on completion del also provides a synchronous sync method :.

These can be migrated to Gulp.AMEX dashboard is a simple and beautifull admin template design. AMEX is a light admin dashboard based on top framework bootstrap 4.

We created Leaf to provide non profit organisations a platform through which they can efficiently send their message to the world. We put a lot of focus on the scientifical data about climate change. It is based on the most popular CSS. Our Template files are built with Bootstrap 4. Refine layout adapts to your needs and helps present your content in the most. Spaces is one of the most advanced Co-working Listing Web Templates we ever created.

It is built on the popular Bootstrap 4 CSS Framework and includes beautiful and practical pages to best showcase co-working spaces for awesome workers. Spaces comes with 13 advanced pages with a focus on providing high quality content in the field.

Enlink is a modern dashboard template build with Bootstrap 4. It contains alot high flexibility and configurable components. D-knight is a Responsive Blog Template for creative people. It can be used to build any web applications including custom admin panel, project management system, crm, cms, etc. The variety of layout options and great collection of reusable widgets, components, elements etc.

Upvex provides a large collection of ready to use ui elements, widgets, etc and works seamlessly with all major web browsers and devices including tablets and phones.

The Sass files are also bundled into it and allows you to have. It is easy to use this design. You can adapt it for any activity.

Using Gulp with Bootstrap 4

There are a lot of space for the information and a design is a great decision, if you want to present your activity on the internet in the modern. This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are as essential for the working of basic functionalities of the website.

We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Browse Templates By Tags admin admin dashboard admin template agency app blog business clean company construction consulting corporate creative cv dashboard designer ecommerce fashion finance flat freelancer gallery html html5 landing landing page marketing minimal modern multipurpose one page parallax personal photography portfolio responsive resume saas sass seo shop software startup template vcard.

This website uses cookies to improve your experience.

Subscribe to RSS

We’ll assume you’re ok with this, but you can opt-out if you wish. Accept Reject Read More. Privacy Overview This website uses cookies to improve your experience while you navigate through the website. Privacy Overview. Necessary Always Enabled.By using our site, you acknowledge that you have read and understand our Cookie PolicyPrivacy Policyand our Terms of Service.

The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

It did add the dependencies but how do I add it to my project now? What is the path for local NuGet dependencies? As others already mentioned, the package manager Bowerthat was usually used for dependencies like this in application that do not rely on heavy client-side scripting, is on the way out and actively recommending to move to other solutions:. While Bower is maintained, we recommend yarn and webpack for new front-end projects! So although you can still use it right now, Bootstrap has also announced to drop support for it.

As a result, the built-in ASP. NET Core templates are slowly being edited to move away from it too. Unfortunately, there is no clear path forward. This is mostly due to the fact that web applications are continuously moving further into the client-side, requiring complex client-side build systems and many dependencies.

So if you are building something like that, you might already know how to solve this then, and you can expand your existing build process to simply also include Bootstrap and jQuery there. But there are still many web applications out there that are not that heavy on the client-side, where the application still runs mainly on the server and the server serves static views as a result. Bower previously filled this by making it easy to just publish client-side dependencies without that much of a process.

In the. NET versions, we could use NuGet as well to add dependencies to some client-side dependencies since NuGet would just place the content into our project correctly. Unfortunately, with the new.

This is what the ASP.

Bootstrap 4 Grid only and SASS with Gulp

NET Core templates, that are not single-page applications, are currently doing. When you use those to create a new application, the wwwroot folder simply contains a folder lib that contains the dependencies:.Already have an account?

You can unsubscribe from these emails. Note : This tutorial is a part of our free course Learn Bootstrap 4 by Example. Check it out and join in from the beginning! You’ve integrated Bootstrap 4 and now you might be uncertain as to where and how you can make custom adjustments based on your project needs, right?

Fortunately for you, I have traversed the depths of the Bootstrap 4 Documentation to seek this very answer. Oh, and also, it was like right there and easy to find, so let’s get to it! Being that this tutorial is a part of our free bootstrap 4 coursewe have already set up a project and integrated the sass version of Bootstrap 4.

If you haven’t, please visit the course and get yourself up to par! Bootstrap 4 has a series of variables, mixins and other settings that are predefined when you install it with a package manager. These settings address colors, typography, spacing, and more.

If you want to change these settings, there’s a specific file that you can use to redefine their values. Notice how each of these sass variables has a!

That’s specific to Sass and works opposite of the! Being that this tutorial is a part of a project-based course, let me show you what the layout looks like:. Notice the color scheme and how we have that teal color? By default, I believe they’re set to blue. That’s all there is to it for making custom adjustments to the sass settings of Bootstrap 4. Outside of modifying Bootstrap’s sass settings, you can create a custom sass file in your project folder.

In the course that this tutorial is related to, we’ve set all of that up already in the previous section using Gulp. Create your account Already have an account? Login here. First Name. Last Name. Bootstrap 4 by Example. React vs Angular vs Vue by Example. If you prefer watching video.

Customizing Bootstrap’s Sass Settings Being that this tutorial is a part of our free bootstrap 4 coursewe have already set up a project and integrated the sass version of Bootstrap 4. Anywhere after these comments, you can now specify your overrides. Being that this tutorial is a part of a project-based course, let me show you what the layout looks like: Notice the color scheme and how we have that teal color?

Making Custom Style Adjustments Outside of modifying Bootstrap’s sass settings, you can create a custom sass file in your project folder. Share this post. Say something about this awesome post!So with Bootstrap 4 on the cusp of beta, just wanted to go over setting up your Bootstrap source with Gulp, instead of the default Grunt.

So first off you’re going to want to head off to the Boostrap 4 alpha site and pick youself up the alpha source and the go through the install guide. Next you’re going to want to add these Gulp dependencies to your package. Edit your package. Next you’re going to want to add a file called «gulpfile. Open it up let’s start with adding the npm dependencies to our gulpfile:.

So overall, we’re binding a few pretty useful packages to Gulp. Browser sync allows for live reloads when we’re running our gulpfile to watch files in the directory more on that in a bitdel allows us to delete files and gulp util is a utility library for Gulp that does things like logging.

Then we use a little ES6 magic to make loading plugins a bit easier. We call two const’s which is a new addition to JavaScript, the first being reload.

Hayes farm

Reload essentially allows us to initialize browser sync and watch any change in files, so gulp can recompile them. It also significantly shortens our import calls. This is just a small task in Gulp than when we run it, it deletes anything from our dist folder, so we don’t have to overwrite changes.

Essentially we write our sourcemaps on the uncompiled version of the Sass, next we use autoprefixer to prefix any of the CSS classes that need it. After that, we rename it and minify it. So here, we specify all of our smaller Javascript files in the order we want them to appear when we combine them.

Next we use babel to turn any of the ES6 functions into cross browser compatible ES5. Finally we use concat to combine all the Javascript files together, and pipe it into dist. Here we watch our Javascript and Sass for any changes and recompile if there are any. Great for if you’re modifying Bootstrap with custom Sass, and want to see live changes. Also, you can use the watch task with any CLI. Browser sync is also working in the background reloading, to see any live changes as it’s compiled.

Ez sai

The default task is running all our tasks, starting off with cleaning the dist directory, and running the Sass and JS compilation. We have our Javascript and Sass minifying and watching any sort of modification we make to Boostrap. Next post, I’ll be updating this on how to compile images and icons, how to compile with Ruby sass and toggling the environment variable. You can find the fully completed files mentioned in this article on my Github.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

How to make smelting molds

If nothing happens, download GitHub Desktop and try again. If nothing happens, download Xcode and try again. If nothing happens, download the GitHub extension for Visual Studio and try again. Pixel is a premium, fully responsive, modern Design System that will help you build creative and professional websites.

Use our components and sections, switch some Sass variables to build and arrange pages to best suit your needs. Pixel is compliant with the latest WCAG 2.

Pixel is a premium extension of the famous Bootstrap CSS Framework featuring pricing cards, profile cards, timelines and many more. All components are created to comply as much as possible with the WCAG 2. Check out all components here. Pixel Lite comes with 4 premium example pages that we created to show you the beautiful user interfaces that can be created. Each component, plugin and the general workflow is well documented.

Bootstrap Starter

Check out the online documentation for Pixel. This will stop the local server from running. If you’d like to get a version of our theme without Sass, Gulp or Npm, we’ve got you covered. Run the following command:. Here are some advices for our users that want to report an issue:. If you have questions or need help integrating the product please contact us instead of opening an issue. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Sign up.

HTML Branch: master. Find file. Sign in Sign up. Go back.

JayeshLab / bootstrap-4-sass-gulp-4-markerplate: шаблон Bootstrap 4.5.2 с задачами font-awesome, sass, gulp 4

GitHub — JayeshLab / bootstrap-4-sass-gulp-4-template: Bootstrap 4.5.2 шаблон с задачами font-awesome, sass, gulp 4

Файлы

Постоянная ссылка

Не удалось загрузить последнюю информацию о фиксации.

Тип

Имя

Последнее сообщение фиксации

Время фиксации

Бутстрап 4.5.2 шаблон с font-awesome5 free, sass, gulp 4 tasks, browserSync (с горячей перезагрузкой). Вы можете переопределить переменные bootstrap sass, поместив эти переменные в bootstrap-4-sass-gulp-4-markerplate / assets / scss / _bootstrap_variable_overrides.scss

Обязательный

Установите Gulp cli — Утилиту командной строки для Gulp

  $ npm install --global gulp-cli

Проверить локальную версию Gulp Cli и Gulp

Начало работы

Репозиторий клонов:
git clone https: // github.com / JayeshLab / bootstrap-4-sass-gulp-4-cabinplate.git
Изменить каталог:
cd bootstrap-4-sass-gulp-4-template
Установите все зависимости и библиотеки:
npm установить
Задача запуска Gulp:

gulp — для компиляции scss в css, минимизации css и js и сборки готовых для производства файлов в папке dist .
gulp dev — Запускает локальный сервер с browserSync и горячей перезагрузкой при изменении файлов (HTML, SCSS, JS).

Около

Шаблон Bootstrap 4.5.2 с задачами font-awesome, sass, gulp 4

Темы

ресурса

Лицензия

Вы не можете выполнить это действие в настоящее время.

Вы вошли в систему с другой вкладкой или окном.Перезагрузите, чтобы обновить сеанс.
Вы вышли из системы на другой вкладке или в другом окне. Перезагрузите, чтобы обновить сеанс.

Bootstrap 4.4.1 Boilerplate с Gulp

Это лучшая стартовая программа Bootstrap 4.4.1 для разработчиков. Шаблон с Gulp4, cross-env, Sass, исходными картами, concat, минимизацией CSS и HTML, uglify, оптимизацией изображений, частичными шаблонами, BrowserSync.

«Basic» — это окончательный стартовый шаблон Bootstrap 4.4.1 с Gulp 4 для автоматизации и быстрой разработки.

Загрузочный файл 4.4.1
Глоток 4
Sass
исходных карт
конкатенация
Минификация CSS
Минимизация HTML
углифы
оптимизация изображения
частичные элементы шаблона
BroswserSync, живая перезагрузка

Как к

Загрузите или клонируйте репозиторий ( git clone https://github.com/wowthemesnet/bootstrap-4-boilerplate.git ). После этого из корня вашей загрузки / клона:

Установить

  npm установить

Если что-то пойдет не так, удалите папку node_modules и снова запустите npm install .

Теперь давайте убедимся, что у вас также установлен Gulp глобально:

  $ npm установить gulp -g

Запустить сервер

  порция глотком

Вы должны увидеть работающий браузер по адресу http: // localhost: 3000 /.

Развитие

Переопределить переменные Bootstrap и создать свои собственные стили

src / scss / style.scss

Это будет автоматически скомпилировано в src / css / styles.css .

Добавить собственные сценарии

SRC / JS / index.js

Частично

Вы можете добавить партиалы в src / partials / .

Вставить частично : .

Примеры уже добавлены в этот проект для верхнего колонтитула и нижнего колонтитула .

Производство

  глоток

Если вам нужен HTML, минимизация CSS и оптимизация изображений:

  npm run prod

Папка Docs является местом назначения.Теперь вы можете перейти к docs / index.html и проверить вывод.

Webpack · Bootstrap

Узнайте, как включить Bootstrap в свой проект с помощью Webpack 3.

Установка Bootstrap

Установите bootstrap как модуль Node.js с помощью npm.

Импорт JavaScript

Импортируйте JavaScript Bootstrap, добавив эту строку в точку входа вашего приложения (обычно index.js или app.js ):

  импорт «начальной загрузки»;

В качестве альтернативы вы можете импортировать плагины индивидуально по мере необходимости:

  import 'bootstrap / js / dist / util';
импортировать 'bootstrap / js / dist / dropdown';
...

Bootstrap зависит от jQuery и Popper,
они определены как peerDependencies , это означает, что вам нужно обязательно добавить их оба
в ваш package.json , используя npm install --save jquery popper.js .

Обратите внимание, что если вы выбрали для импорта плагинов по отдельности , вы также должны установить export-loader

Импорт стилей

Импорт предварительно скомпилированного Sass

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

Сначала создайте свой собственный _custom.scss и используйте его для переопределения встроенных пользовательских переменных. Затем используйте ваш основной файл sass для импорта ваших пользовательских переменных, а затем Bootstrap:

  @import "custom";
@import "~ bootstrap / scss / bootstrap";

Для компиляции Bootstrap убедитесь, что вы установили и используете необходимые загрузчики: sass-loader, postcss-loader с Autoprefixer. С минимальной настройкой конфигурация вашего веб-пакета должна включать это или подобное правило:

 ...
  {
    тест: /\.(scss)$/,
    использовать: [{
      loader: 'style-loader', // вставляем CSS на страницу
    }, {
      loader: 'css-loader', // переводит CSS в модули CommonJS
    }, {
      loader: 'postcss-loader', // Выполнение действий css для публикации
      параметры: {
        plugins: function () {// публикуем плагины css, можно экспортировать в postcss.config.js
          возвращение [
            требовать ('Precss'),
            требуется ('автопрефиксатор')
          ];
        }
      }
    }, {
      loader: 'sass-loader' // компилирует Sass в CSS
    }]
  },
  ...

Импорт скомпилированного CSS

В качестве альтернативы вы можете использовать готовый к использованию CSS Bootstrap, просто добавив эту строку в точку входа вашего проекта:

  import 'bootstrap / dist / css / bootstrap.min.css';

В этом случае вы можете использовать существующее правило для css без каких-либо особых изменений в конфигурации webpack, за исключением того, что вам не нужен sass-loader , только style-loader и css-loader.

  ...
  модуль: {
    правила: [
      {
        тестовое задание: /\.css $ /,
        использование: ['style-loader', 'css-loader']
      }
    ]
  }
  ...

Автоматизируйте рабочий процесс разработки с помощью Gulp (часть 1)

Введение

Вы знаете упражнение.

Напишите код HTML, сохраните. Напишите код CSS, сохраните. Напишите код JavaScript, сохраните. Используйте инструменты minifier для сжатия кода, сохраните.

О, черт! Вы забыли изменить переменную в своем коде.

Вспенить, промыть, повторить.

Этот процесс быстро устаревает.Что, если бы был лучший способ автоматизировать весь процесс?

Gulp спешит на помощь!

Нет, это не напиток.

Давайте на мгновение представим, что у вас есть кнопка .

При нажатии на кнопку робот готовит все сырые ингредиенты для вашего знаменитого рецепта Char Kway Teow ; жарит их по отдельности; убирает всю зелень; добавляет любимый соус; смешивает все вместе и подает вам горячую на тарелку.

Предпосылка проста.

Сначала мы пишем функции, выполняющие задачи. Затем мы объединяем функции вместе и выполняем их последовательно.

И это в сущности описывает, на что способен Gulp . « bot », который помогает автоматизировать утомительные и трудоемкие задачи в рабочем процессе разработки.

Я предполагаю, что у вас есть элементарные знания о средствах выполнения задач JavaScript.

В противном случае см. Краткое руководство по Gulp, чтобы сначала ознакомиться с концепцией.

Требования

Начальная настройка

Установите Node.js. Node.js поставляется с npm или Node Package Manager и требуется для установки наших пакетов Gulp.
Установите gulp cli.

  $ npm установить gulp-cli -g

Создайте каталог и перейдите в него.

  $ mkdir my-project && cd my-project

Создайте файл package.json .Оставьте пока все параметры по умолчанию.

Для чего используется файл package.json?
Файл package.json — это манифест идентификаторов проекта и его пакетов.
Когда этот файл присутствует в каталоге, npm автоматически установит все пакеты проекта при выполнении команды $ npm install.
Параметры конфигурации см. В официальной документации package.json.

Установить Gulp

Что делают разные флаги, такие как -g и -D?
Это флаги, указывающие npm, куда устанавливать пакеты.
-g устанавливает пакет глобально. Экземпляры глобальных пакетов могут быть созданы всеми приложениями.
-D — это сокращение для —save-dev. Это означает, что пакет устанавливается в каталог, содержащий package.json .
См. Официальную документацию по npm cli для получения информации о различных параметрах флага.

Домо Аригато, мистер Робото

Это то, чего мы добьемся.

Запускаем сервер разработки и запускаем браузер, когда мы запускаем команду gulp .
Перезагружайте браузер всякий раз, когда мы сохраняем изменения в наших файлах.
Скомпилируйте все наши файлы Sass и переименуйте расширение в .css.
Скомпилируйте и уменьшите все наши файлы JavaScript.
Внедрить наши файлы CSS и JS в HTML.
Переместите все файлы сборки в отдельную папку.

Создайте файл gulpfile.js в корне проекта.

Текущий каталог будет выглядеть примерно так.

  ├── глоток.js
├── node_modules
├── package-lock.json
└── package.json

Когда мы установили Gulp , npm сгенерировал папку node_modules внутри каталога проекта. По умолчанию npm хранит здесь все необходимые пакеты для проекта.
npm также сгенерировал package-lock.json. Он используется для отслеживания любых изменений в папке node_modules .

Начнем писать код.

Откройте файл gulpfile.js и добавьте эту функцию.

  const {глоток} = требуется ('глоток');

function defaultTask (done) {
    console.log («Работает!»);
    сделано();
}

export.default = defaultTask

Выполните команду gulp .

Вы увидите результаты задачи по умолчанию.

  [17:11:13] Использование gulpfile ~ / Desktop / my-project / gulpfile.js
[17:11:13] Запуск "по умолчанию" ...
Оно работает!
[17:11:13] Завершено "по умолчанию" через 2,45 мс

Когда мы запустили команду, выполняется функция defaultTask и выводит результат в терминал.

Поскольку каждая задача gulp выполняется асинхронно, нам нужно возвращать сигнал, чтобы решить, продолжать ли при успехе или завершить работу при неудаче.
Этот шаблон известен как обратный вызов при первой ошибке.

Мы делаем это, передавая аргумент с именем done () в приведенном выше примере.

Давайте расширимся дальше. Создайте две папки src и dist в корневой папке.

Создайте еще три папки в src .

  $ mkdir src / img src / js src / scss

Создайте базовый файл HTML в src / index.html .

  


    
    
    
     Шаблон Sass Bootstrap Gulp 


    
     Привет, мир!

Загрузите версию Bootstrap 4 для Sass здесь.Разархивируйте файл и скопируйте все файлы из bootstrap-4.2.1 / scss / в src / scss / .

Вскоре мы напишем сценарии, которые будут выполнять различные задачи gulp для файлов в папке src .

Прежде чем мы это сделаем, нам нужно установить пару пакетов, а именно:

del
Удалить файлы и папки
gulp-uglify
Плагин минификатора JavaScript для gulp
gulp-rename
Плагин gulp для переименования файлов
gulp-cache
Задача кэширования gulp, чтобы мы строили только файлы, которые изменились
gulp-sass
Плагин Sass для Gulp
gulp-sass-partials-import
Пакет для импорта файлов scss partials
gulp-clean-css
Плагин gulp для минимизации файлов CSS
gulp-inject
Плагин gulp, который добавляет ссылки CSS и JavaScript в ваш HTML-код
gulp-connect
Плагин gulp для запуска локального сервера разработки
gulp-livereload
Плагин gulp для запуска обновления браузера при сохранении кода.Загрузите расширение Chrome LiveReload, если вы используете Chrome, иначе этот плагин не будет работать.
gulp-open
Запускает веб-браузер и открывает URL-адрес

Установка пакетов Gulp

Мы могли устанавливать пакеты один за другим через терминал, но это скучно и утомительно.

Давайте ускорим нашу установку, объявив зависимости в package.json и установив их за один раз.

  {
    "name": "мой-проект",
    "версия": "1.4.0.0 "
    },
    "scripts": {
    "test": "echo \" Ошибка: тест не указан \ "&& exit 1"
    },
    "автор": "",
    "лицензия": "ISC"
}

Запустите команду установки с терминала, и все пакеты будут в папке node_modules . Как это круто?

Мы закончили начальную настройку. Перейдите ко второй части руководства, где мы начнем писать задачи gulp.

Проектирование в браузере с использованием Gulp, Slush, Bootstrap 4 и Sass

LookFar Labs14 июля 2016 г.

Возможность пропустить макеты экранов звучит очень привлекательно, но во многом зависит от того, что вы создаете.Вместо того, чтобы обсуждать, почему и когда вам следует разрабатывать в браузере, этот пост будет практическим руководством по настройке рабочего процесса для прототипирования в браузере с использованием Gulp, Slush, Bootstrap 4 и Chrome DevTools.

TL; DR — Что мы делаем?

Мы будем использовать инструмент построения лесов под названием Slush, чтобы запустить наш проект с генератором, созданным специально для этого руководства, который называется slush-prototyper. Slush использует Gulp для создания новых структур проекта, основанных на генераторах, созданных сообществом.Генератор в этом руководстве поставляется с Sass, Sourcemaps, Bootstrap 4, jQuery и Modernizr прямо из коробки.

Таким образом, все, что вам нужно сделать, это настроить рабочее пространство в Chrome DevTools, и вы можете начать создавать прототипы прямо в браузере. Давайте начнем.

Шаг 1. Установите инструменты и создайте проект

Если вы еще этого не сделали, вам необходимо установить NodeJS. В противном случае откройте терминал и следуйте за ним.

Установите Gulp. Он нам понадобится для нашего реального проекта

 npm install -g gulp

Install Slush.

 npm install -g slush

Установите генератор slush-prototyper, который мы создали для этого руководства.

 npm install -g slush-prototyper

Создать новый каталог

 mkdir project && cd project

Создайте новый проект с помощью slush-prototyper. Здесь у вас будет возможность создать проект с Bootstrap и Modernizr или без них.

 slush prototyper

Теперь запустите задачу gulp, чтобы запустить сервер, и пусть gulp следит за вашими scss-файлами на предмет любых изменений

 gulp serve

Шаг 2: Настройка рабочей области Chrome DevTools

Теперь, когда у нас есть все настройки проекта и Когда сервер запущен, пора настроить нашу рабочую область, чтобы мы могли редактировать наши scss-файлы прямо в браузере.

В только что открывшемся окне браузера щелкните правой кнопкой мыши в любом месте и проверьте любой элемент.

Щелкните три точки, чтобы открыть меню настроек.

Давайте обязательно включим исходные карты CSS, если вы еще этого не сделали.

Закройте настройки и перейдите на вкладку «Источники». Щелкните правой кнопкой мыши в левом столбце и выберите «Добавить папку в рабочую область». Перейдите в папку / app /, созданную slush-prototyper.

После того, как вы добавили папку / app /, вам нужно будет подтвердить, нажав «Разрешить».

Поскольку slush-prototyper установил файлы scss с исходными картами, все, что вам нужно сделать, это щелкнуть правой кнопкой мыши файл main.scss в источнике и сопоставить его как ресурс файловой системы.

DevTools неплохо справится с обнаружением файла, но убедитесь, что он отображается в app / styles / main.scss. Щелкните его и перезапустите DevTools, обновив. Вы также можете сопоставить (index) с index.html, если хотите редактировать разметку в DevTools.

Щелкните вкладку элементов и выберите тело в качестве примера.Щелкнув ссылку на таблицу scss, мы перейдем на вкладку «Источники», где сможем напрямую редактировать стили.

Попробуйте изменить стили и добавить свои. Когда закончите, щелкните вкладку правой кнопкой мыши и выберите «Сохранить» или нажмите Command / Ctrl + S.

В вашем терминале вы увидите, что ваши изменения сохранены, поскольку gulp наблюдает за вашими файлами.

Chrome обновится почти сразу, и вы увидите свои изменения в браузере.

(Необязательно) Установите дополнительные библиотеки внешнего интерфейса с помощью Bower

Этот генератор Slush поставляется с bower — это означает, что вы можете включить любые другие инструменты внешнего интерфейса, выполнив следующие действия.

 bower install --save plugin-name-here

Заключение

Создаете ли вы быстрый прототип или обновляете существующий проект, возможность редактирования прямо в браузере очень помогает сэкономить время. Мы надеемся, что структура, представленная в этом посте, поможет вам приступить к работе над вашим следующим проектом.

Автоматизируйте и улучшайте рабочий процесс сборки с помощью Keenthemes

  {
    "имя": "{тема}",
    "desc": "Файл конфигурации сборки Gulp",
    "версия": "{версия}",
    "config": {
        "отладка": ложь,
        "compile": {
            "rtl": {
                "включен": ложь,
                "пропускать": [
                    "select2",
                    "офигенный",
                    "fontawesome5",
                    "нуислайдер",
                    "тинимсе",
                    "sweetalert2"
                ]
            },
            "jsUglify": ложь,
            "cssMinify": правда,
            "jsSourcemaps": ложь,
            "cssSourcemaps": ложь
        },
        "дорожка": {
            "src": "../../../themes/{theme}/html/src ",
            "common_src": "../src",
            "node_modules": "node_modules"
        },
        "dist": [
            "../../../themes/{theme}/html/dist/assets"
        ]
    },
    "строить": {
        "база": {
            "src": {
                "стили": [
                    "{$ config.path.src} /sass/style.scss"
                ],
                "скрипты": [
                    "{$ config.path.common_src} / js / components / ** / *. js",
                    "{$ config.path.common_src} / js / layout / ** / *. js ",
                    "{$ config.path.src} / js / layout / ** / *. js"
                ]
            },
            "dist": {
                "стили": "{$ config.dist} /css/style.bundle.css",
                "скрипты": "{$ config.dist} /js/scripts.bundle.js"
            }
        },
        "плагины": {
            "Глобальный": {
                "src": {
                    "обязательный": {
                        "jquery": {
                            "скрипты": [
                                "{$ config.path.node_modules} /jquery/dist/jquery.js "
                            ]
                        },
                        "popper.js": {
                            "скрипты": [
                                "{$config.path.node_modules}/@popperjs/core/dist/umd/popper.js"
                            ]
                        },
                        "bootstrap": {
                            "скрипты": [
                                "{$ config.path.node_modules} / bootstrap / dist / js / bootstrap.min.js "
                            ]
                        },
                        "moment": {
                            "скрипты": [
                                "{$ config.path.node_modules} /moment/min/moment-with-locales.min.js"
                            ]
                        },
                        "perfect-scrollbar": {
                            "стили": [
                                "{$ config.path.node_modules} /perfect-scrollbar/css/perfect-scrollbar.css"
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} /perfect-scrollbar/dist/perfect-scrollbar.js "
                            ]
                        },
                        "wnumb": {
                            "скрипты": [
                                "{$ config.path.node_modules} /wnumb/wNumb.js"
                            ]
                        }
                    },
                    "по желанию": {
                        "select2": {
                            "стили": [
                                "{$ config.path.node_modules} /select2/dist/css/select2.css "
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} /select2/dist/js/select2.full.js",
                                "{$ config.path.common_src} /js/vendors/plugins/select2.init.js"
                            ]
                        },
                        "flatpickr": {
                            "стили": [
                                "{$ config.path.node_modules} / flatpickr / dist / flatpickr.css "
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} /flatpickr/dist/flatpickr.js",
                                "{$ config.path.common_src} /js/vendors/plugins/flatpickr.init.js"
                            ]
                        },
                        "formvalidation": {
                            "стили": [
                                "{$ config.path.common_src} / plugins / formvalidation / dist / css / formValidation.css "
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} /es6-shim/es6-shim.min.js",
                                "{$ config.path.common_src} /plugins/formvalidation/dist/js/FormValidation.full.min.js",
                                "{$ config.path.common_src} /plugins/formvalidation/dist/js/plugins/Bootstrap5.min.js"
                            ]
                        },
                        "daterangepicker": {
                            "стили": [
                                "{$ config.path.node_modules} /bootstrap-daterangepicker/daterangepicker.css "
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} /bootstrap-daterangepicker/daterangepicker.js"
                            ]
                        },
                        "bootstrap-maxlength": {
                            "скрипты": [
                                "{$ config.path.node_modules} /bootstrap-maxlength/src/bootstrap-maxlength.js"
                            ]
                        },
                        "bootstrap-multiselectsplitter": {
                            "скрипты": [
                                "{$ config.path.common_src} /plugins/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js "
                            ]
                        },
                        "Маска ввода": {
                            "скрипты": [
                                "{$ config.path.node_modules} /inputmask/dist/inputmask.js",
                                "{$ config.path.node_modules} /inputmask/dist/bindings/inputmask.binding.js",
                                "{$ config.path.node_modules} / inputmask / dist / lib / extensions / inputmask.date.extensions.js ",
                                "{$ config.path.node_modules} /inputmask/dist/lib/extensions/inputmask.numeric.extensions.js"
                            ]
                        },
                        "nouislider": {
                            "стили": [
                                "{$ config.path.node_modules} /nouislider/distribute/nouislider.css"
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} / nouislider / distribute / nouislider.js "
                            ]
                        },
                        "авто размер": {
                            "скрипты": [
                                "{$ config.path.node_modules} /autosize/dist/autosize.js"
                            ]
                        },
                        "буфер обмена": {
                            "скрипты": [
                                "{$ config.path.node_modules} /clipboard/dist/clipboard.min.js"
                            ]
                        },
                        "зона сброса": {
                            "стили": [
                                "{$ config.path.node_modules} /dropzone/dist/dropzone.css "
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} /dropzone/dist/dropzone.js",
                                "{$ config.path.common_src} /js/vendors/plugins/dropzone.init.js"
                            ]
                        },
                        "quil": {
                            "стили": [
                                "{$ config.path.node_modules} / quill / dist / quill.snow.css "
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} /quill/dist/quill.js"
                            ]
                        },
                        "tiny-slider": {
                            "стили": [
                                "{$ config.path.node_modules} /tiny-slider/dist/tiny-slider.css"
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} /tiny-slider/dist/tiny-slider.js "
                            ]
                        },
                        "tagify": {
                            "стили": [
                                "{$config.path.node_modules}/@yaireo/tagify/dist/tagify.css"
                            ],
                            "скрипты": [
                                "{$config.path.node_modules}/@yaireo/tagify/dist/tagify.polyfills.min.js",
                                "{$ config.path.node_modules}/@yaireo/tagify/dist/tagify.min.js "
                            ]
                        },
                        "bootstrap-markdown": {
                            "стили": [
                                "{$ config.path.node_modules} /bootstrap-markdown/css/bootstrap-markdown.min.css"
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} /markdown/lib/markdown.js",
                                "{$ config.path.node_modules} /bootstrap-markdown/js/bootstrap-markdown.js ",
                                "{$ config.path.common_src} /js/vendors/plugins/bootstrap-markdown.init.js"
                            ]
                        },
                        "animate.css": {
                            "стили": [
                                "{$ config.path.node_modules} /animate.css/animate.css"
                            ]
                        },
                        "toastr": {
                            "стили": [
                                "{$ config.path.node_modules} /toastr/build/toastr.css "
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} /toastr/build/toastr.min.js"
                            ]
                        },
                        "dual-listbox": {
                            "стили": [
                                "{$ config.path.node_modules} /dual-listbox/dist/dual-listbox.css"
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} /dual-listbox/dist/dual-listbox.js "
                            ]
                        },
                        "apexcharts": {
                            "стили": [
                                "{$ config.path.node_modules} /apexcharts/dist/apexcharts.css"
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} /apexcharts/dist/apexcharts.min.js"
                            ]
                        },
                        "Диаграмма.js ": {
                            "стили": [
                                "{$ config.path.node_modules} /chart.js/dist/Chart.css"
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} /chart.js/dist/Chart.js"
                            ]
                        },
                        "bootstrap-session-timeout": {
                            "скрипты": [
                                "{$ config.path.common_src} / plugins / bootstrap-session-timeout / dist / bootstrap-session-timeout.min.js "
                            ]
                        },
                        "jquery-idletimer": {
                            "скрипты": [
                                "{$ config.path.common_src} /plugins/jquery-idletimer/idle-timer.min.js"
                            ]
                        },
                        "countup.js": {
                            "скрипты": [
                                "{$ config.path.node_modules} /countup.js/dist/countUp.umd.js"
                            ]
                        },
                        "sweetalert2": {
                            "стили": [
                                "{$ config.path.node_modules} /sweetalert2/dist/sweetalert2.css "
                            ],
                            "скрипты": [
                                "{$ config.path.node_modules} /es6-promise-polyfill/promise.min.js",
                                "{$ config.path.node_modules} /sweetalert2/dist/sweetalert2.min.js",
                                "{$ config.path.common_src} /js/vendors/plugins/sweetalert2.init.js"
                            ]
                        },
                        "line-awesome": {
                            "стили": [
                                "{$ config.path.node_modules} /line-awesome/dist/line-awesome/css/line-awesome.css "
                            ],
                            "шрифты": [
                                "{$ config.path.node_modules} / line-awesome / dist / line-awesome / fonts / **"
                            ]
                        },
                        "bootstrap-icons": {
                            "стили": [
                                "{$ config.path.node_modules} /bootstrap-icons/font/bootstrap-icons.css"
                            ],
                            "шрифты": [
                                "{$ config.path.node_modules} / bootstrap-icons / font / fonts / ** "
                            ]
                        },
                        "@fortawesome": {
                            "стили": [
                                "{$config.path.node_modules}/@fortawesome/fontawesome-free/css/all.min.css"
                            ],
                            "шрифты": [
                                "{$config.path.node_modules}/@fortawesome/fontawesome-free/webfonts/**"
                            ]
                        }
                    },
                    "override": {
                        "стили": [
                            "{$ config.path.src} /sass/plugins.scss "
                        ]
                    }
                },
                "dist": {
                    "стили": "{$ config.dist} /plugins/global/plugins.bundle.css",
                    "scripts": "{$ config.dist} /plugins/global/plugins.bundle.js",
                    "images": "{$ config.dist} / plugins / global / images",
                    "шрифты": "{$ config.dist} / plugins / global / fonts"
                }
            },
            "обычай": {
                "перетаскиваемый": {
                    "src": {
                        "скрипты": [
                            "{$ config.path.node_modules}/@shopify/draggable/lib/draggable.bundle.js ",
                            "{$config.path.node_modules}/@shopify/draggable/lib/draggable.bundle.legacy.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/draggable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/sortable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/droppable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/swappable.js ",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/collidable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/resize-mirror.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/snappable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/swap-animation.js "
                        ]
                    },
                    "dist": {
                        "скрипты": "{$ config.dist} /plugins/custom/draggable/draggable.bundle.js"
                    }
                },
                "prismjs": {
                    "src": {
                        "стили": [
                            "{$ config.path.node_modules} /prism-themes/themes/prism-shades-of-purple.css"
                        ],
                        "скрипты": [
                            "{$ config.path.node_modules} /prismjs/prism.js ",
                            "{$ config.path.node_modules} /prismjs/components/prism-bash.js",
                            "{$ config.path.node_modules} /prismjs/components/prism-javascript.js",
                            "{$ config.path.node_modules} /prismjs/components/prism-scss.js",
                            "{$ config.path.node_modules} /prismjs/components/prism-css.js",
                            "{$ config.path.node_modules} / prismjs / plugins / normalize-whitespace / prism-normalize-whitespace.js ",
                            "{$ config.path.common_src} /js/vendors/plugins/prism.init.js"
                        ]
                    },
                    "dist": {
                        "стили": "{$ config.dist} /plugins/custom/prismjs/prismjs.bundle.css",
                        "скрипты": "{$ config.dist} /plugins/custom/prismjs/prismjs.bundle.js"
                    }
                },
                "fullcalendar": {
                    "src": {
                        "стили": [
                            "{$ config.path.node_modules}/@fullcalendar/core/main.css ",
                            "{$config.path.node_modules}/@fullcalendar/daygrid/main.css",
                            "{$config.path.node_modules}/@fullcalendar/list/main.css",
                            "{$config.path.node_modules}/@fullcalendar/timegrid/main.css"
                        ],
                        "скрипты": [
                            "{$config.path.node_modules}/@fullcalendar/core/main.js",
                            "{$ config.path.node_modules}/@fullcalendar/daygrid/main.js ",
                            "{$config.path.node_modules}/@fullcalendar/google-calendar/main.js",
                            "{$config.path.node_modules}/@fullcalendar/interaction/main.js",
                            "{$config.path.node_modules}/@fullcalendar/list/main.js",
                            "{$config.path.node_modules}/@fullcalendar/timegrid/main.js"
                        ]
                    },
                    "dist": {
                        "стили": "{$ config.dist} /plugins/custom/fullcalendar/fullcalendar.bundle.css ",
                        "скрипты": "{$ config.dist} /plugins/custom/fullcalendar/fullcalendar.bundle.js"
                    }
                },
                "gmaps": {
                    "src": {
                        "скрипты": [
                            "{$ config.path.node_modules} /gmaps/gmaps.js"
                        ]
                    },
                    "dist": {
                        "scripts": "{$ config.dist} / plugins / custom / gmaps / gmaps.js "
                    }
                },
                "flot": {
                    "src": {
                        "скрипты": [
                            "{$ config.path.node_modules} /flot/dist/es5/jquery.flot.js",
                            "{$ config.path.node_modules} /flot/source/jquery.flot.resize.js",
                            "{$ config.path.node_modules} /flot/source/jquery.flot.categories.js",
                            "{$ config.path.node_modules} /flot/source/jquery.flot.pie.js",
                            "{$ config.path.node_modules} /flot/source/jquery.flot.stack.js ",
                            "{$ config.path.node_modules} /flot/source/jquery.flot.crosshair.js",
                            "{$ config.path.node_modules} /flot/source/jquery.flot.axislabels.js"
                        ]
                    },
                    "dist": {
                        "скрипты": "{$ config.dist} /plugins/custom/flot/flot.bundle.js"
                    }
                },
                "datatables.net": {
                    "src": {
                        "стили": [
                            "{$ config.path.node_modules} /datatables.net-bs4/css/dataTables.bootstrap4.css ",
                            "{$ config.path.node_modules} /datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css",
                            "{$ config.path.node_modules} /datatables.net-autofill-bs4/css/autoFill.bootstrap4.min.css",
                            "{$ config.path.node_modules} /datatables.net-colreorder-bs4/css/colReorder.bootstrap4.min.css",
                            "{$ config.path.node_modules} /datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.min.css ",
                            "{$ config.path.node_modules} /datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css",
                            "{$ config.path.node_modules} /datatables.net-keytable-bs4/css/keyTable.bootstrap4.min.css",
                            "{$ config.path.node_modules} /datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css",
                            "{$ config.path.node_modules} /datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.min.css ",
                            "{$ config.path.node_modules} /datatables.net-rowreorder-bs4/css/rowReorder.bootstrap4.min.css",
                            "{$ config.path.node_modules} /datatables.net-scroller-bs4/css/scroller.bootstrap4.min.css",
                            "{$ config.path.node_modules} /datatables.net-select-bs4/css/select.bootstrap4.min.css"
                        ],
                        "скрипты": [
                            "{$ config.path.node_modules} /datatables.net/js/jquery.dataTables.js ",
                            "{$ config.path.common_src} /js/vendors/plugins/datatables.init.js",
                            "{$ config.path.node_modules} /datatables.net-autofill/js/dataTables.autoFill.min.js",
                            "{$ config.path.node_modules} /datatables.net-autofill-bs4/js/autoFill.bootstrap4.min.js",
                            "{$ config.path.node_modules} /jszip/dist/jszip.min.js",
                            "{$ config.path.node_modules} / pdfmake / build / pdfmake.min.js ",
                            "{$ config.path.node_modules} /pdfmake/build/vfs_fonts.js",
                            "{$ config.path.node_modules} /datatables.net-buttons/js/dataTables.buttons.min.js",
                            "{$ config.path.node_modules} /datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js",
                            "{$ config.path.node_modules} /datatables.net-buttons/js/buttons.colVis.js",
                            "{$ config.path.node_modules} /datatables.net-buttons/js/buttons.flash.js ",
                            "{$ config.path.node_modules} /datatables.net-buttons/js/buttons.html5.js",
                            "{$ config.path.node_modules} /datatables.net-buttons/js/buttons.print.js",
                            "{$ config.path.node_modules} /datatables.net-colreorder/js/dataTables.colReorder.min.js",
                            "{$ config.path.node_modules} /datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
                            "{$ config.path.node_modules} / datatables.net-fixedheader / js / dataTables.fixedHeader.min.js ",
                            "{$ config.path.node_modules} /datatables.net-keytable/js/dataTables.keyTable.min.js",
                            "{$ config.path.node_modules} /datatables.net-responsive/js/dataTables.responsive.min.js",
                            "{$ config.path.node_modules} /datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js",
                            "{$ config.path.node_modules} /datatables.net-rowgroup/js/dataTables.rowGroup.min.js ",
                            "{$ config.path.node_modules} /datatables.net-rowreorder/js/dataTables.rowReorder.min.js",
                            "{$ config.path.node_modules} /datatables.net-scroller/js/dataTables.scroller.min.js",
                            "{$ config.path.node_modules} /datatables.net-select/js/dataTables.select.min.js"
                        ]
                    },
                    "dist": {
                        "стили": "{$ config.dist} / plugins / custom / datatables / datatables.bundle.css ",
                        "скрипты": "{$ config.dist} /plugins/custom/datatables/datatables.bundle.js"
                    }
                },
                "jkanban": {
                    "src": {
                        "стили": [
                            "{$ config.path.node_modules} /jkanban/dist/jkanban.min.css"
                        ],
                        "скрипты": [
                            "{$ config.path.node_modules} /jkanban/dist/jkanban.min.js"
                        ]
                    },
                    "dist": {
                        "стили": "{$ config.dist} /plugins/custom/kanban/kanban.bundle.css ",
                        "скрипты": "{$ config.dist} /plugins/custom/kanban/kanban.bundle.js"
                    }
                },
                "листовка": {
                    "src": {
                        "стили": [
                            "{$ config.path.node_modules} /leaflet/dist/leaflet.css",
                            "{$ config.path.node_modules} /esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css"
                        ],
                        "скрипты": [
                            "{$ config.path.node_modules} /leaflet/dist/leaflet.js ",
                            "{$ config.path.node_modules} /esri-leaflet/dist/esri-leaflet.js",
                            "{$ config.path.node_modules} /esri-leaflet-geocoder/dist/esri-leaflet-geocoder.js"
                        ]
                    },
                    "dist": {
                        "стили": "{$ config.dist} /plugins/custom/leaflet/leaflet.bundle.css",
                        "скрипты": "{$ config.dist} / plugins / custom / leaflet / leaflet.bundle.js "
                    }
                }
            }
        },
        "обычай": {
            "src": {
                "стили": [
                    "{$ config.path.common_src} / sass / custom / ** / *. scss",
                    "{$ config.path.src} / sass / custom / ** / *. scss"
                ],
                "скрипты": [
                    "{$ config.path.common_src} / js / custom / ** / *. js",
                    "{$ config.path.src} / js / custom / ** / *. js"
                ]
            },
            "dist": {
                "стили": "{$ config.dist} / css / custom / ",
                "скрипты": "{$ config.dist} / js / custom /"
            }
        },
        "СМИ": {
            "src": {
                "СМИ": [
                    "{$ config.path.src} / media /**/*.*",
                    "{$ config.path.common_src} / media /**/*.*"
                ]
            },
            "dist": {
                "media": "{$ config.dist} / media /"
            }
        },
        "api": {
            "src": {
                "СМИ": [
                    "{$ config.path.src} / api /**/*.* ",
                    "{$ config.path.common_src} / api /**/*.*"
                ]
            },
            "dist": {
                "media": "{$ config.dist} / api /"
            }
        }
    }
}

Использование gulp.js для подтемы Bootstrap Barrio в среде cPanel

Что мне нужно было сделать

Я разрабатываю и поддерживаю несколько веб-сайтов на Drupal. Я занимаюсь разработкой на сервере с cPanel (в учетной записи Linux, которая полностью изолирована от учетной записи, на которой запущены какие-либо производственные сайты), в первую очередь работа по тематике.

Я хотел разработать собственную подтему базовой темы Drupal Barrio (реализация Bootstrap). Поскольку мне нравится использовать Sass в качестве препроцессора CSS, чтобы предоставить мне поддерживаемые исходные файлы, я хотел использовать тему Barrio SASS Starter Kit в качестве стартера. (Это подтема Баррио).

Этот стартовый набор использует Gulp для генерации окончательных таблиц стилей.

Итак, чтобы выполнять любую работу с темами из учетной записи cPanel, мне нужно было узнать, как запускать скрипты Gulp из cPanel.Gulp работает на node.js.

То, что я собираюсь описать, будет работать с другими темами Drupal, которые используют Gulp, а также будет работать с темами Drupal, которым нужны другие инструменты (например, Grunt).

Красная сельдь

Для хостинга cPanel я несколько лет использовал Veerotech. Они отличные, и я их очень рекомендую. При необходимости техническая поддержка оказывается своевременной днем и ночью. Вы разговариваете с настоящими специалистами, нанятыми самими Veerotech (никогда не привлекаемыми на аутсорсинг). Как человек, который достаточно компетентен в веб-хостинге (сам запускал серверы с использованием различных панелей управления и без панели), если мне понадобится помощь, я задам вопрос, сформулированный в правильной технической терминологии.В отличие от некоторых других провайдеров, они привлекают меня на этом уровне, читают и понимают фактически заданный вопрос и почти всегда решают с первого раза.

В частности, они предлагают две вещи, которых, как мне показалось, могло быть достаточно. 1. Имея только заявку в службу поддержки и пятиминутное ожидание, любая учетная запись может получить доступ к консоли / оболочке. 2. Их установка CloudLinux включает в себя инструмент для создания приложения Node в пользовательском интерфейсе cPanel, включая возможность запускать его из внешнего (под) домена, если вам нужен реальный веб-сайт, работающий на Node.

Мне не нужен публичный доступ, но я надеялся, что этот доступ к Node может дать мне возможность запускать скрипт Gulp из моей подтемы Barrio.

Увы, нет. Система приложений cPanel / CloudLinux Node предполагает, что вы будете запускать Node только из каталога, в котором вы создаете свое приложение. Если бы я попытался запустить сценарий Gulp для своей темы, он не смог бы увидеть зависимые модули (например, PostCSS). Так что это был не ответ.

Но я нашел решение, которое работает, и это действительно довольно просто, если знать, как это сделать.Фактически, это элегантно и чище, чем создание приложения Node, которое доступно (но ничего не делает) из общедоступного Интернета. Вот как:

Диспетчер версий узла

Node Version Manager — это пакет, который, по его собственным словам, «менеджер версий для node.js, предназначенный для установки для каждого пользователя и вызываемого для каждой оболочки. Nvm работает с любой POSIX-совместимой оболочкой (sh, тире, ksh, zsh, bash), в частности на этих платформах: unix, macOS и windows WSL ».

Важный бит — «на пользователя».Он устанавливается пользователем, желающим запустить его, в оболочке, которую он желает использовать. Разрешения root не нужны.

Шаг 1. Установите диспетчер версий узла

Документы говорят вам выполнить одну из этих двух команд.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | Баш

Лично я никогда не pipe curl или wget прямо в команду оболочки.Если загрузка будет повреждена или не будет завершена, вы можете случайно запустить половину скрипта и оставить все в нестабильном состоянии. Итак, я сделал это:

wget https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh bash install.sh

Номер версии (0.37.2) был актуальным на момент запуска сценария установки. Очевидно, при запуске используйте текущую загрузку.

Это установит диспетчер версий узла в домашний каталог с именем .nvm и попытайтесь добавить в файл .bashrc строки, которые задают среду и путь для использования в будущем. Он также выводит на экран, как запускать эти команды самостоятельно, если вы не хотите снова входить в оболочку (или исходный код .bashrc ).

экспорт NVM_DIR = "$ HOME / .nvm" [-s "$ NVM_DIR / nvm.sh"] && \. "$ NVM_DIR / nvm.sh" # Это загружает nvm [-s "$ NVM_DIR / bash_completion"] && \. "$ NVM_DIR / bash_completion" # Это загружает nvm bash_completion

Шаг 2: Установите Node.js

Теоретически вы просто запускаете

nvm установить узел

Я попробовал это первым, но столкнулся с проблемой. Скрипт gulp для подтемы Barrio вызывает node-sass.

В частности, он вызывал версию 4.14.1 node-sass, которая выдавала ошибку, потому что эта версия не поддерживает выпуски 15.x Node.js. К моменту прочтения может быть вызвана другая версия node-sass (5.0.0 действительно поддерживает Node.jx 15). Таким образом, вы можете просто запустить приведенную выше команду.

В моем случае мне пришлось посмотреть примечания к выпуску для node-sass 4.14.1 и увидеть, что самая высокая поддерживаемая версия Node.js — 14. Затем я пошел к таблице выпусков для Node.js, где я увидел это означало установку Node.js 14.15.4. Это должно быть возможно с

nvm установить 14.15.4

но почему то завис не доработав. В таблице выпусков также сказано, что 14.15.4 является текущей версией долгосрочной поддержки, поэтому я без проблем выполнил эту команду:

установка nvm --lts

Шаг 3: Установите необходимые модули для проекта

Теперь я мог вызывать команды на странице проекта Barrio SASS.Установите Bootstrap Barrio и Barrio SASS, запустите команду, включенную в Barrio SASS, чтобы создать свою собственную подтему, перейдите в каталог вашей настраиваемой темы и выполните эти две команды:

npm install --global gulp-cli npm install

Шаг 4: Вызов gulp

Теперь вы просто переходите в каталог своей настраиваемой темы и запускаете:

глоток

При этом будет найден gulpfile.js в каталоге проекта и скомпилированы ресурсы темы.Затем он будет продолжать работать, потому что gulpfile включает в себя gulp-watch, что означает, что он будет следить за тем, когда вы изменяете любой из файлов .scss и мгновенно перестраиваете тему. Так что вы можете предпочесть запустить

глоток и

, чтобы он оставался в фоновом режиме.

Сценарий Gulp также будет думать, что вы используете полную версию Node.js, что означает, что он попытается запустить процесс веб-обслуживания, прослушивающий определенный порт в интерфейсе localhost. Ничего из этого не будет работать в среде виртуального хостинга.Это нормально — вам это не нужно. Вам просто нужен Gulp для сборки файлов css для вашей темы, что он и сделает.

Использование bootstrap sass (npm) с gulp

2 ответа

Похожие вопросы:

9.2.1. Создание темы на основе Bootstrap. Компиляция SASS через Gulp.

Инструменты сборки. Начало работы · Bootstrap. Версия v4.0.0

Использование скриптов NPM

Афтопрефиксер

Локальная документация

Отслеживание багов

Gulp 4 with bootstrap 4. How to Customize Bootstrap 4 with Sass

Using Gulp with Bootstrap 4

Subscribe to RSS

Bootstrap 4 Grid only and SASS with Gulp

Bootstrap Starter

JayeshLab / bootstrap-4-sass-gulp-4-markerplate: шаблон Bootstrap 4.5.2 с задачами font-awesome, sass, gulp 4

Файлы

Обязательный

Начало работы

Около

Темы

ресурса

Лицензия

Bootstrap 4.4.1 Boilerplate с Gulp

Как к

Установить

Запустить сервер

Развитие

Производство

Webpack · Bootstrap

Установка Bootstrap

Импорт JavaScript

Импорт стилей

Импорт предварительно скомпилированного Sass

Импорт скомпилированного CSS

Автоматизируйте рабочий процесс разработки с помощью Gulp (часть 1)

Введение

Gulp спешит на помощь!

Требования

Начальная настройка

Для чего используется файл package.json?

Что делают разные флаги, такие как -g и -D?

Домо Аригато, мистер Робото

Начнем писать код.

Привет, мир!

Установка пакетов Gulp

Проектирование в браузере с использованием Gulp, Slush, Bootstrap 4 и Sass

TL; DR — Что мы делаем?

Шаг 1. Установите инструменты и создайте проект

Шаг 2: Настройка рабочей области Chrome DevTools

(Необязательно) Установите дополнительные библиотеки внешнего интерфейса с помощью Bower

Заключение

Автоматизируйте и улучшайте рабочий процесс сборки с помощью Keenthemes

Использование gulp.js для подтемы Bootstrap Barrio в среде cPanel

Что мне нужно было сделать

Красная сельдь

Диспетчер версий узла

Шаг 1. Установите диспетчер версий узла

Шаг 2: Установите Node.js

Шаг 3: Установите необходимые модули для проекта

Шаг 4: Вызов gulp

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