How to copy referenced images in css files to dist folder - html

I'm having the following index.html file header:
<head>
<title>Visualization</title>
<!-- build:css styles/build.css -->
<link rel="stylesheet" href="../bower_components/bootstrap/css/bootstrap.custom.min.css">
<!-- inject:css -->
<link rel="stylesheet" href="app/index.css">
<link rel="stylesheet" href="app/components/graph/graph.component.css">
<link rel="stylesheet" href="app/components/highchart/highchart.component.css">
<link rel="stylesheet" href="app/components/my-app/app.component.css">
<!-- endinject -->
<!-- endbuild -->
The issue I'm facing right now is the following:
The file ../bower_components/bootstrap/css/bootstrap.custom.min.css contains references to fonts and images.
bower_components
bootstrap
css
bootstrap.custom.min.css
i
logo.png
fonts
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
src
index.html
I would like to write a bower script, that copies this files to the dist folder that I'm using to deploy my application including the actual hierarchy.
As I am having this issue a couple of times I would like to write a general (preferable gulp) task, that takes care of this.
Many thanks for your help.

You have to use a taskrunner to copy your files.
Here is a simple gulp setup to copy images, fonts and css from bower_components to your dist folder.
You may have to adjust the source and dist path.
var gulp = require('gulp');
gulp.task('copy:css', function() {
return gulp.src('./bower_components/path/to/css')
.pipe(gulp.dest('./dist/assets/css'))
});
gulp.task('copy:fonts', function() {
return gulp.src('./bower_components/path/to/fonts')
.pipe(gulp.dest('./dist/assets/fonts'))
});
gulp.task('copy:images', function() {
return gulp.src('./bower_components/path/to/images')
.pipe(gulp.dest('./dist/assets/images'))
});
If you use multiple locations, you can use an array instead of a string for your source files.
gulp.task('copy:images', function() {
return gulp.src([
'./bower_components/module1/path/to/images',
'./bower_components/module2/path/to/images'
])
.pipe(gulp.dest('./dist/assets/images'))
});
To execute your script you run gulp copy:css, gulp copy:fonts, gulp copy:images

Related

Read html files and find js/css and minify that and replace js/css name with old name - Gulp

I have a html file like this:
<html class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<!-- main css -->
<link rel="stylesheet" href="../src/vendors/clarity-ui/css/clarity-ui.min.css">
<link rel="stylesheet" href="../src/scss/main.css">
</head>
I want to read html file for do that:
Extract name and path css or js file
Minify css or js
Copy to dist directory
Rename css or js path/name to new location and name
How to do that with Gulp and Gulp plugins?
Look at gulp-useref. It has a good example:
var gulp = require('gulp'),
useref = require('gulp-useref'),
gulpif = require('gulp-if'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-clean-css');
gulp.task('html', function () {
// I made a small change to gulp.src below
return gulp.src('./app/*.html')
.pipe(useref())
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
.pipe(gulp.dest('dist'));
});
[EDIT : Added your html]
<html class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link rel="stylesheet" href="../src/vendors/clarity-ui/css/clarity-ui.min.css">
<!-- build:css dist/css/main.css -->
<link rel="stylesheet" href="../src/scss/main.css">
<!-- endbuild -->
<!-- build:js ../dist/js/myJS.js -->
<script src="../src/js/myJS.js"></script>
<!-- endbuild -->
</head>
I assume you do not want to change the already minified vendor css. So there is no need to put a directive around it.
And useref will not concatenate the vendor css because it will not grab that asset since their is no build directive around it.
You can do something similar for your js files.
[EDIT : added folder structure.]
-[your working directory]
---[app]
-----test.html
---[src]
------[scss]
--------main.css
------[js]
--------myJS.js
-gulpfile.js
So the gulpfile.js is in your base working directory above the app and src folders.
Running gulp html from your working directory will create a 'dist' folder with your minified css and uglified js in it and your modified main.html.
I have run this on a test system with this folder structure and it works perfectly. Let me know if you still have problems.

How to load CSS and Bootstrap files into server using node.js?

I have a html file called myfile.html that displays 'Hello World'. My css file called myfile.css is used to insert background image. My bootstrap files are used to insert a image in the form of a circle.
The HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<title>MY FILE</title>
<link rel="stylesheet" type="text/css" href="public\css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="public\myfile.css">
</head>
<body>
<h1>Hello World!!</h1>
<img src="public\pinky.jpg" class="img-circle">
</body>
</html>
My CSS file is as follows:
body {
background-image: url('fishy.jpg');
}
My node.js file called new.js is as follows:
const express = require('express')
const app = express()
app.use(express.static('public'))
app.get('/',function (req,res) {
console.log(__dirname)
res.sendFile(__dirname+"/myfile.html")
})
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
})
My main folder is called Bootsstrap and it has the following contents:
Bootsstrap
-myfile.html
-public /*Folder*/
/*inside public folder*/
-myfile.css
-css
-js
-fonts
-fishy.jpg /*background image*/
-pinky.jpg /*circular image*/
I open Command Prompt from Bootsstrap folder and run
node new.js
I get the message as:
'Example app listening on port 3000!'
When I open Chrome Browser and type localhost:3000, I get only 'Hello World'.The images are not getting displayed. I get an Error 404.
What can I do in order to run my HTML file in server using node.js by including all my css and bootstrap files?
You must not use the public path in your html. Also, in URLs use always forward slashes. Backslashes are just for Windows directories.
<!DOCTYPE html> <html> <head> <title>MY FILE</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
</head> <body> <h1>Hello World!!</h1>
<img src="pinky.jpg" class="img-circle"> </body> </html>
replace
<link rel="stylesheet" type="text/css" href="public\css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="public\myfile.css">
by
<link rel="stylesheet" type="text/css" href="css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
If you want to serve static files, such as html files, css, images, you need to make them available for the public. In your existing setup, only myfile.html is available for the public. Since you use css and other files from your server, you need to make them available also. The best way to achieve is to create a public folder and let express to make all the files available in the public folder.
Add to node.js
app.use('/', express.static('public'));
and rename your myfile.html to index.html
and in your index.html file
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
For example, your node.js should look like something
const express = require('express');
const app = express();
app.use('/', express.static('public'));
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
For more info Serving static files in Express
Edit
Your folder structure should be. no need of bootstap folder
public //public folder
-index.html
-myfile.css
-css
-js
-fonts
-fishy.jpg
-pinky.jpg

Bundle works wrong for css

I have these css files included in layout
<!-- Dropdown Menu -->
<link rel="stylesheet" href="~/Content/superfish.css">
<!-- Date Picker -->
<link rel="stylesheet" href="~/Content/bootstrap-datepicker.min.css">
<!-- CS Select -->
<link rel="stylesheet" href="~/Content/cs-select.css">
<link rel="stylesheet" href="~/Content/cs-skin-border.css">
<!-- Themify Icons -->
<link rel="stylesheet" href="~/Content/themify-icons.css">
<!-- Flat Icon -->
<link rel="stylesheet" href="~/Content/flaticon.css">
<!-- Icomoon -->
<link rel="stylesheet" href="~/Content/icomoon.css">
<!-- Flexslider -->
<link rel="stylesheet" href="~/Content/flexslider.css">
<!-- Style -->
<link rel="stylesheet" href="~/Content/style.css">
now I want to move these files in bundle so I did that:
public static void RegisterBundler(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/Content/style.css").Include(
"~/Content/superfish.css",
"~/Content/bootstrap-datepicker.min.css",
"~/Content/cs-select.css",
"~/Content/cs-skin-border.css",
"~/Content/themify-icons.css",
"~/Content/flaticon.css",
"~/Content/icomoon.css",
"~/Content/flexslider.css",
"~/Content/style.css"
));
BundleTable.EnableOptimizations = true;
}
and in my layout:
#Styles.Render("~/Content/style.css")
but from this:
it goes to this:
some of css code is missing when i open this new css file (from browser developer tool). Especially whole first file is missing (superfish.css) but it is in the same folder as others
What did I wrong?
It might get confused and renders the actual style.css instead of the bundle. Try changing the name of the bundle to something else, i.e. new StyleBundle("~/Content/main.css"). Also, you probably using the render wrong - it should be #Styles.Render("~/Content/style") (note the removed .css part)
Bundling is a new feature in ASP.NET 4.5 that makes it easy to combine or bundle multiple files into a single file.
The Bundle class Include method takes an array of strings, where each string is a virtual path to resource.
Change your code like below:
Note : remove the file extension inside the StyleBundle()
public static void RegisterBundler(BundleCollection bundles)
{
//
bundles.Add(new StyleBundle("~/Content/style").Include(
"~/Content/superfish.css",
"~/Content/bootstrap-datepicker.min.css",
"~/Content/cs-select.css",
"~/Content/cs-skin-border.css",
"~/Content/themify-icons.css",
"~/Content/flaticon.css",
"~/Content/icomoon.css",
"~/Content/flexslider.css",
"~/Content/style.css"
));
BundleTable.EnableOptimizations = true;
}
In Layout: Call like below
#Styles.Render("~/Content/style")
Hope it was helpful

What does the second argument of a gulp task mean:

I'm looking for an answer to this, doesn't have to be in depth or great detail. Just want to know exactly what happening with the sequence of the task.
gulp.task('name',['*this right here*'], function() {
// content
});
Does it mean do this task in consecutively namely with this definition task? Why this came up for me is because in my gulpfile.js I'm using gulp-inject for app files and wiredep for vendor dependencies. If this is wrong or either one will do then great, Im under the impression not though. What I have so far is below.
//originally i didn't have bower here in the array in 2nd param.
gulp.task('index', ['bower'], function() {
var target = gulp.src(files.app_files.target);
var sources = gulp.src(files.app_files.sources, {
read: false
});
return target.pipe(inject(sources))
.pipe(gulp.dest('./dist'));
});
gulp.task('bower', function() {
return gulp
.src(files.app_files.target)
.pipe(wiredep())
.pipe(gulp.dest('dist/'));
});
<head>
<meta charset="UTF-8">
<title>Example Page</title>
<!-- Vendor Files -->
<!-- bower:css -->
<!-- endbower -->
<!-- App Files -->
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<navigation></navigation>
<div ui-view></div>
<footer-area></footer-area>
<!-- Vendor Files -->
<!-- bower:js -->
<!-- endbower -->
<!-- App Files -->
<!-- inject:js -->
<!-- endinject -->
</body>
Update
gulp.task('index', function() {
var target = gulp.src(files.app_files.target);
// It's not necessary to read the files (will speed up things), we're only after their paths:
var sources = gulp.src(files.app_files.sources, {
read: false
});
return target
//here instead of breaking into new task i piped inject and wiredep, works great
.pipe(inject(sources))
.pipe(wiredep())
.pipe(gulp.dest('./dist'));
});
That's an array of tasks to run before your task.
Also, note those tasks (all the ones in the array, in you case there's only bower) run in parallel.
If you need some in sequence. Consider gulp-sequence

How to copy and inject the main-bower-files in one step using gulp?

When deploying my app I want to copy the bower dependency to the deploy directory and inject the links to these files into the index.html that is also in the deploy directory.
Each step alone works perfectly by I'm not able to combine them.
Copy the files:
return gulp.src(mainBowerFiles(), { read: false })
.pipe(gulp.dest('./deploy/lib/'));
Injecting the files:
return gulp.src('./deploy/index.html')
.pipe(plugins.inject(
gulp.src(mainBowerFiles(), { read: false }), { relative: true }))
.pipe(gulp.dest('./deploy/'));
I think that I should do this in one step to keep the correct order of the dependent files.
I tried this combination but it did not work out.
return gulp.src('./deploy/index.html')
.pipe(plugins.inject(
gulp.src(mainBowerFiles(), { read: false })
.pipe(gulp.dest('./deploy/lib/'), { relative: true })))
.pipe(gulp.dest('./deploy/'));
I recommend wiredep:
You add a block to your html:
<html>
<head>
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
</body>
</html>
and your wiredep task looks like:
// inject bower components
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/*.html')
.pipe(wiredep())
.pipe(gulp.dest('app'));
});
Which will add the deps to your html as such:
<html>
<head>
</head>
<body>
<!-- bower:js -->
<script src="bower_components/foo/bar.js"></script>
<!-- endbower -->
</body>
</html>
You can then combine this with useref to order all your project's javascript dependencies
html block
<!-- build:js scripts/app.js -->
<!-- bower:js -->
<script src="bower_components/foo/bar.js"></script>
<!-- endbower -->
<script src="js/yourcustomscript.js"></script>
<!-- endbuild -->
gulp task
gulp.task('html', ['styles'], function () {
var assets = $.useref.assets({searchPath: '{.tmp,app}'});
return gulp.src('app/*.html')
.pipe(assets)
.pipe(assets.restore())
.pipe($.useref())
.pipe(gulp.dest('dist'));
});
Take a look at how generator-gulp-webapp does things: https://github.com/yeoman/generator-gulp-webapp
Note: the $.plugin syntax assumes var $ = require('gulp-load-plugins')();