问题
I have a Gulp setup. In which i have setup bower for components. I am using these three files just to test the setup
1) Jquery
2) Owl Carousel
3) Font Awesome
The problem is that when i have completed my project i want to submit the files to a repository like Git or to a client or to upload to my client's site as WordPress theme.
But as like npm_modules folder i need to deleted my bower_components folder from it and then submit it.
But when i will submit things like that to a server like as a WordPress theme to a client's site. The required files like owl carousel's 3 files
"dist/owl.carousel.js",
"dist/assets/owl.carousel.css",
"dist/assets/owl.theme.default.css"
will not be the part of my project anymore.
So all the references like this to these files and all other components will be unusable in the project because the references will be like this
<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>
So my questions are these
1) how do i export all required files from bower components and make them part of my this project, this process should auto update the files being used in the process (like CSS/JS files of owl carousel should be auto updated in my custom directory when new version becomes available).
2) There are some scenarios where the developer doesn't includes all necessary files in the like in Font-Awesome the required files are
a) All SCSS files including the sub-parts like _variables.scss, __animated.scss to it's major file font-awesome.scss. Plus all the font files. but if we look at the bower.json file delveoper has only included the font-awesome.scss file only
"main": [
"less/font-awesome.less",
"scss/font-awesome.scss"
],
now let me explain my problems below.
About the first question of mine i have made a code in gulp what that does is export all REQUIRED JS and CSS files from all the files from all installed bower_components dependent on the .bower file present in the component folder
e.g. for Font-awesome .bower file
{
"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"
}
it will get the "less/font-awesome.less", "scss/font-awesome.scss" files only.
But when i will try to convert the font-awesome.scss file to css through scss gulp plugin it will give error saying
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 }) ) ;
});
I want the Gulp to automatically get the required files from the bower_components and put them in a place of my workplace say assets/js/vendor so that i can involve them in the project.
And this process should run every time there is any update or the bower install command is run.
Secondly i want the SCSS files to be exported with properly converted to css files. Like in this case the font-awesome's scss file can be copied but cannot be compiled because it is just a set of imports
/*!
* 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";
but no other file that font-awesome.scss has been copied due to it's .bower file as pasted above.
来源：https://stackoverflow.com/questions/54469515/how-to-include-bower-components-files-css-js-from-any-framework-in-end-product