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.
Related
I have php web site with a structure like
/
css/
js/
index.php
if I do, for example,
npm init
npm install bootstrap#4.6
it will create additionally
/
node_modules/
bootstrap/
dist/
css/
js/
...
What next? Should I cahnge all paths within php-s to this strange long path node_modules/boostrap/dist/js or there is a way to copy required files to topmost directories js/ and css/
Normally you wouldn't use node_modules directly. Instead, you'd have a build step with a bundler like Webpack, Rollup, Vite, Parcel, etc. that knows how to bundle your site's assets with assets in node_modules into an optimized set of files for delivery. One reason for that is "tree shaking" — bundling up and include only the parts of the modules you have in node_modules that you actually use in the code. The other is that node_modules has a lot of files in it (READMEs, etc.) that there's just no reason to include on your site (provided you're giving all necessary attribution somewhere).
You could cherry-pick the files you need from node_modules (at least in some cases), but it's labor-intensive. You'd be better off finding deployment-ready versions of the modules you want. Another option is to use unpkg.com which provides a CDN for npm modules.
I have an Electron application where I am trying to use asar to package the node_modules and sources directories excluding the other directories.
I noticed when building the application with asar enabled, the whole app directory is packaged. This is not ideal because some executables and DLL's need to be available outside the asar file.
What I've tried
Currently, I have a script that packages the sources and node_modules directories (using asar). This script is executed after Electron-Forge has built the executable. But Electron does not seem to automatically check the asar file for source and node_module files. I receive the error "Error: Cannot find module index.js". This gives the wanted file structure, but does not work with Electron (see "File structure" below).
File structure
File structure before creating executable:
- node_modules/
- sources/
- executable/
- images/
Wanted file structure after creating executable:
- resource/
- app/
- executable/
- images/
- sources.asar
- node_modules.asar
or the following (where the app.asar file should only contain the sources/ and node_modules/ directory):
- resource/
- app/
- executable/
- images/
- app.asar
And it's mainly important that Electron knows when to use the asar file and when to use the files directly. Is it possible to configure it like this, or something similar?
Question
Is there any way to configure Electron/Electron-Forge to only package certain directories into asar files while copying the other directories into the resource/app directory?
In your package.json in "build" section add the following code:
"build": {
"asar": true,
"asarUnpack": [
"**/thefirstfolder/secondfolder/**/*"
],
},
This "**/thefirstfolder/secondfolder/**/*" will unpack everything that is the child of secondfolder
Not sure if this is the right place to ask this, so please bear with me.
I'm quite new to build systems/ front end workflow and have relied heavily on IDE built in systems to do the work for me such as compiling Sass to css.
I recently discovered the world of npm gulp and now need to get a project working and compiled from a "dev" folder to a "build" folder.
What im not understanding is if a install bootstrap via npm it adds
in to the node_modules folder outside of these two folders. Am I
doing something wrong here? because I cd into the dev folder but yet
it installed it in the root folder.
how do I change my tag rev files from my dev to build if I
have to get files from the node_modules
The same goes for Angular, it is installed in the node_modules folder. how do I go about accessing the code from there to my dev folder and then compiling it to my build.
This works with the way node resolve modules. If you install a module like gulp, you will have a structure similar to this:
- node_modules/
- gulp/
...
- src/
index.js
gulpfile.js
In order to import gulp into your script, you can just use require('gulp') (or import gulp from 'gulp' if you are using EcmaScript6) and node will find out where to look for this module.
You can do it both from the gulpfile.js or from src/index.js. Node will try to find the node_modules folder in the script folder, or in any parent folder.
For most front-end build systems, your node_modules folder actually sits at the root of your project folder. Your dev folder (i.e. where you put your source code) which is a sub-folder of your project root, will then be able to see npm modules installed into the project root folder.
Note that in many front-end setups I've seen, the convention is to call that dev folder src instead.
I would set it up this way, use the app folder for development purposes, while the dist (as in "distribution") folder is used to contain optimized files for the production site.
Since app is used for development purposes, all your code will be placed in app and will compile in the dist folder when you run something like gulp build
|- app/
|- css/
|- fonts/
|- images/
|- index.html
|- js/
|- scss/
|- dist/
|- gulpfile.js
|- node_modules/
|- package.json
I am learning to use Gulp for web development, and has successfully set it up to optimize my assets for a production website. My folder structure looks like:
|- app/
|- less/
|- img/
...
|- plugins/
|- dist/
|- node_modules/
|- gulpfile.js
|- package.json
So currently my plugins are in the /app folder, whereas the whole site is being compiled in /dist for production. I could think of two options:
Move the /plugins folder outside the /app folder, however .html files inside the dist folder would have to link to files outside the dist in this case (e.g. ../plugins/...) which doesn't seem logical.
Copy the whole plugins folder every time I compile the project with gulp build which seems to take a while. Not sure if that's a right way to do it.
Any advice would be appreciated.
I'm a little surprised that I couldn't find this in their docs, but third party plugins should be managed by using npm.
'npm install --save plugin-name'
Arguably you might use the --save-dev flag instead
EDIT
As for third party clientside libraries, you can still use npm, but some folks prefer to use bower or other tools instead.
It is generally considered best practice to not minify the third party scripts further, but instead you'd leave them in node_modules and make that servable, copy them to your dist folder or concatenate them with your other files as appropriate to your requirements.
As for how you let index.html know where to find them, that's going to be the same as how you do it for other files and depends on your workflow. Some folks object all their scripts through a function on the server which either provides he location of the one concatenated and minified production file or an array of the separate source files and renders scripts for each as appropriate.
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!