Git Product home page Git Product logo

ionic-gulp-tasks's Introduction

[Deprecated]

Now that Ionic 2 is out of beta, please see the ionic-app-scripts repository for Ionic 2 build configuration scripts.

Ionic Gulp tasks

A curated collection of Gulp tasks for building Ionic apps. Using these tasks allows you to stay up to date if the default Ionic 2 build changes while it is in beta.

Tasks

Tasks are configured to work by default with the Ionic starters generated by the Ionic CLI.

The current list of tasks is:

* Community maintained (not in this repo)

Usage

To use a task in your Ionic project's Gulpfile, require it, then register it:

var gulp = require('gulp'),
    buildWebpack = require('ionic-gulp-webpack-build');

gulp.task('build', buildWebpack);

API

Each task takes an optional options object:

  gulp.task('watch', function(){
    return webpackBuild({ watch: true });  
  });

The options depend on each task. For more information on a particular task, take a look at its README.

Return value

Each task returns either a stream or promise.

ionic-gulp-tasks's People

Contributors

arielweinberger avatar brandyscarney avatar cjpollard avatar dorgold avatar ihadeed avatar iignatov avatar jthoms1 avatar mhartington avatar ridomin avatar tlancina avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ionic-gulp-tasks's Issues

Copy android resource task

Just a quick feature request to get custom notification icons (for push notifications). I've detailed the current workaround here: ionic-team/ionic-cli#608 (comment)

Specifically, the task just needs to copy icons from somewhere in the ionic working directory into the platforms/android/res/ directory. Right now, only the splash and icon images get copied over.

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Originally posted at darekf77/ng2-logger#2

I am trying to add in a new NPM package and it is throwing some errors:

➜  i2-app ionic serve

Running 'serve:before' gulp task before serve
[15:57:06] Starting 'clean'...
[15:57:06] Finished 'clean' after 37 ms
[15:57:06] Starting 'watch'...
[15:57:06] Starting 'sass'...
[15:57:06] Starting 'html'...
[15:57:06] Starting 'fonts'...
[15:57:06] Starting 'scripts'...
[15:57:06] Finished 'scripts' after 40 ms
[15:57:06] Finished 'html' after 43 ms
[15:57:06] Finished 'fonts' after 46 ms
[15:57:07] Finished 'sass' after 799 ms
TypeScript error: /appdir/node_modules/ng2-logger/src/log.ts(12,52): Error TS2339: Property 'includes' does not exist on type 'string[]'.
TypeScript error: /appdir/node_modules/ng2-logger/src/log.ts(41,25): Error TS2339: Property 'includes' does not exist on type 'Level[]'.
TypeScript error: /appdir/node_modules/ng2-logger/src/log.ts(43,42): Error TS2339: Property 'name' does not exist on type 'typeof Log'.
TypeScript error: /appdir/node_modules/ng2-logger/src/log.ts(46,42): Error TS2339: Property 'name' does not exist on type 'typeof Log'.
TypeScript error: /appdir/node_modules/ng2-logger/src/log.ts(49,42): Error TS2339: Property 'name' does not exist on type 'typeof Log'.
TypeScript error: /appdir/node_modules/ng2-logger/src/log.ts(52,42): Error TS2339: Property 'name' does not exist on type 'typeof Log'.
TypeScript error: /appdir/node_modules/ng2-logger/src/logger.ts(15,54): Error TS2339: Property 'includes' does not exist on type 'Level[]'.
TypeScript error: /appdir/node_modules/ng2-logger/src/logger.ts(16,30): Error TS2339: Property 'includes' does not exist on type 'Level[]'.
TypeScript error: /appdir/node_modules/ng2-logger/src/logger.ts(19,60): Error TS2339: Property 'includes' does not exist on type 'Level[]'.
TypeScript error: /appdir/node_modules/ng2-logger/src/logger.ts(26,54): Error TS2339: Property 'includes' does not exist on type 'Level[]'.
TypeScript error: /appdir/node_modules/ng2-logger/src/logger.ts(27,30): Error TS2339: Property 'includes' does not exist on type 'Level[]'.
TypeScript error: /appdir/node_modules/ng2-logger/src/logger.ts(30,60): Error TS2339: Property 'includes' does not exist on type 'Level[]'.
TypeScript error: /appdir/node_modules/ng2-logger/src/logger.ts(37,54): Error TS2339: Property 'includes' does not exist on type 'Level[]'.
TypeScript error: /appdir/node_modules/ng2-logger/src/logger.ts(38,30): Error TS2339: Property 'includes' does not exist on type 'Level[]'.
TypeScript error: /appdir/node_modules/ng2-logger/src/logger.ts(41,60): Error TS2339: Property 'includes' does not exist on type 'Level[]'.
TypeScript error: /appdir/node_modules/ng2-logger/src/logger.ts(48,54): Error TS2339: Property 'includes' does not exist on type 'Level[]'.
TypeScript error: /appdir/node_modules/ng2-logger/src/logger.ts(49,30): Error TS2339: Property 'includes' does not exist on type 'Level[]'.
TypeScript error: /appdir/node_modules/ng2-logger/src/logger.ts(52,60): Error TS2339: Property 'includes' does not exist on type 'Level[]'.
[15:57:09] Finished 'watch' after 3.07 s
[15:57:09] Starting 'serve:before'...
[15:57:09] Finished 'serve:before' after 3.77 μs

Running live reload server: http://localhost:35729
Watching: www/**/*, !www/lib/**/*
√ Running dev server:  http://localhost:8100
Ionic server commands, enter:
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit

ionic $
/appdir/node_modules/ng2-logger/ng2-logger.ts:1
export * from './src';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

In app.ts this logger is being injected like so:

import { Log, Level } from 'ng2-logger/ng2-logger'

After reading the tsify FAQ it seems that perhaps this module is not being compiled to Javascript at the right time. I am now experimenting with the options inside the buildBrowserify() call - here's the gulp task:

gulp.task('watch', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts'],
    function(){
      gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
      gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
      buildBrowserify({
        watch: true,
        browserifyOptions: {
          debug: false // sourcemaps on
        },
        tsifyOptions: {
          target: 'es5',
          sourceType: "module"
        }
      }).on('end', done);
    }
  );
});

So far, the addition of tsifyOptions hasn't made a difference. Does anyone know how I can get this to compile properly?

ionic 2.0.0-beta.37
ionic-angular 2.0.0-beta.11
Darwin 15.6.0 Darwin Kernel Version 15.6.0: Mon Aug 29 20:21:34 PDT 2016; root:xnu-3248.60.11~1/RELEASE_X86_64 x86_64

Skip 'end' emit on TypeScript error

As it stands, ionic-gulp-tasks' browserify-typescript emits end on error -- any TypeScript error, while other build systems like Webpack will allow you to continue as normal even if TypeScript still thinks it's seeing imperfections.

I'm currently overriding this default behavior, but I feel it's not a great experience to have it purposely stop a build just because TypeScript still manages to find excuses to complain.
I think a reason post by Isiah Meadows on ES-Discuss did a good job of explaining why it is tough to 100% rely on TypeScript's intuitions:

First, no type checker (TypeScript, Flow, or any other) can fully check the core language (most notably bind, apply, call, and Object.assign).

Second, they both still are missing some pretty significant features required for typing common JavaScript idioms (higher kinded types for Fantasy Land and Ramda users, variadic generics for bind, call, and apply, n-ary unions for Object.assign and similar, etc.).

Aside from these, I can see many other TypeScript quirks that might be deemed desirable to silence/ignore as well, e.g. its complaints when you import JS libraries you don't have TS interfaces available for.

If no end were emitted here, might that cause any problems? Having overridden this behavior myself so far, I've been inclined to conclude the change was for the better.

ability to split the vendor and app bundles

I was using webpack earlier and though managed to use it successfully for a complex build, I was never happy with the abstraction that it provided and had to do lot of search to find the right syntax and command.

I like the gulp and browserfiy approach however I am missing the generation of two bundles - one that has all vendor scripts (ionic, angular, lodash, rxjs etc) and other that only has my app.

How should I one achieve this using this new gulp based system ?

Regards & thanks
Kapil

Offline compiler and tree shaking

Is there any estimate when offline compiling and tree shaking might arrive for Ionic 2? Our Ionic 2 app currently starts very slowly.

missing extensions in default options

I am using ng2-cookies module and ended up with the following error:

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Fixed by adding .ts to extensions in default options. Please fix.

browserifyOptions: {
cache: {},
packageCache: {},
debug: true,
extensions: ['.js', '.ts']
},

ES3 target support

Hi,

thanks for posting great tool. I am a newby in ionic and I need to run my ionic 2 app on old android devices (2.2) with ecmascript 3 support.
Especially I got errors on "delete" methods which is reserved in es3,
is there is option how to specify target ES3 or use es3ify to have compatibility to older browsers?

Any help appreciated,
Eugene

browserify-es2015: SyntaxError: Unexpected token when using types in JS

NOTE: I'm not sure if types are supported out of the box in Ionic 2 JS projects.

Short description of the problem:

When using types in a Ionic 2 JS project the following error is thrown:

SyntaxError: C:/Projects/Test/app/app.js: Unexpected token (12:9) while parsing file: C:\Projects\Test\app\app.js

What behavior are you expecting?

If types are supported in JS projects then the code should be converted to a valid JS code and executed.

Steps to reproduce:

  1. Create new JS project using ionic start Test --v2.
  2. Add a class property and some type.
  3. Add a type to the platform parameter of the constructor.
  4. Try to run the app in the browser, i.e. ionic serve.
  5. Observe the error that breaks the serve task.
// app.js
import 'es6-shim';
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  testing: string;

  static get parameters() {
    return [[Platform]];
  }

  constructor(platform: Platform) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

Other information: (e.g. stacktraces, related issues, stackoverflow links, forum links, etc)

https://forum.ionicframework.com/t/cant-start-android-app-after-updating-to-beta-4/48795/3
https://forum.ionicframework.com/t/syntaxerror-unexpected-token-how-is-that-possible/48717
https://forum.ionicframework.com/t/error-in-http-map-function-on-beta-4/48811

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

Cordova CLI: 6.1.1
Gulp version:  CLI version 1.2.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.4
Ionic CLI Version: 2.0.0-beta.24
Ionic App Lib Version: 2.0.0-beta.14
OS: Windows 8.1
Node Version: v5.8.0

Allow browserify transforms after typescript compilation

I'm currently trying to build an app in which I need generator functions. Typescript can only handle them when compiling to es6, not when compiling to es5. It would be cool if I could compile the typescript to es6 (which is possible at the moment), and after that compile it to es6 withe babelify or do some other transforms on it.

Currently you can add browserify options. When specifying a transform here, it will also get executed before the typescript compilation.

Ionic Gulp ESLint Task

I made a task for linting code via ESLint: ionic-gulp-eslint

Example gulpfile.js:

var gulp = require('gulp'),
    gulpWatch = require('gulp-watch'),
    del = require('del'),
    runSequence = require('run-sequence'),
    argv = process.argv;


/**
 * Ionic hooks
 * Add ':before' or ':after' to any Ionic project command name to run the specified
 * tasks before or after the command.
 */
gulp.task('serve:before', ['watch']);
gulp.task('emulate:before', ['build']);
gulp.task('deploy:before', ['build']);
gulp.task('build:before', ['build']);

// we want to 'watch' when livereloading
var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1;
gulp.task('run:before', [shouldWatch ? 'watch' : 'build']);

/**
 * Ionic Gulp tasks, for more information on each see
 * https://github.com/driftyco/ionic-gulp-tasks
 *
 * Using these will allow you to stay up to date if the default Ionic 2 build
 * changes, but you are of course welcome (and encouraged) to customize your
 * build however you see fit.
 */
var buildBrowserify = require('ionic-gulp-browserify-es2015');
var buildSass = require('ionic-gulp-sass-build');
var copyHTML = require('ionic-gulp-html-copy');
var copyFonts = require('ionic-gulp-fonts-copy');
var copyScripts = require('ionic-gulp-scripts-copy');
var eslint = require('ionic-gulp-eslint');

gulp.task('watch', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts', 'lint'],
    function () {
      gulpWatch('app/**/*.js', function(){ gulp.start('lint'); });
      gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
      gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
      buildBrowserify({ watch: true }).on('end', done);
    }
  );
});

gulp.task('build', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts', 'lint'],
    function(){
      buildBrowserify().on('end', done);
    }
  );
});
gulp.task('lint', eslint);
gulp.task('sass', buildSass);
gulp.task('html', copyHTML);
gulp.task('fonts', copyFonts);
gulp.task('scripts', copyScripts);
gulp.task('clean', function(){
  return del('www/build');
});

Example .eslintrc:

{
  "extends": "eslint:recommended",
  "env": {
    "node": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
      "sourceType": "module"
  },

  "rules": {
    // overrides from 'recommended'
    "indent": [1, "tab"],
    "max-len": [2, 140, 4, {"ignoreUrls": true, "ignoreComments": false}],

    "comma-dangle": 0,
    "no-console": 0,

    // strict
    "strict": [2, "global"],

    // formatting, spaces, operators
    "quotes": [2, "single"],
    "semi": [2, "always"],
    "keyword-spacing": 2,
    "space-before-blocks": [2, "always"],
    "space-before-function-paren": [2, "never"],
    "dot-location": [2, "property"],
    "space-infix-ops": 2,
    "key-spacing": [2, {"beforeColon": false, "afterColon": true}],
    "operator-linebreak": [2, "after"],
    "no-spaced-func": 2,
    "comma-spacing": [1, {"before": false, "after": true}],
    "no-multiple-empty-lines": [2, {"max": 2}],
    "camelcase": [1, {"properties": "always"}],

    // coding style
    "curly": 2,
    "wrap-iife": [2, "inside"],
    "eqeqeq": 2,
    "no-use-before-define": [2, "nofunc"],
    "no-unused-vars": 2,
    "no-unexpected-multiline": 2,
    "no-multi-str": 2,
    "no-irregular-whitespace": 2,

    // os/git options
    "no-trailing-spaces": 2,
    "linebreak-style": [2, "unix"],
    "eol-last": 2
  }
}

scripts-copy: make defaults visible?

In the gulp task for scripts-copy defaulSrc is invisible for the user. This makes it impossible to concatenate own sources to the function by calling

copyScripts({
  src: copyScripts.defaultSrc.concat([
      ... // my files here
  ])
});

I propose to change the code to allow it, if this does not stand against gulp rules, something along these lines:

var gulp = require('gulp');

module.exports = function(options) {
  var defaultSrc = [
    'node_modules/es6-shim/es6-shim.min.js',
    'node_modules/es6-shim/es6-shim.map',
    'node_modules/zone.js/dist/zone.js',
    'node_modules/reflect-metadata/Reflect.js',
    'node_modules/reflect-metadata/Reflect.js.map'
   ];

options.src = options.src || defaultSrc;
options.dest = options.dest || 'www/build/js';

return gulp.src(options.src)
    .pipe(gulp.dest(options.dest));
}

What do you think?

TypeScript source files cannot be debugged on a real mobile device in Android

Hi,
I recently updated my Ionic 2 project written in TypeScript to the latest version (from beta 19 to beta 25), and I switched from webpack to browserify, too. While using webpack in beta 19, I was able to debug the project using either WebStorm and Chrome, or the Chrome Developer Tools inspecting the WebView in a real Android device. However, using browserify in beta 25, I cannot debug the project anymore on a real device. If the application is launched in Chrome or in an Android device with the live reload mode, the source folder containing my TypeScript source files appears in the Chrome Developer tools. But, if the application is launched in Android without live reload using ionic run android, the WebView inspected from the DevTools does not include/show the source folder, so there is no way of placing breakpoints in TypeScript files.

I posted this issue in the Ionic 2 forum without success. Is there a solution for this problem?

Thanks in advance,
Xavi

How to reproduce the problem:

  1. Create a new Ionic 2 project with -v2 --ts (for example with the tabs template).
  2. type:
    $ ionic platform add android
    $ ionic run android
  3. Open Chrome and go to this location:
    chrome://inspect/#devices
  4. Your real device name attached to a USB port should appear at this page, click on inspect to debug the WebView.
  5. The source folder is missing and TypeScript files cannot be debugged.

Error with Webpack task

When using the latest ionic 2.0.0-beta.24, running ionic serve:

Running 'serve:before' gulp task before serve
[10:11:10] Starting 'fonts'...
[10:11:10] Starting 'sass'...
[10:11:10] Finished 'fonts' after 54 ms
[10:11:11] Finished 'sass' after 610 ms
[10:11:11] Starting 'watch'...
[10:11:11] 'watch' errored after 12 ms
[10:11:11] SyntaxError: Unexpected identifier
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at module.exports (/Users/dave/Sites/calamp-mobile-locate/node_modules/ionic-gulp-webpack-build/index.js:20:38)
    at Gulp.<anonymous> (/Users/dave/Sites/calamp-mobile-locate/gulpfile.js:37:12)
    at module.exports (/Users/dave/Sites/calamp-mobile-locate/node_modules/orchestrator/lib/runTask.js:34:7)
Proxy added: /forecast/ => https://api.forecast.io/forecast/086eaa44711f06f855c4b8759970fa6b
Running live reload server: http://localhost:35729
Watching: www/**/*, !www/lib/**/*
√ Running dev server:  http://localhost:8100
Ionic server commands, enter:
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit

ionic $ 

Allow to use TypeScript 2.0 and @types with `browserify-typescript`

The current version of browserify-typescript is using tsify@^0.14.1 which is incompatible with @types from TypeScript 2.0. A fix has been created in tsify@^1.0.1.

By upgrading the package.json with tsify@^1.0.1, TypeScript becomes a devDependency and it is not installed by tsify anymore. TypeScript will have to be installed via npm install typescript --save-dev in your project to use whatever version you want.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.