hy
I've just installed yeoman and generator-angular.
everything works like expected, but changes in bower_components/bootstrap-sass-official/vendor/assets/stylesheets/* won't be caught in grunt watch or grunt serve tasks.
it's my first contact with bower and yeoman and I hope that this can be solved easily.
bootstrap.scss (imports all bootstrap scss files) is included in app/styles/main.scss witch will be converted to main.css in grunt watch task.
thank you for your help!
It is simple - just add this files to watch task in Gruntfile.js.
But it is entirely bad idea - you should not edit files under bower_components directory.
This files should be managed using bower, they are not even tracked by git and should not be(by default bower_components are in gitingore for this generator).
If you need to override something: import original scss file, and override what you need.
Related
I've create a test application with Ionic v5 w/React and I don't see any specifics in the documentation on how to configure Sass preprocessing. I have a couple sass files in the project structure, but they don't seem to be loading or being processed for that matter. I added node-sass to the package.json. Any help would be much appreciated. I used the Ionic Cli to created a blank app and added some .scss files to the project dir.
So I figured it out. Turns that ionic looks at the themes directory for all style sheets, including scss sheets. So I simply place my scss files there, ran ionic serve and imported the base style sheet, import '/theme/styles.scss' into the "main" component and it worked. I could run ionic build command see that the scss files were processed and minified into a .css file.
So just to make it clear that you do need to install node-sass via npm or yarn in order for Ionic to support scss files after that you can change any files whether it’s inside pages or components or theme folder and you just have to update the import to scss instead of css
Command for Installation
npm install --save-dev node-sass
Import changes
I created my angular application with "yeoman" using "yo angular" with grunt sass bootstrap.
But with node_mudules bower_component and all dev feature the empty project is 200mo sized
How can I build my application for production, include minify css/js and keep only used and required dependance.
EDIT
I don't understand the -1, thousand people use the angular-generator from yeoman and I can't find a build tutorial for this specific generator.
grunt build seems to work but the website is not displaying well.
grunt serve:dist build and run on serve but same problem as grunt build
The dev application ( it s just yo angular empty project )
After grunt serve, it works and i can navigate
After grunt serve:dist, it doesn't work and i can't navigate, it seems like "bower_components" are not build well
if you are using grunt do: "grunt build" or "grunt serve:dist", after the build you will get a dist folder, everything inside is you production app included minify css/js, you don't need anymore. And specify that for unknow reason "yo angular" add jquery to "devDependencies" but not in "dependencies"
in bower.json in you project.
You do not need to deploy everything from your project folder. Hope it help.
You do not need to deploy everything from your project folder. You can find info on this page.
Only files which you include/import in your index.html or css ( images or fonts ), are being used and tracked. Rest are all useless after deployment.
run gulp --production. firts it will clean dist folder (if exist) then move the minified and uglified file there.
I am new to grunt, I am not able to understand initial setup. What I have done all is installed node and grunt and this is no where related to my project. My question is
1. how to add grunt to my project. I am using angular project. Do I have to add grunt inside my project folder? if yes, Where should I add and how should I add?
2. Many of the document says to update gruntfile.js. When I search I
can see so many gruntfile.js inside grunt\node_modules folder. Which
gruntfile.js file I should modify?
Grunt doesn't actually go into your angular project. Only libraries that are meant to show up in your client's browser (i.e. to actually run the webapp) should be injected into Angular.
Think of grunt as a tool to help you manage the build system outside of your angular project.
You could run npm install grunt --save-dev and it would create a package.json file with information regarding your dependencies.
www.egghead.io has some great resources on learning Grunt and Angular, as does http://build-podcast.com/.
Consider also looking into npm, gulp, webpack and other alternatives.
Step1 - Install node and npm
Step2 - npm install -g grunt-cli
Step3 - Create Gruntfile.js in your project root folder. Click here for sample file
Step4 - register a task
Step5 - Run Grunt
I'm using the yeoman generator-gulp-angular to scaffold my app. I installed ng-18next with bower, and the package and it's dependency were both correctly installed in the bower_components directory. However, when I run gulp serve and view the source the components aren't being injected into page, so I get a module instantiation error. If I hard code the deps into the page there are no errors. I also tried bower install --save and the deps are inserted into the bower.json file correctly. Any ideas?
Thanks.
I had hard-coded script references in index.html. Even though they were commented, this caused them not to be injected with wiredep.
I try to work with AngularJS and Polymer (i actually use AngularJS for the Services eg. Token Auth and Polymer for the Material Design ) so i ask a simple method to build the scafolding for such kind of App (Polymer + AngularJS - localhost run with grunt) ? For the moment when i install :
yo angular MyApp
i have the bower_components in the root directory and if i try to install Polymer through :
bower install --save Polymer/polymer
So i install the Polymer in the AngularJS bower_components, (if i use the yo polymer generator the bower_components folder is in the /root/app/ folder and not in) And when i use grunt serve i get the Error (example with the core-toolbar) :
core-toolbar was not injected in your file.
Please go take a look in "/project-root/bower_components/core-component-page" for the file you need, then manually include it in your file.
so i think that i need to change something in the Gruntfile.js, but i do not know what ! Maybe is better use two bower_components folders ?
I solved the Problem, so i used the AngulaJS Generator for Yeoman, after that i moved the folder bower_components from the /project_root folder to the /project_root/app folder, so i modified the .bowerrc file with the new path of the bower_components folder :
{
"directory": "app/bower_components"
}
So now i can use bower to in install the Polymer elements that i need, with bower as usual :
bower install Polymer/core-toolbar
I do not use the --save for save the dependency in the package because when grunt/bower try to insert the link in the index.html file it fail, so
delete the Polymer dependencies from the bower.json file and add them manually, other hint remove the link already added by grunt/bower about polymer in the index.html file and add the webcomponents.js :
<!-- Polymer Section -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<!-- My imports -->
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">