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.
Related
I'm working with svelte and made a chat widget, for styling I used tailwindcss.
the main problem with the chat widgets are you have to render them in an iframe so that it doesn't disturb the css of its remote site. so I achieved loading it inside iframe but it rendered without tailwind styles.
// main.ts is my file where I declared the iframe
import './app.css';
import App from './App.svelte';
// you can ignore this interface if you find it confusing
interface IWidget {
iframeContainer: HTMLElement | null;
init: (props: any) => void;
createContainer: () => void;
handleMessage: (event: MessageEvent) => void;
setupListeners: () => void;
}
const app = (() => {
// new App({
// target: document.getElementById('app'),
// });
const iframeContainer = document.createElement('div');
iframeContainer.id = 'my-chat-widget';
document.body.appendChild(iframeContainer);
// create iframe
const iframe = document.createElement('iframe');
iframe.id = 'my-chat-iframe';
iframe.srcdoc = `
<!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>My Support</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="my-widget"></div>
</body>
</html>`;
document.getElementById('my-chat-widget').appendChild(iframe);
const iframeWindow: HTMLIFrameElement =
document.getElementById('my-chat-iframe');
document.getElementById('my-chat-iframe').onload = () => {
new App({
target: iframeWindow.contentWindow.document.getElementById('my-widget'),
});
};
})();
export default app;
the file above is similar to index.tsx in react
Basically I'm directly targeting my svelte app into the iframe, only the problem I'am facing is the tailwind css is not loading.
methods I tried
adding Play CDN link from tailwind into head of above file.
(this worked but not feasible as production build)
directly linking the app.css into head of above file.
(this also worked but only in dev mode because the bundler adds its content hash, I want it to be production ready)
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.
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 using gulp to render haml using gulp-haml-coffee
I want to do something like this:
header.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Title</title>
<link rel="stylesheet" href="style.css?v=1.0">
</head>
home.haml
INCLUDE header.html
.content
Regular Haml Content
INCLUDE footer.html
footer.html
</body>
</html>
The tricky part for me is that it is a mix of HTML and Haml and I want them to be combined into one file automatically using Gulp.
Here is the current Gulp task:
// HAML
gulp.task('haml', function() {
return gulp.src('app/source/**/*.haml')
.pipe(customPlumber('HAML Error'))
.pipe(sourcemaps.init())
.pipe(haml({trace:true}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./app/compiled'))
.pipe(browserSync.reload({
stream: true
}))
});
The haml conversion is working but I can't figure out how to include plain HTML files as part of the conversion.
I'm going to be creating several other haml files (about, contact, etc.)
This is what I would want the rendered HTML to be:
home.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Title</title>
<link rel="stylesheet" href="style.css?v=1.0">
</head>
<div class="content">
Regular Haml Content
</div>
</body>
</html>
With gulp-haml Impossible to compile Ruby code like:
= Haml::Engine.new(File.read('./includes/menu-main.haml')).render
because gulp-haml has no full Ruby engine functionality. If you want to use Ruby, download it and install, then install haml for it (but Ruby requests are very slow ~1-3s). Or, use some other templater, like gulp-file-include, so you can compile then include your compiled .HTML files (im using gulp-jhaml, it has same features with gulp-haml):
var haml = require('gulp-jhaml'),
gih = require('gulp-include-html'),
browserSync = require('browser-sync');
gulp.task('haml', function() {
return gulp.src(['source-folder/*.haml'])
.pipe(haml({}, {eval: false}))
.on('error', function(err) {
console.error(err.stack)
})
.pipe(gulp.dest('source-folder/html'));
});
gulp.task('html-include', ['haml'], function () {
gulp.src(['source-folder/html/*.html'])
.pipe(gih({
prefix: '##'
}))
.pipe(gulp.dest('result-folder'));
});
gulp.task('watch', ['html-include', 'browser-sync'], function() {
gulp.watch('source-folder/*.haml', ['html-include']);
gulp.watch('result-folder/*.html', browserSync.reload);
});
gulp.task('default', ['watch']);
You can also try gulp-pug with a native function include. Pug - was called 'Jade' before.