When using Yeoman with the angular generator, I build a dist by running grunt. This works great but my question is that why does the dist folder also contain all the bower components when I actually just need the min.js ones.
Is there a setting in the grunt file I can hack to get only the min.js files in a vendor folder, to keep the dist. as small as possible?
I am currently manually creating a vendor folder and copying the min.js files to it referencing them in my index.html, but it would be great if I could automate that.
This is way Yeoman create the project and the grunt file. So you can customize the grunt.js file in order to omit the unwanted files.
In the grunt.js file replace the 'bower_components/**/*', to 'bower_components/**/*.min.js',
This will copy only the min.js files.
Hope this will help.
Related
I want to automate the injection of new js/css files to my ionic project. So, I found this really useful article, which shows how to do it using gulp inject, but just with my own js/css files (those in js/css folders).
If I now install another external library using bower, for example:
bower install angular-google-maps --save
That library is not automatically injected, because it's installed in lib folder, outside js folder, as it's a library from an external vendor.
I guess I should have another gulp task to minimize the external libraries installed with bower, and put them into js folder to make them injectable. Am I right?
Yes, you are right.
Quoting your article:
There is all of kinds of additional functionality that you can perform with gulp such as minifying of css and javascript files, running npm/bower commands, or running sass compile commands. The gulp-inject is just one module.
You can use a module like main-bower-files to retrieve these files and do whatever you want with them.
You can also have a look at this answer to get a starting point.
i am trying trying to create a project with webpack, angular and gulp. Webpack creates a bundle file called build.js and an index.html from a template. When the browser enters the webpage i want it to go directly to a login screen by using ui-route.
this is how my directory structure looks like.
Firstly my problem is that the bundle only includes the entry file, app.module.js. I can require the other js files in app.module.js to have them in the bundle to but when this project grows it will be a lot of files to be required in one file. So is it possible to bundle all js files except the once in node_modules folder?
My next problem is that when the build.js and index.html has been created in the dist/build folder i cant seem to find the rest of the html files in the project if they are not in the build folder.
Not sure how your webpack config looks like, but many times the HTML is processed by webpack and might end up in your JS bundle (as a string) that then can be used by Angular.
In VS.NET 2015, I've added a reference in bower.json for angularjs. This caused the angularjs package to be downloaded, which I can see in the Bower folder.
However, I'm not able to execute any angularjs code. I do have an ng-app in the HTML tag. If I add a CDN reference to the angularjs library, it works fine.
What am I missing to use the package downloaded by Bower?
what are you missing is referencing the downloaded libraries in bower_components folder in your index.html.
For example let's say you added restangular to bower. the library while reside in ./bower_components/restangular so in your index.html ( your SPA). you will reference it like this :
<script src="../bower_components/restangular/dist/restangular.js"></script>
Beware sometimes you should add all the library main files ( js and css), for that you need to check the value of the main attribute included in the bower.json of the library . for our example in bower.json in ../bower_components/restangular/ we have:
"main": "./dist/restangular.js",
In a the file .bowerrc you may define the directory for the downaloaded libraries in my example it will be bower_components.
In your .csproj file add the
<Content Include="bower_components/restangular/dist/restangular.js" />
Use can see this example
Since more than likely for production deployment you won't be deploying things in bower_components directory, I suggest you setup a gulp or grunt task to copy all the JavaScript that you are going to use and probably minify and concat / bundle them into a folder in wwwroot like /lib or /js or whatever your convention is going to be and add a script tag pointing to that bundled version. There is a decent walkthrough by Mads Kristensen from the recent Build event that you might want to look at. He demoed all the things you would probably need to get your app running.
I have generated my project using Angular Generator using Yeoman.
I am just about to insert it into bitbucket using Mercurial and just wondering what folders I can ignore ?
I couldn't see any HG ignore files for this ?
I mainly wondering about two folders
bower_components
node_modules
Should they be in source control ?
No, both should be ignored by Mercurial since they will contain auto-generated files (NPM modules and Bower components, respectively).
I'm trying to upload my Yeoman Angular app to a git repo so that other developers can work on it. How do I go about it? Meaning, which files/folders should be uploaded and which can be skipped? I don't want the other developers to run the yo angular command, because it creates a new app with the folder name altogether. I tried copy pasting my folder contents to a new folder, excluded the node and bower modules, then ran npm install and bower install on this new folder. But now it fails to find phantomjs plugin. Is there a proper standard way to do what I'm trying to achieve?
Just pushed it as is. There is a .gitignore file which handles everything. The unwanted folders are automatically ignored.