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.
Related
Putting, in src/ directory, a main page (index.html) like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- build:css styles/index.css -->
<link rel="stylesheet" href="styles/index.css">
<!-- endbuild -->
</head>
<body></body>
</html>
And a CSS file (index.css in styles/ dir.) like e.g.:
body {
background-color: red;
}
I configure a Gulp task that link the CSS file with the HTML one:
const gulp = require('gulp'),
injStr = require('gulp-inject-string'),
useref = require('gulp-useref');
gulp.task('default', () => {
const tab = ' ',
nl = '\n',
nlTab = nl + tab;
return gulp.src('src/index.html')
//.pipe(injStr.before('</head>', tab + '<!-- build:css styles/index.css -->' + nlTab + '<link rel="stylesheet" href="styles/index.css">' + nlTab + '<!-- endbuild -->' + nl))
.pipe(useref())
.pipe(gulp.dest('.tmp/'));
});
If Gulp is executed, all the comments content is transformed to <link rel="stylesheet" href="styles/index.css">. Ok, it is normal.
Well, the problem occurs when I want simplify it avoiding write the comments manually in HTML. Uncomment the JS sourcecode (line 10), delete comments in HTML (8-10) and execute again. Gulp Useref does nothing! Transformation is not working. Why!?
I discovered the solution!:
The carriage return character is missing. Use '\r\n' instead of the lonely '\n'.
I am currently working on a starter project for future use that uses gulp and browser-sync to auto load new changes in the browser. I have it working for scss to css and for auto reloading html changes. The issue is that when it auto reloads html changes scss changes are all removed. For example, if I set changed the background color and save, the changes show up. Then I go to index.html and make a change and that shows up as well but removes the changes from the styles.scss file.
I have tried doing this with tasks as well as with functions. Neither has worked.
EDIT: I have gotten it to work by putting the index.html file in the main (./) directory. But I shouldn't have to do that to get it to work. Not sure why it doesn't work with index in the src folder
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Compile sass into CSS & auto-inject into browsers
function style(){
return gulp.src('./src/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./src/css'))
.pipe(browserSync.stream());
}
function watch() {
browserSync.init({
server: {
baseDir: './src'
}
});
gulp.watch('./src/scss/**/*.scss', style);
gulp.watch('./src/*.html').on('change', browserSync.reload);
gulp.watch('./src/js/**/*.js').on('change', browserSync.reload);
}
exports.style = style;
exports.watch = watch;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/styles.css">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a basic starter file!</p>
</body>
</html>
There are no error messages when I run this. The only issue is that saving the .html file removes the styles.scss changes.
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
For any URL which doesn't start with /static, I serve this index.html:
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="import" href="/app.html">
</head>
...
</html>
Note: the / in /app.html to ensure it always serves app.html from the root.
I wish to run gulp/vulcanize over app.html to:
create a bundle which sits in: /static/<version-or-timestampp-or-hash-here>/app.html
change the import in index.html to point to the the above generated bundle
I currently have the following gulp file that will do the vulcanize, but it won't do the versioning or change index.html link:
var gulp = require('gulp');
var vulcanize = require('gulp-vulcanize');
gulp.task('vulcanize', function() {
return gulp.src(['app.html'])
.pipe(vulcanize({
stripComments: true,
inlineScripts: true,
inlineCss: true
}))
.pipe(gulp.dest('static'));
});
gulp.task('default', ['vulcanize']);
How do I achieve the two points above?
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