代码之家 › 专栏 › 技术社区 › Judson Terrell

Ionic 2添加自定义构建脚本

ionic2 npm ionic-framework

Judson Terrell · 技术社区 · 9 年前

   "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"
  },

我需要创建一个名为“replace”的自定义脚本,它将使用NPM replace。我如何添加它,以便在运行ionic serve或构建时运行它?

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/'));
});

4 回复 | 直到 9 年前

Tomas Panik 9 年前

Ionic 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']);

mchan 9 年前

要简单地运行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任务将等待第一部分完成,但ionic serve将启动开发服务器并保持运行,因此第二部分永远不会执行。

Tummala Krishna Kishore 9 年前

当你想从NPM运行你的吞咽任务时

添加 gulp-npm-script-sync npm install --save-dev gulp-npm-script-sync

现在我们需要将这个吞咽任务同步到 package.json

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

// your gulpfile contents

sync(gulp);

您甚至可以将其放入吞咽任务中:

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

Prosenjit Manna 9 年前

首先,您必须复制要修改的现有任务并粘贴到源代码/项目/任务中。然后将任务添加到该文件中。并更换包装。json覆盖ionic 2默认配置。

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

推荐文章

Ali Abdulaal · Ionic 2——如何在变量中放入大量JSON数据,并在没有延迟的情况下删除重复的数据?

8 年前

Simon · 错误:无法传输程序-ionic2

8 年前

Rafael de Castro · 离子存储不需要的更改

8 年前

Rafael de Castro · 离子型/角型2-在页面之间插入“中介体”。ts和提供商。ts

8 年前

Ke Vin · 如何在ionic 3中使用选项卡正确设置我的主应用程序的根目录?

8 年前

Uraquitan Matova Ura Kombat · 离子,角度-索引内的全局变量。其他ts页面调用的html

8 年前

Kumar · 在离子项目中内联显示信息图标

8 年前

StuartDTO · 如何在Ionic中打开组件

8 年前

jamesharvey · 如何使用*ngFor指令从Ionic 3(Cordova、Ionic 3、Angular 5)上的存储器中提取数据

8 年前

jamesharvey · 我怎样才能让谷歌地图在一个div内只占据50%的高度?(爱奥尼亚3号,科尔多瓦)

8 年前