I'm currently developing an app with angularjs and cordova. I use Gulp to compile all the js, less, etc and merge it into a www folder. It's a big project and many apps will be created based on the same base core. I don't want to "clone" the entire project each time a have a new client because if a bug is found or a feature has to change I will have to redo everything in every single project.
I want to know if there's a way to create a build system with Gulp, where I could have a base core js/less, and that base js/less core could be replaced if the same js (or angular module name for instance) is found on another folder.
Example image:
folder structure
In the above example, I will need a specific task to build "ProjectA".
I was thinking in something like "gulp build ProjectA" and then all files in "AppCore" folder would be compile only if there wasn't the same js, less or angular module inside "ProjectA" folder.
Or I don't know if is possible also to compile everything in "AppCore" and then override that result with the content found in "ProjectA" if equal. If something new in "ProjectA" that would be added.
Is there any gulp plugin to achieve this? Or does this have to be done in a different way?
What is the best way to create a flexible project like this with a shared based code core?
Thank you
Related
Is there is any way to have a common project which contains plugin, java script file etc and there is a multiple Cordova project which can access/get those plugins and java script files.
For an example, Cordova-Project-A and Cordova-Project-B has some common plugins, CSS files and java script files. So need to separate these common codes and place it on separate project.
Note: Cordova templates will do this work. But if there is any plugin/JS file update in the template, it won't reflect anything on Cordova projects.
there is. this place is called npm, and it serves as a giant, worldwide, warehouse for javascript developers. by the way, cordova is already using it to power its plugin system.
to join the party:
create the desired projects to contain the common, extracted, code as npm projects (i.e. use npm init on them).
use npm's link to always have the updated source in all consuming projects.
As a school project I am making a multi-platform app. I decided to use JavaScript. I thought it would be great to have something like an MVVM pattern with Ionic2 where VM is the Angular2 part of Ionic and I would have two Views. One for mobile(the html/css parts of Ionic), and Electron for desktop. I have a problem though. In a basic Ionic project the View and the Angular part is tightly coupled, I mean they are in the same directory, cannot change the HTMLs easily.
What I thought would be great (although other solutions are welcome) is to have an "ionic" folder and a "desktop" folder, both the same structure same file names.
When building the app for mobile with Ionic I want all the files in the src folder to be copied to a dist/ folder and html,css files from src/ionic copied to their place like in a normal ionic project(the only difference, that it would be under a dist/ folder not src/, so I have to make the www/index.html to include these too instead of src/ which it does normally in ).
And when building for Desktop I just copy all the things the same way but from src/desktop instead of src/ionic.
That way I could have my business logic in "plain" Angular2 and could be reused creating the app both for desktop and mobile.
So my question is can I modify the Ionic build process somehow, to allow me to do this? Can I create my own gulp or grunt file? Or webpack? How to do that?
Finally I wrote my own gulp file, to copy the files to src/.tmp/ and after the copy task is ready I call the original scripts which are used by ionic to serve, build the projects. I could solve everything with this method.
On serve task gulp watches for changes in src/ files excluding src/.tmp and copies the changed files to the src/.tmp folder. Which is watched by ionic and rebuilt everytime something changes.
I was lucky because ionic is built on top of angular, so the builder toolset used by ionic is 100% compatible with plain angular projects.
I'm starting new project which will be based on some legacy code which was written using https://github.com/linemanjs/lineman-angular-template lineman-angular-template and Angular 1.5 components
But all new stuff i want to write as Angular 2 components. And i'm looking how to
concat all source code from angular# folder into one file let's say vendor.js
Previously i saw such variant How to compile an Angular2 TypeScript application to a single file?
src="/node_modules/angular2/bundles/angular2.dev.js"
but now in node_modules/#angular there is no more bundles/angular2.dev.js
I can't use cdn for it. I need to store everything on my server.
Can you suggest me some tool or smth like that?
Angular-cli also won't work for this case.
I am trying to start a new angularjs application with visual studio. I heard that there is specific folder structure to organize angular code. Is there any nuget package which does the folder structure and add crequired basic js files?
Depending on the app you are making you can choose for a different approach on how to build your folder structure. There are as far as I know no nuget packages that create that specific structure, but off course there are all the AngularJS nuget packages that add every .js file you need to run an Angular application. Just search for AngularJS in your Nuget Package Manager.
You could also read an article on best practices for the folder structure in AngularJS.
I am starting my own Angular web application. I have experience coding in c# and angular but I have never had to set up my own project/solution. In this case, I would like to set up an ASP.NET Web API that will communicate to an Angular SPA front end in JSON (although it should be agnostic to the front end, any application that speaks JSON should be able to communicate with it).
Additionally, I have heard good things about grunt and so I would like to incorporate it into the project (at the very least to compile LESS and minify and combine my angular files).
I am working with visual studio professional 2013. I began by creating a Web API project and downloading the WebEssentials plugin.
I am just a little confused on how to continue here. Should I split out my angular into a separate project in the same solution? How do I include grunt?
How do I use grunt in the context of visual studio to include my angular files in my index.html file?
The project comes with a Scripts folder and a Views folder. I know that it is preferable to structure the angular files by function so that the controllers and views are housed together. Should I be including my views in the scripts folder? How does that affect my build procedure?
I realize these may be very naive questions. Please bear with me, I am a complete beginner when it comes to these kinds of tasks. All I have done in the past is basically code.
Let's go step by step:
Visual Studio Solution with Web Api and Angular JS
You can store both Web Api and Angular code in same solution and project.
In this case you can arrange structure like this:
Content
Controllers
Models
Scripts (with app/ folder and vendor scripts like angular, jquery, etc.)
Views
index.html for angular application you can put into Scripts/app folder.
And all views for Angular you can put into Scripts/app/views folder.
Using Grunt/Gulp
Grunt/Gulp/Cake/Broccoli - those tools are simply an a javascript task runners, which allows you to to various things like combine your vendor scripts into one file, minify and combine your scripts into one file, transform your LESS to CSS, etc.
To use those task runners you can use Project Build Events. In project build events you can run Grant/Gulp tasks, which will do all the magic for you.
Also there is an extension for Visual Studio called Task Runner. This extension lets you execute any Grunt/Gulp task or target inside Visual Studio by adding a Task Runner Explorer window.
Example of using Gulp in Visual Studio Project by using Task Runner
To run your Gulp tasks by Task Runner automatically you need to add a line into start of your gulpfile.js
/// <vs AfterBuild='<here is a name of your Gulp task>' />
This line will force your task to run after each rebuild of your project.
Useful Info
To get additional info about Apps with AngularJS on ASP.NET you can check video by John Papa: "Building Rich Apps with AngularJS on ASP.NET"
Usefull Gulp modules:
gulp-useref - Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
gulp-less - Less for Gulp.
gulp-uglify - Minify files with UglifyJS.