2

I am using Swiip/generator-gulp-angular and I want to have two separate SPAs(index.html) built into dist folder.

I wish gulp serve and gulp dist:serve to build those two SPAs, the first will be built into dist/index.html and the second will be built into dist/app2/index.html assuming that app2 was defined as another source folder, similar to the src folder.

If anyone can guide me on how to modify [Swiip/generator-gulp-angular] or to point me to another gulp solution, it would be great and highly appreciated.

UPDATE I guess that I can create two sub-directories app1 and app2 that are generated with Swiip/generator-gulp-angular. Each folder will be configured to dump the destination to a subdirectory in the a dist directory inside the root folder of the project. Then I can create a gulp file with a task to call the build of those two projects separately. I hope that it will work.

5
  • Why do you need that? Commented May 18, 2016 at 6:38
  • I want to complete separate frontend projects, and serve them from same domain using Heroku to serve static content which make me build and deploy them as one upon git push. I can stop using, Heroku, but I would like to avoid it, as it simplifies git deployment and hosting. Commented May 18, 2016 at 11:03
  • I can use S3 and deploy the projects separately using gulp s3 package for deployment. But then I cannot really support browsers that doesn't support GZIP, see here, which is kind of OK but the deployment will not be automatic as connecting Heroku directly to a git branch. Commented May 18, 2016 at 11:06
  • Normally we use a config file in each servers, and build from server itself rather than pushing the build. If you want to create another build just duplicate and rename the build task and change the build directory. Commented May 18, 2016 at 11:17
  • Asim, Thank you for the input. I am not pushing the build, I am pushing the source code. The build is triggered using heroku build pack Commented May 19, 2016 at 11:44

1 Answer 1

1

From my understanding:

You want a gulp task which will run both build tasks and copy one build folder to inner-directory of other build folder.

So if buildApp1 and buildApp2 are the build tasks for app1 and app2 respectively, like this:

gulp.task('buildApp1', ['html1', 'fonts1', 'other1']);
gulp.task('buildApp2', ['html2', 'fonts2', 'other2']);
// renamed default build tasks from generator (ref: gulp/build.js)

These tasks will create the dist/ folder in each app directory (you may want to rename the folders, like to distApp1/ and distApp2/ in gulp conf.js for simplicity).

Then we combine these tasks in default build:

gulp.task('build', ['buildApp1', 'buildApp2', 'copy']); 
//notice the copy task at the end

Note that we already had two build task we renamed it to buildApp1 and buildApp2

And here is the copy task which should be written in build.js file

// The task for copying buildApp1 to innerdirectory of buildApp2 folder
gulp.task('copy', function(){
  return gulp.src(['distApp1/**/*'], {base:"."})
  .pipe(gulp.dest(' /innerfolder'));
});
// distApp1 and distApp2 are the generated folders.

This is just the overview. Still you have to create both build tasks yourself from existing files, Which you can do easily mostly by renaming and tweaking.

Sign up to request clarification or add additional context in comments.

4 Comments

Asim, thank you, It seems that it should work, lemme give it a try. I have two suggestion for improvements: 1. Instead of copy pasting code of html1, html2 and so on... I can create config tasks (configApp1/configApp2) and define the build task as: gulp.task('build', ['configApp1', 'html', 'fonts', 'other', 'configApp2', 'html', 'fonts', 'other', 'copy']);. 2. Why do I need the copy? I can configure the dist path of the app2 to be distApp1/innerfolder directly. Do you think that it is a good plan?
Asim, I implemented with something like this gulp.task('build', gulpSequence('configApp1', 'html', 'fonts', 'other', 'configApp2', 'html', 'fonts', 'other')); to avoid parallelism issues, the configuration is tricky but I solved it, there are many dependencies in the server.js that I currently trying to solve.
Yeah, I think that's good plan. If you solve it, you can edit the answer yourself. Glad to help.
I just wanted to note that I never got to test any of the solutions because requirements in my project changed and it became irrelevant. Thank you Asim

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.