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.
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 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).
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
Currently we're developing two React-based applicaties, say app-a and app-b that has two dependencies we also manage. A shared-components package, which contains shared components, and a shared-utilities package which contains shared utilities between app-a and app-b. Both of these have their own full on package.json, and are included in the package.json of app-a and app-b.
Dependencies:
app-a
|- shared-components
|- shared-utilities
and
app-b
|- shared-components
|- shared-utilities
Each time we're developing something in for example shared-components that we want to use in for example app-a we have to perform too many steps:
Make <AwesomeComponent /> in shared-components
Build files in shared-components.
Commit/push to GitHub.
Point dependency in package.json from app-a to the specific branch.
Run npm install.
Use the <AwesomeComponent />.
If we made a mistake in developing the , we need to retart from step 1. Ofcourse we can skip the commit/push and npm install by copying the build files to the node_modules folder directly, but still, this is quite a hassle everytime we're building a component.
What workflow do you guys use or any tips/advice to speed up local development here?
Note; we're using webpack to bundle our files and babel to transpile.
What you want might be npm link.
Simply, in the shared-components set it up with sudo npm link. This creates symlinks in the global npm directories (hence the need for elevated privileges if you installed it as root).
Next all you need to do is to go into app-a and run npm link shared-components which will replace the folder in node_modules with a symlink.
It is possible I am misunderstanding how Bower is used. I have an ionic project with a number of Bower added libraries in the www/lib folder. I am having to explicitly include the js files in my index.html.
I thought having bower files was supposed to do this automatically for you. Is this not the case?
Nop, bower is a dependency library.
The library only reads your dependencies, looks for the best version (given your semver configuration in bower.json and dependencies configuration), and download in your respective root folder or bower_components (by default).
The approach that your are looking could be done by libraries like Wiredep that reads your dependencies tree and inserts all the libraries in the file that you say. And could be used with grunt or gulp build process.