I want to minify all .html files in a folder (and any folders within) using npm run script. Ideally, all .html files should be overwritten (if that's not possible, a new folder is acceptable). It is assumed that there will be non-HTML files in the input folder.
npm library minimize works only on per-file but not on folders.
Another npm library html-minifier does accept folder as input, but fails if there are any non-HTML files present in the input folder:
html-minifier --input-dir ./test1 --output-dir ./test2 --html-5 --collapse-whitespace
I need this to minify my static website's HTML files.
Since posting original question here on SO, html-minifier added the feature to ignore the non-HTML files. Now you can set directories and html-minifier won't error-out when it encounters non-HTML files.
Usage example, taken from my working npm task:
html-minifier --input-dir ./public --output-dir ./public --collapse-whitespace --file-ext html
Let's minify all our static websites' HTML files now!
Related
I am creating a typescript library, and when I am bundling it with parcel.js, the package.json file is not getting copied into the dist folder. Can any one let me know how can it be done?
You could accomplish this by using the copyfiles package and modifying your build script to copy the package.json file to the dist folder after parcel runs. (e.g. parcel build && copyfiles package.json dist).
However, the reason why parcel doesn't support this out of the box is that you probably don't want to do this. When you're making and publishing an npm library, there are a number of fields in your package.json that have special meaning - especially "main", but also "types" and "module". When you publish your library, you want to make sure that these fields point to the right thing.
When you run parcel build, parcel looks at these these fields in your package.json to decide where to put the output files.
So if you then copied your unmodified package.json file to the dist folder and tried to publish the dist folder as if it were your package, things would be broken for your users - the package.json's main field would point to dist/outputbundle.js, but the actual file would be at /bundleoutput.js.
If you want publish only a subset of the files in your project, the typical way to do this is to use the package.json files field to "whitelist" which folders get included when you run npm publish, without modifying the package structure (see docs).
I am running an angular 7 web application that has a dist folder with bunch of java script files that are not bundled. I would like to bundle all the java script file inside the dist folder in one java script file to minimize the http request when I load my web page
I have tried the following:
npm run build --aot --buildOptimizer --prod
I am expecting to see bundled files in dist folder
Your files will not be bundled to a single file. At least several files will be available like main.js, vendor.js etc.
However, if you want to pass building options like --aot you have to run
ng build --aot --prod
npm run build will run exactly the command defined in package.json.
I'm trying to use the h264-converter npm package (https://www.npmjs.com/package/h264-converter).
It is written in TypeScript. When I run npm install --save h264-converter I get a folder with the .ts TypeScript files, but it also comes with the .js Javascript files in the same folder already transpiled for you.
However, the .js files it comes with do not run in a browser. They contain Require(...) functions and undefined objects like exports that cause them not to run in a browser. Simply including these .js files with <script> tags causes errors. I did some reading and tried to use the browserify npm package (https://www.npmjs.com/package/browserify) to create .js files that work in a browser from .js files that don't. I ran
browserify "C:\...\h264-converter\dist\index.js" > "C:\...\h264-converter\dist\bundle.js"
like the in the example on the browserfiy main page and it seemed to run without error (their example uses main.js instead of index.js but I think index.js serves the same purpose). It created bundle.js. However, bundle.js still doesn't run in a broswer. bundle.js still has Require(...) functions.
How do I get the .js files that come with h264-converter npm package to run in a browser?
I can post the contents of some of the .js files that the h264-converter npm package comes with if that will help. Thanks.
npm package
To use an npm (node style commonjs) package in the browser you should use a a module bundler like webpack.
I am trying to minify my files in a different directory but keep the same directory structure. I am using ReactJS on separate pages individually. Here is my directory structure.
-- src/
--admin/
--admin.js
--users.js
--a.js
--b.js
Here is how the bundle directory should be:
-- dist/
--admin/
--admin.min.js
--users.min.js
--a.min.js
--b.min.js
As you can see the directory structure is copied to dist directory and all files are minified individually in their designated directory.
You can use task runners for tasks like that such as Gulp. With this you can include packages where you automate minification into the folders you want. To use Gulp you need to have Node.js installed.
How do i get my app to read .js and .css files after npm install?
What i did was:
npm install bootstrap#3
After which, the bootstrap folder goes into my node_modules folder. /node_modules/bootstrap I followed through with compiling the css and js files using grunt:
grunt dist
and it creates a dist folder in /node_modules/bootstrap/.
What i did now was to move the dist folder from "/node_modules/bootstrap/" into my public folder "/www" so i can include it into my page located in my public folder "/www/index.html"
But somehow this feels wrong and I'm not sure if i'm going the right way.
Looking around for some resource but just can't get much information. Anyone can provide a solution or direct me to some right resource so that i can find out more. Thanks.
I think you're actually doing fine, since bootstrap is only based on those .css & .js files.