I have a dist folder inside semantic-ui zip file that I downloaded (version 1.8.1 to be precise)
Is this folder the only thing i need to deploy my Web Application as far as semantic-ui related files are concerned?
Would including semantic.js and semantic.css be enough for my web application?
I am asking this question as I want to eliminate the need of installing npm and gulp on my target machines and would just like to copy over the css and js files that are needed by the application.
Including semantic.min.js, jquery, and semantic.min.css will should be enough for the start since the semantic.min.js contains all the modules you'd need. You will find these files in 'dist' folder.
Related
I am trying to upgrade from Bootstrap 4.0.0 to 4.5.0 on my WordPress. From reading another thread, I believe I simply need to find certain files and replace the 4.0.0 versions with 4.5.0 versions., specifically CSS and JS folders.
I downloaded the 4.5.0 source files from Bootstrap's website. In the WordPress site theme I have active, I see inside /node_modules/bootstrap/ a collection of folders that match folders inside the Bootstrap 4.5.0 source files I downloaded. Specifically (all at the same level):
A folder titled "dist" with subfolders "css" and "js"; the contents
appear very similar between the source files and what I already have
A folder titled "js" with subfolders "dist" and "src"; the contents
appear very similar between the source files and what I already have,
but the source files folder also has a folder "tests" that is not on
my existing site
A folder titled "scss" with subfolders "mixins" and "utilities" as
well as a number of .scss files; the contents appear very similar
between the source files and what I already have
There are also some stray files in the /node_modules/bootstrap/ folder (LICENSE, package.json and README.md) that are also in the 4.5.0 source files.
All of this makes me feel that this is the place I need to replace the 4.0.0 files with the 4.5.0 files. However there are several files in the 4.5.0 source files not present in /node_modules/bootstrap/:
_config.yml
a folder "build" with various .js files
CNAME
CODE_OF_CONDUCT.md
composer.json
Gemfile
Gemfile.lock
package-lock.json
package.js
SECURITY.md
From my limited understanding, I think the 4.5.0 source files have more than any given person may need, and that makes me think these files may not be essential for my purposes, if they are not already in the /node_modules/bootstrap/ folder on my existing site. I'm also in a dev environment, so I could just give it a go and see what happens.
My other concern is, I see in /dist/styles/main.css there is what appears to be all the 4.0.0 css, as well as additional css for plugins. Do I need to manually update the portion of this css file with the 4.5.0 css?
I'd avoid updating node_modules manually as the packages listed there were created by a package manager (more than likely, npm) and as such specific versions were installed with dependencies. Editing files in there can break your app!
If you can, look for a package.json file in the parent folder of node_modules and update the version of bootstrap in there, then run npm install in the terminal.
I am installing bootstrap and jquery with npm. I want only ( not the sass files ) the jquery and bootstrap files to be installed in web/vendor and not in node_submodules/... Is that possible?
So my symfony structure looks like this
app
bin
composer.json
composer.lock
Gruntfile.js
node_modules
- bootstrap and jquery files are here <<
package.json
src
tests
var
vendor
web
- vendor
- I want my bootstrap and jquery files here <<
Or should I just download bootstrap and jquery and place them myself in web/vendor and forget about node_modules.
See npm local install package to custom location.
Using your approach is fine for a small project, but if you plan on building a more ambitious application, you should really look into using a build tool like webpack, gulp, or grunt. Then you can package up your javascript dependencies from your node_modules into a single file and have it generated into your public js folder.
I am currently trying bootstrap and attempting to use grunt to process my less source files and generate my css.
I have achieved this by installing bootstrap and grunt via npm and then copying the generated bootstrap folder over to my project folder.
myproject/bootstrap
I have then run npm install to setup grunt based on the bootstrap package.json.
Once the install has completed the boostrap directory contains over 20 thousand files.. is this normal?
I also wanted to change the directory from dist...to a css directory within the myproject folder so my dir structure would look something like this
myproject/src/bootstrap - All the src grunt/less files would go here.
myproject/public/css/ - This would be the new dist directory for the resultant css files.
However I have attempted to adjust the Gruntfile.js in order to change the dist directory... but there I have not manged to get it to export to anything outside of the source bootstrap directory?
I'm currently trying to migrate an old ASP.NET WebSite project to Visual Studio 2015. I'd like to use NPM/Gulp to automatically compile LESS files to CSS (this task was done by WebEssentials in VS 2013).
I added a package.json file to the project to load the required components. This creates a node_modules folder in the root of the WebSite project, and this is where my problem starts:
Since WebSite projects don't have a project file, all files (and sub-directories) found in the project root folder, are automatically part of the project. Due to the deeply nested directory structure inside node_modules, this leads to errors because of too long path names.
An easy workaround is to set the hidden attribute on the node_modules folder (but this has to be done manually by each developer).
Is there a way to tell NPM to put the node modules into another directory e.g. one level above the project (..\node_modules) where the solution file is?
Or is it possible to set the hidden attribute on a folder from a gulp-task (which runs when the project is loaded)?
Based on #Rik's answer, I was able to solve the problem:
Instead of adding the package.json and gulpfile.js into the WebSite project, I added them at the solution level (as solution items). This means, that the node_modules folder is now in the solution directory at the same level as the WebSite project(s).
The only other change was to modify the paths in gulpfile.js accordingly.
You might want to check out npm 3.0+. It installs the modules in a maximally flat structure. It should reduce the paths lengths in the module directory.
From the release notes
Flat, flat, flat!
Your dependencies will now be installed maximally flat. Insofar as is
possible, all of your dependencies, and their dependencies, and THEIR
dependencies will be installed in your project's node_modules folder
with no nesting. You'll only see modules nested underneath one another
when two (or more) modules have conflicting dependencies.
#3697 This will hopefully eliminate most cases where windows users ended up with paths that were too long for Explorer and other
standard tools to deal with.
#6912 (#4761 #4037) This also means that your installs will be deduped from the start.
#5827 This deduping even extends to git deps.
#6936 (#5698) Various commands are dedupe aware now.
This has some implications for the behavior of other commands:
npm uninstall removes any dependencies of the module that you specified that aren't required by any other module. Previously, it
would only remove those that happened to be installed under it,
resulting in left over cruft if you'd ever deduped.
npm ls now shows you your dependency tree organized around what requires what, rather than where those modules are on disk.
#6937 npm dedupe now flattens the tree in addition to deduping.
https://github.com/npm/npm/releases/tag/v3.0.0
For upgrading the windows installation check out this package npm-windows-upgrade
I'm already using bootstrap.css. But i would like to surcharge the less variables without using bootstrap customize editor.
I would like to add a less file in my project. My project is a simple nodejs project with express and harpejs.
Where to find the less file ? Using express it will compile it when i will deploy the project ?
Thanks.
Look at using bower.
npm install -g bower
bower install bootstrap
You will then find all the less files in bower_components/bootstrap/less/*. Copy the bootstrap.less file to your CSS directory and make alterations (make sure the paths are correct).
You can then look at using some Grunt tasks to get the less to build.