У меня есть настройка Gulp.В котором я настроил беседку для компонентов.Я использую эти три файла только для проверки настроек
1) Jquery
2) Сова Карусель
3) Шрифт Awesome
Проблема в том, чтоКогда я закончу свой проект, я хочу отправить файлы в репозиторий, такой как Git или клиенту, или загрузить на сайт моего клиента в качестве темы WordPress.
Но, как и в папке npm_modules, мне нужно удалить папку bower_components.из него, а затем отправьте его.
Но когда я отправлю подобные вещи на сервер, например в качестве темы WordPress, на сайт клиента.Необходимые файлы, такие как 3 файла owl carousel
"dist/owl.carousel.js",
"dist/assets/owl.carousel.css",
"dist/assets/owl.theme.default.css"
, больше не будут частью моего проекта.
Так что все ссылки, подобные этим, на эти файлы и все другие компоненты будут непригодны для использования впроект, потому что ссылки будут такими:
<link rel="stylesheet" type="text/css" ref="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" ref="bower_components/owl.carousel/dist/bootstrap.owl.carousel.css">
<link rel="stylesheet" type="text/css" ref="bower_components/owl.carousel/dist/owl.theme.default.css">
<link rel="stylesheet" type="text/css" ref="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/owl.carousel/dist/owl.carousel.js"></script>
<script src="bower_components/jquery/dist/js/bootstrap.js"></script>
Итак, мои вопросы:
1) как мне экспортировать все необходимые файлы из компонентов bower и сделать их частью моего проекта,этот процесс должен автоматически обновлять файлы, используемые в процессе (например, файлы CSS / JS карусели сов должны автоматически обновляться в моем пользовательском каталоге, когда новая версия становится доступной).
2) В некоторых случаяхРазработчик не включает в себя все необходимые файлы, например, в Font-Awesome. Необходимые файлы:
a) Все файлы SCSS, включая такие части, как _variables.scss, __animated.scss, в основной файл font-awesome.scss.Плюс все файлы шрифтов.но если мы посмотрим на файл bower.json, delveoper включил только файл font-awesome.scss
"main": [
"less/font-awesome.less",
"scss/font-awesome.scss"
],
, теперь позвольте мне объяснить мои проблемы ниже.
О первом вопросе оМой я сделал код в gulp, что делает экспорт всех необходимых файлов JS и CSS из всех файлов из всех установленных bower_components в зависимости от файла .bower, присутствующего в папке компонентов
, например, для Font-awesome.файл bower
{
"name": "font-awesome",
"description": "Font Awesome",
"keywords": [],
"homepage": "http://fontawesome.io",
"dependencies": {},
"devDependencies": {},
"license": [
"OFL-1.1",
"MIT",
"CC-BY-3.0"
],
"main": [
"less/font-awesome.less",
"scss/font-awesome.scss"
],
"ignore": [
"*/.*",
"*.json",
"src",
"*.yml",
"Gemfile",
"Gemfile.lock",
"*.md"
],
"version": "4.7.0",
"_release": "4.7.0",
"_resolution": {
"type": "version",
"tag": "v4.7.0",
"commit": "a3fe90fa5f6fac55d197f9cbd18e3f57dafb716c"
},
"_source": "https://github.com/FortAwesome/Font-Awesome.git",
"_target": "^4.6.3",
"_originalSource": "fontawesome"
}
он получит только файлы "less / font-awesome.less", "scss / font-awesome.scss".
Но когда я попытаюсь конвертироватьфайл font-awesome.scss для css через плагин scss gulp выдаст ошибку: 1039 *
Error: File to import not found or unreadable: variables.
gulp.task('bower_scss', function(){
return gulp.src( config.bowerOutputDir + "**/*.scss", { base: "./" })
.pipe( plumber( errorHandler ) )
.pipe(
sass({
errLogToConsole: config.errLogToConsole,
outputStyle: config.outputStyle,
precision: config.precision,
// outputStyle: 'compressed',
sourceMap: true,
includePaths: config.includePathVar,
})
)
.on( 'error', sass.logError )
.pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
.pipe( gulp.dest( config.cssVendorPath ) )
.pipe( notify({ message: '\n\n✅ ===> Bower SCSS Files process — completed!\n', onLast: true }) );
});
gulp.task('bower_combine_css', function() {
return gulp.src( config.bowerOutputDir + "**/*.css")
.pipe(count('Copying ## Bower CSS files'))
.pipe(concat("combined_bower_css.css"))
.pipe(gulp.dest(config.cssVendorPath))
.pipe(count('All CSS flies combiened in ## file'))
.pipe( notify({ message: '\n\n✅ ===> Bower CSS Combination — completed!\n', onLast: true }) ) ;
});
gulp.task('bower_combine_js', function() {
return gulp.src( config.bowerOutputDir + "**/*.js")
.pipe(count('Combining ## Bower JS files'))
// .pipe(concat("combined_bower_js.js"))
.pipe(gulp.dest(config.jsVendorPath))
.pipe(count('## JS files copied to vendor folder'))
.pipe( notify({ message: '\n\n✅ ===> Bower JS Combination — completed!\n', onLast: true }) ) ;
});
Я хочу, чтобы Gulp автоматически получал необходимые файлы из bower_components и помещал их в местомое рабочее место говорит assets / js / vendor, чтобы я мог подключить их к проекту.
И этот процесс должен запускаться каждый раз, когда происходит какое-либо обновление или запускается команда установки bower.
Во-вторых, я хочу, чтобы файлы SCSS экспортировались с должным образом преобразованными в файлы CSSКак и в этом случае, файл scss font-awesome может быть скопирован, но не может быть скомпилирован, потому что это всего лишь набор импортов
/*!
* Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "animated";
@import "rotated-flipped";
@import "stacked";
@import "icons";
@import "screen-reader";
, но нет другого файла, который font-awesome.scss был скопирован,Файл .bower, как вставлено выше.