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?
Related
I installed Bootstrap CSS with SASS from the following repo:
https://github.com/twbs/bootstrap-sass
I ran the command "bower install bootstrap-sass" on the command line and this successfully installed the folder bower_components on my project folder. (Incidentally - I have nothing else present yet, I want to learn to bootstrap the CSS compiling first).
OK, here's what I want to accomplish:
I want to be able to add .scss files to the folder I create called resources/assets/sass/
I want to provision/manage so that .scss files I add to this directory are in turn compiled to public/build/css/that_file_name.css
More practically, I would like to compile all of the .scss files into one large .css file.
My question(s) are:
What does the compiling?
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
What does the compiling?
Compiling Sass files transforms stylesheets with Sass-specific syntax like selector nesting and mixins into normal CSS that can be parsed by browsers.
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Since you're already using Bower which is a Node.js package, I assume that you have no problem using the Node.js package node-sass instead of the original Ruby version.
First, install the package using npm i -D node-sass. Then, create a new script inside your project's package.json:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"
main.scss is now your entry point where you import Bootstrap and your other stylesheets.
// I don't know whether this path is correct
// Just find out the location of "_bootstrap.scss" and then create the relative path
#import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
/* Your custom SCSS */
Finally, to actually run the compilation, execute npm run compile-sass in your terminal.
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Since you never tell node-sass to "compile everything inside this folder" and instead use an entry point file (main.js), when you want to include a new file you simply add an #import directive with a relative path to it.
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
To minify the resulting main.css file, I recommend csso. You can install its CLI package using npm i -D csso-cli and then add another script to your package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"
You can then run that script using npm run minify-css. The minified file will be outputted as main.min.css.
For all the question asked, the answer can be found above. But if you are just looking to compile .scss file to .css using command line, use below,
sass source/stylesheets/index.scss build/stylesheets/index.css
Make sure you have "node JS/npm" and Sass compiler installed.
If not, use this to install Node.js and npm - https://www.npmjs.com/get-npm
And use this to install Sass - https://sass-lang.com/install
Enjoy ;)
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 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.
I want to run grunt on several projects simultaneously. However i'm not sure how to setup so it works. Here's what my setup looks like:
- Project 1 folder
-[project files]
-Gruntfile
- Project 2 folder
-[project files]
-Gruntfile
- Grunt Folder
-[nodeModules]
-package.json
So the idea is that have all grunt dependencies (node modules) in a single centralised folder. Then each project folder has its own Gruntfile.
The problem I have is that I don't know how to setup the gruntFile so that it can use the node modules and package.json from the grunt dependancy folder.
Can anyone help me with how I can get this to work? Specifically with code examples.
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.