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.
Related
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 first met html-minifier today after running a small site I've created using Hugo through Google PageSpeed.
First thing I noticed is that although it does have recursion capabilities it stops working on unsupported files like images (my speakers started beeping and I freaked a little)
I've found this stack showing an apparently undocumented command-line option --file-ext
That worked perfectly but in the output directory, I noticed that the folders with the unmatching contents were gone.
From the directory root, I saw it was Hugo's folders for CSS, JS, images and Github Pages' CNAME file. Not only I can't tell for sure there's not even one piece of static file in any of the folders Hugo generated (you may know that Hugo is sometimes unpredictable) but also I would like to keep language specific XML Sitemaps I've created for some specific folders.
Long story short, is there a way to copy-over unmatching files "as is", keeping input directory ready for a commit/push?
After analyzing the whole directory structure I could be sure that within all the directory structure Hugo creates there are nothing more than HTML and XML files so then the Ockham's Razor took place.
Since both my Hugo's source code and output contents are in totally different directories, it was a simple matter of pointing the output directory to the same path of the input directory.
All HTML files are minified, overwriting those Hugo generated.
Maybe the title is a bit strange, but I can't seem to find anything about on google.
Question: I have a folder that only contains .ts files and .json files.. Typescript compiles the .ts files and puts it into a separate directory (not as a bundle, just the directory structure 'as-is').
Src /
Workers /
[ModuleA.ts, ModuleA.json],
[ModuleB.ts, ModuleB.json],
[MobuleC.ts, ModuleC.json]
Most of the time I can just require('*.json') and the JSON file will be also placed in to build directory.
But now I have a situation, where importing the JSON will make no sense, because the JSON file gets updated every few seconds and I read the file with fs.readFile('*.json'), so I also don't want it floating around in the v8 cache (through require)
So how do I 'include' a JSON/None-Typescript file into the build, that is not explicitly being importing by either require or import?
For now I just used gulp to copy every .json file in the src folder over to the the respective dist/** folder.
But still find it strange typescript doesn't have something included for it..
Maybe you should checkout --resolveJsonModule, it's a newer feature of typescript.
I want to see CSS and JS files normaly when editing them. But when I save/upload them to server I want them to be minified. Is there a plugin/setting that does this in the current version of PHPstorm?
PHPStorm doesn't have any built-in functions for minifying files... But there are plenty of different tools on the web - plus you can create your own batch files for this.
I can suggest using Grunt grunt-contrib-uglify and grunt-contrib-cssmin tasks, for example . Both tasks support merging and minifying files. You can run the tasks using Grunt console. Or, you can use YUI Compressor and set it up as a file watcher (https://www.jetbrains.com/webstorm/help/minifying-javascript.html, https://www.jetbrains.com/webstorm/help/minifying-css.html)
You can add css, or js File Watcher in PhpStorm, see their docs, using uglify or yuicompressor. All configurable from the IDE
After proper setup, your .css and .js files will be minified locally( PhpStorm shows them nicely together in the left sidebar where your files are). Each time you change your original css or js file, minified versions will be autogenerated.
When uploading to the server, you just need to upload automatically minified versions.
Very convenient. I use it for non-Symfony projects ( in symfony i use assetic for minification and combining assets into one file)
Does jekyll build provide a hook which I can use to gzip each .html file in the _site directory? I'd like to have a corresponding example.html.gz file to an example.html file.
I would write a wrapper script in case there is no hook. I just want to be sure to make it in the cleanest way possible.
There is no hook in jekyll build.
The only way to generate additional content is to write a generator plugin.
If your goal is to serve the gzipped version of you pages, you must know that github pages already serves gzipped html, css and js.