In my project I use Webpack mainly for bundling .js and .css files.
Main question is about images. When images are used in .css files Webpack process them and exports to /dist folder. Which is fine, and works like a charm.
What I want to accomplish is pretty same story but with .html files. But! Html files are in different location then my wepack-app.
-/root
--/design
-----/src
--------/js
--------/css
--------/images
--------/...
-----/dist
--/templates
--/...
Is it possible to e.g pass additional path to scan for assets?
I don't want to produce new html. Just check which assets are used in html files from root/design/src/images then process them (same as from css files) and copy to /dist.
You can add a new entry point (a js file) that will require all the html files that you want to be processed.
You will need to install html-loader in order to allow webpack to "understand" html files.
I'm using the Gulp to build my SCSS, Pug and ES6 assets for my static website. I know it's possible to hash file names and output the files in a different directory.
For my specific example:
my Pug markdown are found in the ~/src/pages directory and getting built to the ~/public/ directory.
My SCSS stylesheets are found in the ~/src/stylesheets directory. These are getting built to the and getting ~/public/style directory
My problem is, when I'm referring to my stylesheets files from Pug, I have to refer to the already-built folder like this:
link(rel='stylesheet', href='./style/example.css')
For my IDE, this doesn't make sense, because the style directory doesn't exist in the ~/src/pages directory.
What I would find the most useful is that I can refer to my stylesheets like the example below:
link(rel='stylesheet', href='../stylesheets/example.scss')
Is there any way this is possible or am I completely going in the wrong direction? If not, where am I looking for?
Solution to make the file name like hash
gulp, for automating our task
gulp-rev, for renaming our files with random hashes.
gulp-rev-collector, for switching non-hashed references by hashed-references inside our files.
rev-del, for deleting non-hashed files in our /dist folder.
Sample code :
gulpfile.js
gulp.task("revision:rename", ["serve"], () =>
gulp.src(["dist/**/*.html",
"dist/**/*.css",
"dist/**/*.js",
"dist/**/*.{jpg,png,jpeg,gif,svg}"])
.pipe(rev())
.pipe(revdel())
.pipe(gulp.dest("dist"))
.pipe(rev.manifest({ path: "manifest.json" }))
.pipe(gulp.dest("dist"))
);
manifest.json
{
style.css: style-ds9udjvci.css,
main.js: main-dijds9xc9.min.js
}
For creating our revision update in the file like
Rewrite every reference for every key of manifest.json to it’s respective value inside every html/json/css/js file (i.e: <link href="style.css"> would become <link href="style-ds9udjvci.css">)
gulp.task("revision:updateReferences", ["serve", "revision:rename"], () =>
gulp.src(["dist/manifest.json","dist/**/*.{html,json,css,js}"])
.pipe(collect())
.pipe(gulp.dest("dist"))
);
You can use something like gulp-watch for real-time compiling of your .scss files, then your /style/example.css file will exist and it will be recompiled automatically when you modify example.scss
You may need to move some directories around to get everything to link, but you can use watch to build your Pug files too, so your site will always be up to date.
Basically, you make a change on any file in your project and view the update live.
Gulp cannot automatically change the file paths used inside the htmls. Therefore you will have to use the generated file path for accessing the style files.
Although if you want to have the file path as the folder structure of your scss, then you will have to replace the contents of the pug file after gulp has finished converting it to HTML.
You can convert the html to String and use the .replace method to replace whatever content you want to change and finally parse the string to a HTML document.
Hope this helps!!
I have created a new repository and and included all files necessary to host a website on github, see (https://github.com/tonystaark/tonystaark.github.io/tree/master)
However, I received a 404 error when I visited my own website at tonystaark.github.io. The error says that 'For root URLs (like http://example.com/) you must provide an index.html file.'
How do I convert my .pug format into a html (or .postcss into a .css) file then?
You can easily generate html from pug file using command line option,
pug -O '{"doctype": "html"}' index.pug
It's automatically generate index.html file for you.You can check other options from here
Pug files need to be compiled onto the server before being served as an HTML file. There aren't many great ways to compile Pug in the client. If you have a strong need to use Pug as a templating engine, GitHub Pages will not be able to do that. You will need to host your site somewhere that supports Node.js engines (Heroku, DigitalOcean, Amazon S3, etc.)
I didn't see any Pug files in your GitHub repo, though, so I don't know if you figured out another solution or tried to do something else.
I have a static HTML page which I am hosting on a personal server. I have a README.md file which I am storing in a public GH repo. I'd like to automatically include the contents of the ReadMe on my local html page.
Basically, I want to be able to update the Readme file in the project repo and have updated instructions automatically displayed on the project website.
Any thoughts?
Thanks
I think you might need more than just HTML for that. Perhaps look into using ajax to request your external resource and insert it into your page...
I am using Polymer. In my index file i have some php script that gets commented after I vulcanize it.
Is it possible to prevent vulcanize from commenting my php script?
I have tried:
searching in vulcanize's githup repository for relevant options.
searching in the same place for related
with no avail...
Any help greatly appreciated.
Put your polymer components in a separate directory, and serve them as static content. Vulcanize only those files and serve the vulcanized version as a static file.
import the static polymer files from the html your php scripts creates.