I have the following folder structure
_build
src
|- \images
|- \js
|- \sass
I have built a gulp process so that when finished my .build folder will contain my finished solution
i.e
_build\index.html
_build\images\*.*
_build\js\site.min.js
_build\css\site.css
I have got my gulp task to compile my sass files, and the generated file is being correctly saved into the _build\css folder
Now within my index.html file, I have the following within the head element
<!-- inject:css -->
<!-- endinject -->
Now what I am trying to get is get the following injected
<link rel="stylesheet" href="css/site.css">
but what I keep on ending up with in
<link rel="stylesheet" href="/_build/css/site.css">
This is my gulp task to do the inject. p.s. I am using gulp-load-plugins aliased to $
gulp.task('inject', function() {
return gulp
.src('./src/index.html')
.pipe($.inject(gulp.src('./build/css/site.css', {read: false}), {relative: true}))
.pipe(gulp.dest('./_build/'));
});
Based on my interpretation of reading the documentation on https://www.npmjs.com/package/gulp-inject, using the relative option it should not include /_build/ in the output. However it is not being excluded.
How do I configure gulp-inject to properly excludethe /_build/ path
You are telling inject to use the relative path to the file. But relative to what? Well, relative to the source of your injection.
If your source is:
./build/css/site.css
You are going up a directory in the tree so inject is standing at ./ where ever that may be. Meaning, build/css/site.css is the correct relative path.
Now if your source on the other hand is:
build/css/site.css
The relative path to the css is /css/site.css.
Long story short. Call inject from the correct directory:
gulp.task('inject', function() {
return gulp
.src('./src/index.html')
.pipe($.inject(gulp.src('build/css/site.css', {read: false}), {relative: true}))
.pipe(gulp.dest('./_build/'));
});
Eliminate the ./
Edit
You may need to change and play with your cwd (current working directory)
Related
I have already compiled css files for external libraries like bootstrap, datatable etc. inside a css folder. These files will never be changed at any point so I don't want to compile their scss files and build out every time, hence the use of their css version.
However, I have a scss folder where all the styles for the application are written. What I want to achieve is, every time a change is made to a scss file, compile the scss and generate a css and then bundle this css with the two vendor css files (bootstrap, datatable) to create one single stylesheet and copy it over to the bundles folder.
wwwroot
--- bundles
--- css
--- bootstrap.css, datatables.css
--- js
--- scss
--- components
--- comp1.scss
--- comp2.scss
--- layout
--- header.scss
--- footer.scss
--- main.scss
const {src,dest,watch,series,parallel} = require('gulp');
const sass = require('gulp-sass')(require('sass')),
prefix = require('gulp-autoprefixer'),
minify = require('gulp-clean-css'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps');
function compileScss() {
return src('wwwroot/scss/main.scss')
.pipe(sourcemaps.init())
.pipe(sass({
errLogToConsole: true
}))
.pipe(prefix())
.pipe(sourcemaps.write('.'))
.pipe(dest('wwwroot/css/'));
}
function cssBundle() {
return src([
'wwwroot/css/bootstrap.min.css',
'wwwroot/css/dataTables.css',
'wwwroot/css/main.css'
])
.pipe(concat('styles.css'))
.pipe(dest('wwwroot/bundles/'));
}
function watchTask() {
watch('wwwroot/scss/**/*.scss',
parallel(compileScss));
}
exports.default = series(
parallel(compileScss),
cssBundle,
watchTask
);
The above code works fine first time when I run the >gulp command but any subsequent changes I make to scss files only work as far as compiling and generating the main.css and not bundling with the other two files as watch task continues to run in the background.
Just wondered how I can tell the task to compile the scss, then bundle with the vendor files and copy to the bundles folder every time a change is made to scss.
Thanks in advance
we're handling low level html markup as npm modules where one could specify via comment, the name of a modules whose supporting html would be injected at that location. A module contains the html, supporting SCSS and vanilla JS. From a SCSS & JS standpoint everything is buttoned up. The moment the module is installed, the SCSS is compiled, concatenated & appended to a core CSS file and then minified. The JS treatment is very similar.
Where I'm getting very hung up on is how to treat the html snippets. Here is what I've got, which works but this isn't dynamic in any way.
gulp.task('inject-atoms', function () {
gulp.src('./index.html')
.pipe(inject(gulp.src(['./node_modules/my-module-name/my-module-name.html']), {
starttag: '<!-- inject:html -->',
transform: function (filePath, file) {
return file.contents.toString('utf8')
}
}))
.pipe(gulp.dest('./'));
});
What I'd like to be able do (within the target index.html file) is specify module names whose html snippets get injected. So something like:
<!-- inject:my-module-ABC --!>
<!-- inject:my-module-XYC --!>
The only requirement being that the modules have been installed prior to trying to inject their snippets. So the gulp task would need to sweep through the index file and for each inject comment, go fetch that module's html snippet and inject it in.
Any tips on helping me move in the right direction?
Thanks!
I saw tutorials regarding webpack and i'm able to bundle everything in bundle.js and i'm able to import jquery in .js files.
In my application i'm using ajax,bootstrap-table, so i need jquery and bootstrap-table in index.html
Using webpack how can i pack and load these in html file using webpack?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
This is my webpack.config.js
var webpack =require('webpack');
module.exports = {
entry: './app.js',
output: {
filename: './bundle.js'
},
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
},
plugins:[
new webpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery'
})
]
};
If i want jquery in js file, in my nodejs file i'm adding require('jquery') but i want to load those in html?I didn't find much materials regarding this. If anyone knows please help!!!Thanks a lot in advance!!
Are you importing bootstrap inside app.js too?
Based on the current setup, the bundle is generated in the directory in which you have your webpack config file.
if you already have your html template[index.html], then you should include the relative path of the bundled js file in the index.html
i.e. <script src="./bundle.js"></script>
else if you want the bundled file to be included dynamically in your index.html template, you should have a look at html-webpack-plugin
I'm developing a sample application which uses bower for it's dependency management and gulp for it's build system.
I've used the main-bower-files plugin to copy all of the relevant files from the bower_components directory into a build/dist/bower_components directory.
This all works perfectly, and I can open my application's index.html which properly points to each of these files and they properly point to the assets.
My next step is to concatenate the bower_components so that I have a single CSS and a single JS file along with all of the assets (fonts, images, etc.). I have used gulp-useref to bundle all of the components, and it seems to work nicely.
However, some of the CSS and JS files being combined use relative paths to reference assets which are now incorrect since everything is in a single file:
FontAwesome
Bootstrap
and a custom bower component we are creating
Is there a standard solution for fixing the assets?
Do I need to use gulp to update the asset references or perhaps use a different plugin?
Using gulp-replace plugin we can concatenate bower_components assests.
For example:
var replace = require('gulp-replace');
gulp.task('fix-paths', ['minify'], function() {
gulp.src('public/css/site.css')
.pipe(replace('../', '../bower_components/bootstrap/dist/'))
.pipe(gulp.dest('public/css'));
});
I am using the gulp inject plugin to inject the concatenated file to the html. Something like this -
gulp.task('html', ['styles', 'vendor-js', 'templateCache', 'scripts'], function() {
gulp.src('./*.html')
.pipe(inject(gulp.src(['./dist/js/**/*.js'])
.pipe(angularFilesort()), {
'ignorePath': 'dist/js',
'addRootSlash': false,
'addPrefix': 'scripts'
}))
.pipe(inject(gulp.src(['./dist/vendors/**/*.js', '!./dist/vendors/less/less.js'], {
read: false
}), {
'name': 'vendors',
'ignorePath': 'dist/vendors',
'addRootSlash': false,
'addPrefix': 'vendors'
}))
.pipe(inject(gulp.src(['./dist/css/*.css'], {
read: false
}), {
'ignorePath': 'dist/css',
'addRootSlash': false,
'addPrefix': 'styles'
}))
.pipe(gulp.dest('dist'));
});
Let me know if you need any more code.
For CSS, I would suggest using gulp-rework, which wraps rework that has a number of very helpful plugins.
One of these is url, which provides a function for updating the urls contained within CSS.
An example where this is useful, is in CSS that contains no path to replace; e.g.
url(backgroundimage2.png)
Or, you want to perform different alterations of the URL based on type (e.g. only images, not web fonts).
A function can be composed that tests for asset type; the following example processes only image files:
// CSS
.pipe(cssFilter)
.pipe(rework(reworkUrl(function (url) {
// modifications on url, e.g. using http://medialize.github.io/URI.js/
if (url.match(/[^/]+(jpg|jpeg|png|gif)$/))
{
return '/lib/img/' + url.replace('../', '');
}
else
{
return url;
}
})))
Recently I found same problem so gone through various solutions and one of them was to replace the content of css in this answer itself. After looking the font-awesome.css it was clear that it refers relative path to reach fonts folder. same was the case with bootstrap css. Solution is simple now always make sure to keep css and fonts folder at same level and copy data. Even include your app specific min files here. Single place for all dist files makes life easy
What is the right way to copy bower resources using gulp.
I want a task "build" (for dev) that will:
Transforme /src/index.jade to /build/index.html
Copy bower resources to /build/vendor/*
Copy my resources to /build/css, js, assets
Inject this resources (my and bower's) in index.html
I'm having trouble with "font awesome", because they resources (.ttf, .otf...) are referenced in font-awesome.css as: "../font/fontawesome-webfont.ttf"
I tried with wiredep, that copied js and css to /vendor (no folder structure) and did not copied the fonts.
I also tried with main-bower-files, that also copied all resources (and fonts) to /vendor folder but also with no inner structure
And tried with bowerNormalizer, that create a folder structure like "/vendor/font-awesome//" (invalid too)
And, finally, tried with gulp-bower-files, that copied all bower files (min, dist, src), that is not right also
PS: I don't want min/uglify/concat right now. This things will be done later, at "dist" task
Another approachment:
suposing you have installed:
gulp
run-sequence
main-bower-files
gulp-inject
if you dont, you can install with npm like:
npm install gulp run-sequence main-bower-files gulp-inject --save-dev
Saving your dependencies into html file
Once you have it we start to configure the gulp tasks
//Here we only copy files to folder inside source code.
//In this case ./src/lib/
gulp.task("bower:copyfiles", function(cb){
return gulp.src(mainBowerFiles())
.pipe(gulp.dest('./src/lib'))
cb();
});
//This task is the one wich insert the script tag into
// HTML file. In this case is index.html and is in root
gulp.task('bower:insertfiles', function(cb){
return gulp.src('./src/index.html') //file with tags for injection
.pipe(inject(gulp.src(['./src/lib/*.js', './src/lib/*.css'], {read: false}), {
starttag: '<!-- bower:{{ext}} -->',
endtag: '<!-- endbower -->',
relative:true
}
))
.pipe(gulp.dest('./src')); //where index.html will be saved. Same dir for overwrite old one
})
//And this task will launch the process of copy and include into index.html
gulp.task('bower:buildlib', function(cb) {
runSequence('bower:copyfiles', 'bower:insertfiles',cb);
})
Now we have half process, we need to insert the tags into index.html to let gulp know where has to include the content
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- bower:css -->
<!-- HERE WILL BE INSERTED THE CODE. -->
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<!-- HERE WILL BE INSERTED THE CODE. -->
<!-- endbower -->
</body>
</html>
and the last step is run our task in command line
gulp bower:buildlib
Notes:
Is known some libraries installed with bower has different file configuration. f.e.: when you install bootstrap, css files are not included because inside bower.json (in the library folder on bower_components or whatever you have) is set in that way. You can fix this overwriting these options in the bower.json on your project root directory adding it like this (same bootstrap example):
"overrides":{
"bootstrap":{
"main":[
"dist/js/bootstrap.js",
"dist/css/bootstrap.min.css",
"less/bootstrap.less"
]
}
}
this way you set wich files are going to be include and wich ones not.
I solved this problem like this:
gulp.task('move', ['yourDependencies'], function(){
gulp.src(['bower_components/*.js', 'bower_components/somefile'], {
base:'.bower_components/somepath'
})
.pipe(gulp.dest(build/vendor/);
}
the base options defines the base dir of the file (that means it will not create the same dirs in the build folder). For more explanations visit: Why does gulp.src not like being passed an array of complete paths to files?
I do not know how to transform .jade - files into .html files (i'm sorry).
The inject thing can be solved with the gulp-inject plugin:
https://www.npmjs.com/package/gulp-inject
Sorry for my bad english :-)