Ionic 2 Add Custom build script

Я использую Ionic 2 через CLI. В этой версии они используют NPR SCRIPTS, а не gulp.

   "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
 },

Я читал о добавлении настраиваемых скриптов в конфиг, но не понимаю, как это сделать. это моя текущая конфигурация...

"config": {
    "ionic_bundler": "webpack",
    "ionic_source_map": "source-map",
    "ionic_source_map_type": "eval"
  },

Мне нужно создать пользовательский script, называемый "replace". Он заменит NPM. Как я могу добавить это так, что когда я запускаю ионную подачу или сборку, она будет работать?

Вот код gulp, который я хочу запустить.

var gulp = require('gulp');
var replace = require('gulp-string-replace');
var p = require('./package.json');
var version = p.version;
gulp.task('serve:after', ['version']);

console.log('Task init!!!');
gulp.task('version', function() {
  gulp.src(["./www/index.html"])
  .pipe(replace(/VERSION/g, p.version))
    .pipe(gulp.dest('./www/'));
});

ОТВЕТЫ

Ответ 1

Ионный CLI (v3.X) переходит непосредственно к gulpfile.js и ищет CLI hooks.

ионная подача:

gulp.task('ionic:watch:before', function() {
  console.log("this is run before 'ionic serve'");
});

ионная сборка:

gulp.task('ionic:build:before', function() {
  console.log("this is run before 'ionic build'");
});

поэтому вы должны добавить что-то вроде этого в свой gulpfile.js:

gulp.task('ionic:watch:before', ['version']);
gulp.task('ionic:build:before', ['version']);

Ответ 2

Чтобы просто запустить задачу gulp, просто добавьте ее в свой пакет package.json.

"scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
--> "ionic:build": "ionic-app-scripts build && gulp serve:after",
    "ionic:serve": "ionic-app-scripts serve",
    "watch": "ionic-app-scripts watch"
}

Примечание: это не сработает, если вы поместите "& & gulp" после выполнения функции ionic: serve - задача gulp будет ждать завершения первой части, но ионная служба запустит dev-сервер и продолжайте работать, чтобы вторая часть не выполнялась.

Ответ 3

Как вы хотите запустить задачу Gulp из NPM

Добавьте gulp-npm-script-sync следующим образом npm install --save-dev gulp-npm-script-sync

Теперь нам нужно синхронизировать эту задачу Gulp с package.json следующим образом

var gulp = require('gulp');
var sync = require('gulp-npm-script-sync');

// your gulpfile contents

sync(gulp);

Каждый раз, когда вы обновляете свой gulpfile с новой задачей, он обновляет ваш пакет .json.

Вы можете даже бросить его внутри задачи Gulp:

gulp.task('sync', function () {
  sync(gulp);
}

Ответ 4

Во-первых, вам нужно скопировать и выполнить существующую задачу, которую вы хотите изменить и вставить в исходный код/​​проект/задачу. Затем добавьте свою задачу в этот файл. и измените package.json, чтобы перезаписать конфигурацию по умолчанию для ионной 2.

"config": {
    "ionic_cleancss": "./task/cleancss.config.js"
  },

Дополнительная информация: https://github.com/ionic-team/ionic-app-scripts#custom-configuration