marcoturi / ionic-boilerplate

✨ An Ionic Starter kit featuring Tests, E2E, Karma, Protractor, Jasmine, Istanbul, Gitlab CI, Automatic IPA and APK, TypeScript 2, TsLint, Codelyzer, Typedoc, Yarn, Rollup, and Webpack 2
MIT License
318 stars 107 forks source link

No gulp? #28

Closed Richie765 closed 7 years ago

Richie765 commented 7 years ago

Thanks for sharing this great boilerplate with us. I'm missing gulp. I'm just wondering why you didn't include it? It seems something obviously useful.

marcoturi commented 7 years ago

Thank you for you question @Richie765. There are tons of articles about why it's better to avoid using gulp. Reassuming same point:

If you have any specific scenario with this boilerplate where you would need gulp please feel free to ask.

Richie765 commented 7 years ago

Interesting, I'm gonna read up on those articles. I'm always looking to make my stuff better maintainable.

I'm using gulp for a number of things now. I'm wondering how you would solve this.

In a 'build:before' task, I gulp-merge-json multiple translation files together for ngx-translate. In another task, I gulp-replace a token into the src/index.html that is needed in production.

Of course these things can be done in just node, but it seems a lot more work to me. How would you do it? For completeness here are the tasks:

var merge = require('gulp-merge-json');
var replace = require('gulp-replace');

gulp.task('ngx-translate', function() {
  return ['en', 'es', 'de'].map((lang) => {
    return gulp.src(`resources/i18n/*/${ lang }.json`)
      .pipe(merge({
        fileName: `${ lang }.json`
      }))
      .pipe(gulp.dest('src/assets/i18n'));
  });
});

gulp.task('some-service-tokens', () => {
  return gulp.src('src/index.html')
    .pipe(replace(/accessToken: .*/, `accessToken: '${ config.token }',`))
    .pipe(replace(/environment: .*/, `environment: 'production',`))
    .pipe(gulp.dest('src/'));
});
marcoturi commented 7 years ago

I would use nodejs for doing those tasks but if you don't have time you could keep using gulp, just install the dependencies with npm. Then either you use gulp or nodejs i would use pre/post hooks inside package.json, for example:

...
 "scripts": {
    "dev": "bnr dev",
    "build": "bnr build",
    "prebuild": "node mytasks.js"
....

prebuild is executed automatically when you run npm run build. Hope it helps.