Using this generator to scaffold a backbone app gives me insanely big project of 11000 files. Probably because some of the generators are included in the project itself.
Is there an option to keep them generators global? The way Yeoman v0.9.6 was built? Or is it a bad practice?
Enlighten me would ya?
--using yeoman 1 beta 5
You can install the generators globally:
npm install -g generator-mocha generator-backbone
But your dev dependencies for bower and npm will be added to your projects local file structure.
node: <project_root>/node_modules
bower: <project_root>/app/bower_components
They do take up a bunch of space but at least the scaffolded .gitignore filters them out of your commits =)
Related
I am working on a AngularJS project that uses bower as package manager and gulp to inject the dependencies into the index.html file. I am not very familiar with both of these tools.
I now want to use AWS AppSync, but it is not available as a bower package.
Currently the AWS SDK is specified as a file dependency in bower.json as:
"aws-sdk": "./thirdparty/script/aws-sdk-2.69.0.min.js",
When I install aws-appsync with npm npm install aws-appsync the node_modules folder for aws-appsync contains multiple js files in the lib directory.
How can I include these with bower or is there another way to do this altogether?
I am currently unable to change much of the build and dependency management process so any suggestions working with the current tools would be much appreciated.
Thanks for reaching out!
The Bower team itself has recommended that people migrate to npm or yarn, and so aws-appsync has not been pushed to Bower.
It might be worth investigating whether you can install directly from github using something like...
bower install <github url>.git
... and install directly from the appsync-sdk github repo.
In the end I hacked together an interim solution until I can move the whole project over to npm and browserify.
I added the aws-appsync package using npm and required it in a new file. This file is then passed through a gulp task that uses the browserify plugin. The added file is then included into the rest of the build process as before.
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
After installing packages via npm, such as:
$ npm install bootstrap
or
$ npm install angular
these are saved inside the "node_modules" by default.
How do you access them (link to them) from an html page?
You can't possibly do "href="/node_modules/", so what's the solution?
I imagine something like:
var angular = require("angular");
but I'm not sure.
Try to use bower, or yeoman.
bower - will simplify the process to include js libs
yeoman - will help you to build projects with the the libraries that you need.
I have started working on a new project in node js and I have generated the project using yeoman's angular fullstack generator. And now I would like to add a new bower dependency and a new node dependency. What is the best way to do this? Should I simply add the dependency in bower.json and package.json or should I run a specific command?
You don't need yeoman to install those dependancies for you. Instead, yeoman gives you an environment with everything set up to use tihngs like bower, npm, grunt etc. You can add additional dependencies like you normally would using npm or bower.
for bower (http://bower.io/) -
bower install -S <name-of-your-dependancy>
that command downloads the code for you, and it also adds a reference to it in your bower.json
similar for node (https://www.npmjs.com/) -
npm install -S <name-of-your-dependancy>
use npm packet manager, to install components, like if you want to install cordova, use:
npm install -g cordova
For installing AngularJs, follow the official site guide lines:
https://docs.angularjs.org/misc/started
I am using yeoman as a scaffolding tool for my app and using yeoman angular generator for the same.
While scaffolding the app yeoman asks me whether I want to install SASS or not, but it doesn't give any option to include less and related grunt tasks for that.
Please help me if I am missing something here.
Here are the steps that I am following to scaffold my app.
npm install -g yo
npm install -g generator-angular
yo angular
Also tell me if it is possible to install the less related tasks and files separately after using the yeoman angular generator as a scaffolding tool.
First installed the grunt-contrib-less module.
npm install grunt-contrib-less --save-dev
Copy the less folder from "bower_components/bootstrap" in the "app/styles" folder. Than you need to update Gruntfile.
Add the following task:
...
less: {
development: {
options: {
compress: true,
optimization: 2
},
files: {
"app/styles/your_bootstrap.css": "app/styles/less/bootstrap.less"
}
}
},
...
You need to load the less task.
grunt.loadNpmTasks('grunt-contrib-less');
And as you can see this made a new your_bootstrap.css in your styles folder which will be linked in your index.html.